svg as object, svg not appearing in DOM

[johnyboy]

From a book I'm reading at the moment:

<img src="svg-2.svg">

[…] But you lose the advantage of being able to manipulate the image from the Java- Script—the elements of the image aren’t present in the DOM.

<object type="image/svg+xml" data="svg-2.svg"></object>

In browsers with native support for SVG, the object-embedding approach has results similar to including the SVG inline: the SVG elements are available in the DOM and can be manipulated. This technique works in every browser that has SVG support

I have Inkscape installed which uses SVG as its native file format. So I put an img element in a test html page with its source pointing to an Inkscape SVG file. Yup it displayed fine. Then I did the object version. Again it displayed fine. I viewed this in Firefox (Mac version 14.0.1) and used Firebug (v1.10.0) to look at the DOM. What I see doesn't tally with what it says in the book: "…object-embedding approach has results similar to including the SVG inline: the SVG elements are available in the DOM…". I find the object node (the one which links to the SVG file) in Firebug's display of the DOM. That node has an empty list/array ("[ ]") for both childNodes and children.

Why isn't the SVG code part of the DOM do you think?

[zcorpan]

With <object> the SVG document is accessible in the DOM, but that doesn't mean that the document is a child of the <object> element, that doesn't make sense. Instead there's a property on <object> called "contentDocument" which you can use to access the embedded SVG document (assuming it's same-origin).