Import external SVGs (using WebKit)

Question

On Firefox 4 it works, but not Chrome 10:

<svg:svg version="1.1"> <svg:use xlink:href="some_file.svg#layer1"/> </svg:svg> 

This is a known bug in Chrome / WebKit, so there is nothing I can do about it except try to find a way around it. I thought about using XMLHttpRequest to capture an external file and paste it into the svg element. Will this cause problems? Are there any better ways to do this?

Answer 1

After receiving the SVG document through XHR, you will have a separate XML document in the xhr.responseXML property. Since you cannot legally move nodes from one document to another, you will need to import the part you want from one document into the target document before you can use it as part of this document.

The easiest way to do this is to use document.importNode() :

 var clone = document.importNode(nodeFromAnotherDoc,true); // Now you can insert "clone" into your document 

However, this does not work for IE9 . To work around this error, you can alternatively use this function to recursively recreate the node hierarchy in the selected document:

 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]; 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; } 

You can see an example of using XHR to extract an SVG document and both node import methods on my website: http://phrogz.net/SVG/fetch_fragment.svg

Answer 2

I make a lot of AJAX requests for SVG markup, where I embed markup in the DOM. You cannot just insert it as a fragment, as far as I know, you need to recursively go through the extracted XML document and create separate SVG elements.

So, you might be better off combining files on a server before sending them to your browser.

Answer 3

I wrote a simple and lite polyfill for this: https://github.com/Keyamoon/svgxuse

Determines whether to send an HTTP request to him. If the browser does not support external links by default, it sends a GET request to retrieve and cache the SVG.

Hope this helps.

Answer 4

If someone stumbles on this page. Here is an easier way to use the HTTP request object to retrieve the svg file:

 window .fetch('/assets/ciphers.svg') .then( function (response) { return response.text(); } ).then( function (body) { var div = document.createElement('div'); div.innerHTML = body; while (div.children.length > 0) { document.head.appendChild(div.children[0]); } } ); 

The trick is on the following line (either you use window.fetch, or xmlHttpRequest or something else):

  var div = document.createElement('div'); div.innerHTML = body; while (div.children.length > 0) { document.head.appendChild(div.children[0]); }