viewBox - SVG: Scalable Vector Graphics

The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.

The value of the viewBox attribute is a list of four numbers separated by whitespace and/or a comma: min-x, min-y, width, and height. min-x and min-y represent the smallest X and Y coordinates that the viewBox may have (the origin coordinates of the viewBox) and the width and height specify the viewBox size. The resulting viewBox is a rectangle in user space mapped to the bounds of the viewport of an SVG element (not the browser viewport). When an SVG contains a viewBox attribute (often in combination with a preserveAspectRatio attribute), a transform stretches or resizes the SVG viewport to fit a particular container element.

Elements

You can use this attribute with the SVG elements described in the sections below.

<marker>

For <marker>, viewBox defines the position and dimension for the content of the <marker> element.

<pattern>

For <pattern>, viewBox defines the position and dimension for the content of the pattern tile.

Value	<number>,? <number>,? <number>,? <number>
Default value	none
Animatable	Yes

<svg>

For <svg>, viewBox defines the position and dimension for the content of the <svg> element.

Value	<number>,? <number>,? <number>,? <number>
Default value	none
Animatable	Yes

<symbol>

For <symbol>, viewBox defines the position and dimension for the content of the <symbol> element.

Value	<number>,? <number>,? <number>,? <number>
Default value	none
Animatable	Yes

<view>

For <view>, viewBox defines the position and dimension for the content of the <view> element.

Value	<number>,? <number>,? <number>,? <number>
Default value	none
Animatable	Yes

Examples

html,body,svg { height: 100%; vertical-align: top;}svg:not(:root) { display: inline-block;}

The code snippet below includes three <svg>s with different viewbox attribute values and identical <rect> and <circle> descendants creating very different results. The size of <rect> is defined using relative units, so the visual size of the square produced looks unchanged regardless of the viewBox value. The radius length r attribute of the <circle> is the same in each case, but this user unit value is resolved against the size defined in the viewBox, producing different results in each case.

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100%" height="100%" /> <circle cx="50%" cy="50%" r="4" fill="white" /></svg><svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100%" height="100%" /> <circle cx="50%" cy="50%" r="4" fill="white" /></svg><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100%" height="100%" /> <circle cx="50%" cy="50%" r="4" fill="white" /></svg>

The user units of r="4" are resolved against the viewBox sizes, creating dramatically different circle sizes. The exact effect of the viewbox attribute is influenced by the preserveAspectRatio attribute.

Note: Values for width or height lower or equal to 0 disable rendering of the element.

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # ViewBoxAttribute

viewBox - SVG: Scalable Vector Graphics | MDN (2024)