How to access the content of the "embed" tag in HTML

Question

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.

Answer 1

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.

Answer 2

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!)