Home :: Tutorials :: SVG :: Miscellaneous

Each SVG image is contained within an SVG Document. The SVG Document is used to locate elements by tagName or ID and it's used to dynamically create new SVG elements.

Adobe's SVG Viewer 3.0 automatically includes a window property called "svgDocument" that points to the SVG Document. However, you should include the following test and assignment in an initialization method (usually an onload event on the outermost svg element) to ensure compatibility with other SVG viewers such as Batik.

function init(evt) {
    if ( window.svgDocument == null )
        svgDocument = evt.target.ownerDocument;
}

This checks to see if svgDocument has been defined. If the property is not defined, then we use the event passed into the init method to locate the target of the event. The target will be some type of SVG element and like all DOM nodes, SVG elements have a pointer to their owning SVG document. We set the svgDocument global (a window object property) to the target's owning document. Note that the "evt.target.ownerDocument" line of code will locate the svgDocument inside of any event handling code.