HTML <svg> viewBox Attribute

The viewBox attribute on an <svg> tag specifies the position and size of the svg image.

Example

#

A viewBox attribute on an <svg>.
The coordinate system is in 0-100 units whereas the real dimensions are 200 x 200 pixels.

<svg viewBox="0 0 100 100" width="200" height="200">
  <g transform="translate(50,50)">
    <path d="M38,-1h12v2h-12zM-38-1h-12v2h12z"/>
    <path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(30)"/>
    <path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(60)"/>
    <path d="M38,-1h12v2h-12zM-38-1h-12v2h12z" transform="rotate(90)"/>
    <path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(120)"/>
    <path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(150)"/>
    <path d="M-0.5,0v-35h1v35z"/>
    <path d="M0,-0.75h30v1.5h-30z"/>
    <path d="M0,-0.75h30v1.5h-30z" transform="rotate(-30)" fill="#888"/>
    <circle r="2"/>
  </g>
</svg>

Using viewBox

The viewBox is an attribute of the SVG element in HTML.

This attribute is used to scale the SVG element.

The SVG coordinates with origin, width, and height are defined with this attribute.


Syntax

<svg viewBox = "min-x min-y width height">

Values

#

Value Description
min-x Defines the origin on the horizontal axis (i.e left to right).
max-x Defines the origin on the vertical axis (i.e top to bottom).
width Defines the width of the viewbox.
height Defines the height of the viewbox.

Browser support

Here is when viewBox support started for each browser:

Chrome
4.0 Jan 2010
Firefox
3.0 Jun 2008
IE/Edge
9.0 Mar 2011
Opera
10.1 Jun 2010
Safari
3.2 Nov 2008

You may also like

 Back to <svg>
Guides