The viewBox attribute on an <svg> tag specifies the position and size of the svg image.
This is used to scale SVG element.
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>
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.
<svg viewBox = "min-x min-y width height">
| 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. |
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 |
Back to <svg>
