Accessing a DOM object defined in an external SVG file

Question

SVG standard allows to use and refer external SVG files.

I have a file circle.svg that defines a circle object with id "the_circle". From the main SVG file I am able to include this circle and animate it, using SVG linking.

I would also like to access the same circle object via javascript, how can I do this ? What is the javascript equivalent of xlink:href="url(#the_image)#the_circle" ?

Using document.getElementById('the_image') I can only access the SVGImageElement but not the objects defined inside the included SVG.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

  <image 
    id="the_image"
    x="0" y="0"  width="100%" height="100%"
    xlink:href="circle.svg" />

  <animateTransform     
    xlink:href="url(#the_image)#the_circle"

    attributeName="transform" attributeType="XML"
    type="translate" 
    from="0" to="25"
    dur="1s" repeatCount="indefinite" 
    additive="replace" fill="freeze" />
</svg>

Posted the same question at svg-developers http://tech.groups.yahoo.com/group/svg-developers/message/63940 — rodrigob, Jul 29 '10 at 14:50

score 15 · Accepted Answer · answered Jul 31 '10 at 13:35

It seems like the "right" way to do this would actually be to use an SVG "use" element, rather than an image. The reason for this is that the DOM interface of the SVG use element specifies a property "instanceRoot", which allows you to get the root of the "instance tree" corresponding to that use element: http://www.w3.org/TR/SVG/struct.html#InterfaceSVGUseElement

So, you would end up with a solution that looks something like the following: circle.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="4in" id="the_svg"
     viewBox="0 0 4 4" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
    <circle r="1" fill="blue" stroke="none" id="the_circle"/>
</svg>

Document which uses the svg root node of circle.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" id="foo"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <use xlink:href="circle.svg#the_svg"/>
</svg>

Unfortunately, though, while Firefox supports use of the use element with external documents, there's currently a bug in Webkit which does not allow this: https://bugs.webkit.org/show_bug.cgi?id=12499

Also, Firefox does not seem to implement the instanceRoot property for use elements.

So, it seems you may need to work around the limitations of current SVG implementations. The way I would recommend doing this is to use XMLHttpRequest to download the document to which you would like to link, and import the DOM of the downloaded document into your host document's DOM. The following code implements this, and works in Firefox, Opera and Chromium:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" id="foo"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <script>
    function fetchXML  (url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function (evt) {
        //Do not explicitly handle errors, those should be
        //visible via console output in the browser.
        if (xhr.readyState === 4) {
            callback(xhr.responseXML);
        }
        };
        xhr.send(null);
    };

    //fetch the document
    fetchXML("http://localhost:8082/tmp/circle.svg",function(newSVGDoc){
        //import it into the current DOM
        var n = document.importNode(newSVGDoc.documentElement,true);
        document.documentElement.appendChild(n);

        var circle = document.getElementById("the_circle"); //now you have the circle
    }) 
    </script>
</svg>

This is exactly what I was looking for! Other attempts to fetch the SVG via XHR and append it to the DOM didn't succeed. Thanks! — Naor Biton, Dec 31 '13 at 09:28
hey jbeard4 :) I was trying to use your solution for a big SVG (900kb) and now the Code load before the SVG is loded and then i cant access the svg. here is the link to my question [My Question](http://stackoverflow.com/questions/28682214/cant-access-svg-by-its-id) i think you can help me ! — selman, Feb 23 '15 at 20:20
The [referenced bug](https://bugs.webkit.org/show_bug.cgi?id=12499) was fixed in 2012 in Firefox. — Matthias Braun, Aug 03 '23 at 23:17

Spadar Shut · Answer 2 · 2011-10-15T09:17:16.723

13

You can access the necessary element a bit easier:

document.getElementById('the_image').contentDocument.getElementById('the_circle')

See this image for reference (taken on dev.opera.com) enter image description here

edited Oct 15 '11 at 09:17

answered Aug 19 '11 at 19:29

Spadar Shut

15,111
5
47
54

Nice, but what's the catch? I assume this only works on SVGs included from the same domain? – joeytwiddle Jul 09 '13 at 15:57
And so what? Generally you want to manipulate your file, not a one from some other site. – Spadar Shut Jul 10 '13 at 09:02
I'll take that as a yes; just good to be clear. I agree that same-domain is very often the case, making the other answers rather overkill unless a general solution really is needed. – joeytwiddle Jul 11 '13 at 09:45
Actually making ajax requests to another domain faces the same issue, unless it allows CORS. – Spadar Shut Jul 11 '13 at 11:00
Sadly this doesn't work for `file://` URLs either. Rather annoying. – Timmmm Aug 15 '17 at 14:25

martyn · Answer 3 · 2015-10-16T19:17:44.263

1

Here's a solution to this problem when using React and ES6. Usage:

<SvgImage url='pathToImage.svg'></SvgImage>

https://gist.github.com/mikkel/8b79a713ff06bbec379d

edited Oct 16 '15 at 19:17

answered Oct 16 '15 at 19:04

martyn

131
1
3

score 1 · Answer 4 · answered Aug 19 '11 at 18:43

1

To supplement @echo-flow's excellent solution with the code in jQuery/Coffeescript:

  $.get '/assets/hexagon.svg', (svgFileData)->
    svgTag = svgFileData.documentElement
    $('body').append(svgTag)
    circle = $('#the_circle')

answered Aug 19 '11 at 18:43

Duke

7,070
3
38
28

Don't forget to import the node using document.importNode. It might complain if you don't. – jbeard4 Aug 19 '11 at 19:15

Accessing a DOM object defined in an external SVG file

4 Answers4

Linked