The following works in Firefox 4, 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's nothing I can do about that except try to find a way to work around it. I thought about using an XMLHttpRequest to grab the external file and insert it into the svg element. Will that cause any problems? Are there better ways to do it?

The following works in Firefox 4, 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's nothing I can do about that except try to find a way to work around it. I thought about using an XMLHttpRequest to grab the external file and insert it into the svg element. Will that cause any problems? Are there better ways to do it?

• javascript
• google-chrome
• webkit
• svg

Share Improve this question Follow asked Mar 23, 2011 at 21:28 Mike BaranczakMike Baranczak 8,39488 gold badges4949 silver badges7373 bronze badges 2

• At Mike or @Phrogz: can one programmatically test for this use functionality without browser sniffing? – Courtney Christensen Commented Oct 7, 2011 at 22:43
• Related question - stackoverflow./questions/1811116/… – resnyanskiy Commented Mar 26, 2012 at 3:13

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

After you fetch the SVG document via 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'll need to import the portion you want from one document into your target document before you can use it as part of that document.

The simplest 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 that bug, you can alternatively use this function to recursively recreate a node hierarchy in the document of choice:

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 fetch an SVG document and both techniques of importing the node on my website: http://phrogz/SVG/fetch_fragment.svg

I've written a simple and lighweight polyfill for this: https://github./Keyamoon/svgxuse

It detects whether or not it needs to send an HTTP request. If the browser doesn't support external references by default, it sends a GET request to fetch and cache the SVG.

I hope this helps.

I do a lot of AJAX requests for SVG markup, where I insert the markup into the DOM. You can't just insert it as a fragment, as far as I know, you have to recursively walk the retrieved XML doc, and create the individual SVG elements.

So, you might be better off bining the files on the server, before you send them to the browser.

In case someone stumbles accross this page. Here is a simpler way to use an HTTP request object to fetch 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 in the following line (either you use window.fetch or xmlHttpRequest or whatever):

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