HTML <svg> viewBox Attribute

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"/>

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.


<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.

Browser support

Here is when viewBox support started for each browser:

4.0 Jan 2010
3.0 Jun 2008
9.0 Mar 2011
10.1 Jun 2010
3.2 Nov 2008

You may also like

 Back to <svg>

Last updated on Sep 30, 2023