Obtaining an original SVG viewBox via javascript

Question

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

 <svg xmlns='http://www.w3.org/2000/svg' viewBox='0,0 65415,41616' xml:space='preserve' height='50.000cm'  width='50.000cm' xmlns:xlink='http://www.w3.org/1999/xlink 

But strangely in JavaScript there seems to be no way of getting this 'viewBox' back from the SVG DOM - either as a string, or as a set of values. Under Mozilla, for example, firebug reports that the svg node has 5 of the 6 attributes we specifiy - namely: xmlns, xml:space, height, width and xmlns:xlink. But ViewBox is conspicuously missing from this list.

Is there anyway to programmatically retrieve this value? - where is it in the SVG DOM? (We cannot introduce 3rd party libraries).

Answer 1

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.