SVGSVGElement: viewBox property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The viewBox read-only property of the SVGSVGElement interface reflects the <svg> element's viewBox attribute as an SVGAnimatedRect.

The property describes the <svg> element's viewBox attribute, which is used to defined the x-coordinate, y-coordinate, width, and height of an <svg> element. The SVGAnimatedRect.baseVal and SVGAnimatedRect.animVal properties are both SVGRect objects, or null if the viewBox is not defined. These objects' components may differ from the SVGSVGElement.x, SVGSVGElement.y, SVGSVGElement.width and SVGSVGElement.height properties, as the x, y, width, and height attributes take precedence over the viewBox attribute.

For non-nested SVG elements, the values of the CSS x, y, width, and height properties take precedence over any element attributes, so the values defined by the viewBox may not be reflected in the element's appearance.

Value

An SVGAnimatedRect.

Example

Give the following SVG opening tag:

html

<svg viewBox="-12 -18 200 300" x="5" y="5" height="400" width="600"></svg>

We can retrieve the viewBox values, but they differ from the x, y, width, and height properties:

const svg = document.querySelector("svg");
const vBox = svg.viewBox;

// The SVGSVGElement viewBox property
console.dir(vBox); // SVGAnimatedRect { baseVal: SVGRect, animVal: SVGRect }
console.log(vBox.baseVal.x); // -12
console.log(vBox.baseVal.y); // -18
console.log(vBox.baseVal.width); // 200
console.log(vBox.baseVal.height); // 300

// Other SVGSVGElement properties
console.log(svg.x); // 5
console.log(svg.y); // 5
console.log(svg.width); // 400
console.log(svg.height); // 600