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

The value of theviewBox attribute is a list of four numbers separated by whitespace and/or a comma:min-x,min-y,width, andheight.min-x andmin-y represent the smallest X and Y coordinates that theviewBox may have (the origin coordinates of theviewBox) and thewidth andheight specify theviewBox size. The resultingviewBox is a rectangle in user space mapped to the bounds of the viewport of an SVG element (not thebrowser viewport).When an SVG contains aviewBox attribute (often in combination with apreserveAspectRatio 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.

<svg>

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

<symbol>

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

<view>

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

Examples

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

The code snippet below includes three<svg>s with differentviewBox 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 theviewBox value. The radius lengthr attribute of the<circle> is the same in each case, but this user unit value is resolved against the size defined in theviewBox, producing different results in each case.

<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 ofr="4" are resolved against theviewBox sizes, creating dramatically different circle sizes. The exact effect of theviewBox attribute is influenced by thepreserveAspectRatio attribute.

Specifications