SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    3 Post(s)
    0 Thread(s)

    svg as object, svg not appearing in DOM

    From a book I'm reading at the moment:

    Quote Originally Posted by Hello! HTML5 & CSS3

    <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?
    Last edited by Paul O'B; Mar 31, 2013 at 13:33.

  2. #2
    bronze trophy
    Join Date
    Dec 2004
    0 Post(s)
    0 Thread(s)
    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).
    Simon Pieters


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts