Search notes:

SVG/JavaScript example: access-root-element

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>Simple embedded SVG test</title>
  <script>


  function main() {

    var html_object   = document.getElementById('inkscape-drawing');
    var svg_document  = html_object.getSVGDocument();  // or alternatively: html_object.contentDocument;
//  var svg_document  = html_object.contentDocument;
    var svg_root_elem = svg_document.rootElement;      // or alternatively: svg_document.documentElement;
    var svg_width     = parseFloat(svg_root_elem.getAttribute('width'));

    console.log("html_object = "   + html_object);   // [object HTMLObjectElement]
    console.log("svg_document = "  + svg_document);  // [object SVGDocument]
    console.log("svg_root_elem = " + svg_root_elem); // [object SVGSVGElement]
    console.log("svg_width = "     + svg_width);     //  150

  }

  </script>
</head>
<body onload='main()'>

<object
   id  ="inkscape-drawing"
   type="image/svg+xml"
   data="inkscape-simple.svg"
 />

</body>
</html>

Github repository about-svg, path: /javascript/embedded/access-root-element.html

Note: the value of the data attribute of the <object> elements is the name of an SVG file (that was created with Inkscape).

Apparently, this example does not work if run on a local file system because (for security reasons?) getSVGDocument returns null in such a case. Instead, the example must be run over HTTP.

SVG/JavaScript example: access-root-element

See also