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

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;