Obtaining an original SVG viewBox via javascript

Question

Our system loads SVG files programmatically into HTML via AJAX. A typical SVG file begins with:

Answer 1

Even easier, put an id in your svg then :

document.getElementById("your_id").getAttribute("viewBox");

Answer 2

1. Go to http://phrogz.net/SVG/svg_in_xhtml5.xhtml
2. Open your web browser console

3. Type the code:

   var svg = document.querySelector('svg');
   var box = svg.getAttribute('viewBox');
   box.split(/\s+|,/);
   

4. Observe the glorious response:

   ["-350", "-250", "700", "500"]
   

5. Alternatively, type the code:

   var box = svg.viewBox.baseVal;
   [ box.x, box.y, box.width, box.height ]
   

6. Observe the glorious response:

   [ -350, -250, 700, 500 ]
   

In other words: yes, you can get the viewBox from the DOM, both as a standard DOM 2 attribute as well as an explicit ECMASCript binding.

Answer 3

You'll want to take a look at the SVGFitToViewBox interface, which specifies the viewBox property. The interface for svg elements, SVGSVGElement, extends that interface, so this property is available on the element objects:

const svgElement = document.getElementById("example-svg");
const {x, y, width, height} = svgElement.viewBox.baseVal;

Answer 4

Above receipes gave me all zeros for the x, y, width and height viewBox attributes -- unless at least one of them was changed programmatically.

I finally succeded with

var width = document.getElementById("mysvg").getAttribute("width");