16

I have an SVG file, and I don't want to paste it inside the HTML file because, well, it gets messy. So after consulting with w3schools, "embed" tag seemed the safest way to include an external SVG file into HTML.

<embed src="path_to_svg" type="image/svg+xml" id='svgsource' />

However, I need to access the svg elements through DOM via javascript in the main html file. Unfortunately neither

document.getElementById('my_svg_id')

nor

document.getElementById('svgsource').contentDocument

works in any browser. Using "object" tag doesn't do the trick either.

narengi
  • 1,345
  • 3
  • 17
  • 38
  • 4
    I'm not a fan of w3schools. See http://w3fools.com/. – gilly3 Dec 13 '11 at 21:17
  • possible duplicate of [Is it possible to navigate SVG object's elements from enclosing HTML?](http://stackoverflow.com/questions/4911525/is-it-possible-to-navigate-svg-objects-elements-from-enclosing-html) – Phrogz Dec 13 '11 at 21:41
  • 2
    also see http://stackoverflow.com/questions/8102528/how-do-you-access-the-contents-of-an-svg-file-in-an-img-element – Erik Dahlström Dec 14 '11 at 09:22

5 Answers5

12

Use .getSVGDocument(). This seems to work for <embed>, <object> and <iframe>:

document.getElementById('svgsource').getSVGDocument()

For <object> or <iframe> you can also use .contentDocument:

document.getElementById('svgsource').contentDocument

For IE7 or IE8, I believe you are out of luck.

tchelidze
  • 8,050
  • 1
  • 29
  • 49
gilly3
  • 87,962
  • 25
  • 144
  • 176
  • I think that getSVGDocument works in IE7/8 if the Adobe SVG plugin is installed, on embed elements only. But I can't recommend that configuration, it's much better to upgrade to a modern browser. – Erik Dahlström Dec 14 '11 at 09:29
  • 1
    `.getSVGDocument()` is [now deprecated](https://www.w3.org/TR/SVG/struct.html#InterfaceGetSVGDocument). – Andrew Willems Mar 07 '16 at 07:11
10

Complete about turn!

Turns out you can, see this link: http://xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.html

(Also, go and up vote some of Erik Dahlström's other answers to give him some points for me hijacking his answer!)

Community
  • 1
  • 1
Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • So you're saying that either I should have the entire SVG inside the html, or I will lose any further access to it, right? Because from what I understood, the options to include an SVG is using , or – narengi Dec 13 '11 at 21:19
  • I believe so, yes. As I say though, you could load the whole svg into a div via ajax in order to keep it separate if desired. – Rich Bradshaw Dec 13 '11 at 21:29
  • Alternatively, you could use an iframe - you may be able to access it using the usual way there. – Rich Bradshaw Dec 13 '11 at 21:40
1

Short answer: You can try inlining the referenced SVG file content. For <object> and <iframe> elements, use:

e.parentElement.replaceChild(e.contentDocument.documentElement.cloneNode(true), e);

...where e is the referencing element. If you absolutely need the <embed> element then change .contentDocument in the above code to .getSVGDocument() (the parentheses are required). Note, however, that .getSVGDocument() is now deprecated and is thus not recommended, but it is already also recommended to use <object> or <iframe> instead of <embed> anyway.

For a more complete answer, see my other SO answer on the subject.

Community
  • 1
  • 1
Andrew Willems
  • 11,880
  • 10
  • 53
  • 70
0

Have you tried with an <object> element instead? (data attribute instead of src)

Shadow2531
  • 11,980
  • 5
  • 35
  • 48
0

I believe in IE9 you can use an <iframe> element to load SVG in which case you can access the contentDocument property, but with previous versions of IE you may be out of luck. (Other browsers should let you use contentDocument with <embed> and <object>.)

Neil
  • 54,642
  • 8
  • 60
  • 72