Insert SVG element into existing page using AJAX (multi-browser support) Assumption: SVGWeb is available for old versions of IE Assumption: The GET url returns the SVG data as a valid XML document NOTE: If you ONLY need to support current PC/Android browsers you can just use: document.getElementById('SVGElementHere').innerHTML = xmlhttp.response…

insertSVG.js

// AJAX variable
var xmlhttp;

// Work out IE Version number (if any)
var ieVer = -1;
if (navigator.appName == 'Microsoft Internet Explorer')
{
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
        IEver = parseFloat( RegExp.$1 );
}

// Usual simple AJAX call
function requestSVG(url) {
    if (!xmlhttp) xmlhttp = new XMLHttpRequest();
    if (!xmlhttp) return;
    xmlhttp.open('GET', url, true);
    xmlhttp.onreadystatechange = updateSVG;
    xmlhttp.send(null);
}

function updateSVG() {
    if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
        var svgImg = document.getElementById('SVGElementHere'); // id attribute of div to contain SVG
        while ( svgImg.hasChildNodes() ) {       // remove anything already present
            svgImg.removeChild(svgImg.firstChild);
        }
        if ( xmlhttp.responseXML == null ) {
            errorText = document.createTextNode(xmlhttp.responseText);
            errorPara = document.createElement('p');
            errorPara.appendChild(errorText);
            svgImg.insertBefore(errorPara,null);
        } else {
            // Check for old versions of IE (IE < 9 did not support SVG, so use SVGWeb)
            // NOTE I have not tested this for quite a while, cannot guarantee it still works
            if ( IEver != -1 && IEver < 9.0 ) {
                var obj = document.createElement('object', true);
                obj.setAttribute('type', 'image/svg+xml');
                obj.setAttribute('data', 'data:image/svg+xml,' + xmlhttp.responseText);
                obj.setAttribute('width', 600);     // image size in pixels
                obj.setAttribute('height', 500);    // set as required
                obj.addEventListener('load', function() { ; }, false);
                svgweb.appendChild(obj, svgImg);
            } // Check for being an apple mobile device
            // NOTE I have not tested this personally but others report it works OK
            else if ( (navigator.userAgent.indexOf( "iPad" ) > 0) ||
                (navigator.userAgent.indexOf( "iPod" ) > 0) ||
                (navigator.userAgent.indexOf( "iPhone" ) > 0)
                ) {
                var svg = document.importNode(xmlhttp.responseXML.firstChild, true);
                svgImg.appendChild(svg);
            } // Otherwise assume we are just a PC or Android browser
            else {
                var svg = xmlhttp.responseXML.documentElement;
                svg = cloneToDoc(svg);    // Needed by older versions of FF / Safari (I think....)
                svgImg.appendChild(svg);
                // NOTE if you are ONLY dealing with current browsers you can replace both the previous lines with
                //svgImg.innerHTML = xmlhttp.responseText;  // This seems to work OK on current FF, CHROME & IE9
            }
        }
    }
}

// Function provided by http://stackoverflow.com/users/405017/phrogz
function cloneToDoc(node,doc){
    if (!doc) doc=document;
    var clone = doc.createElementNS(node.namespaceURI,node.nodeName);
    for (var i=0,len=node.attributes.length;i<len;++i){
        var a = node.attributes[i];
        if (/^xmlns\b/.test(a.nodeName)) continue; // IE can't create these
        clone.setAttributeNS(a.namespaceURI,a.nodeName,a.nodeValue);
    }
    for (var i=0,len=node.childNodes.length;i<len;++i){
        var c = node.childNodes[i];
        clone.insertBefore(
            c.nodeType==1 ? cloneToDoc(c,doc) : doc.createTextNode(c.nodeValue),
            null
        ); }
    return clone;
}

Thank you so much. You saved my project. I'll re- document it so that noobs like me can understand it.