Photo by Pankaj Patel on Unsplash

Understanding SVG ViewBox

While fully understanding how SVGs work is quite hard, and can be considered a “rare” skill, it can prove rather useful. ViewBox can prove to be highly confusing for a beginner, so here's a basic guide where I cover the very basics of a viewBox.

View Box

The viewBox is what makes SVGs scalable. We can make our SVG any size we like, and everything will scale naturally, since the elements within the SVG are relative to it. The viewBox can be thought of as a telescope; it zooms and pans to the dimensions we give it. It has 4 attributes -

min-x, min-y, width and height.

The position of the viewBox can be set with the first 2 attributes. They are the coordinates from where the viewBox starts.

The width and height attributes are responsible for the “zoom” feature. If these values are same as the height and width of the SVG, nothing will appear to be changed.

However if these are larger than the SVG’s dimensions, it’ll create a “zoomed-out” effect, and vice-versa if they are smaller. To make it clearer lets have a look at this code:

<svg
      style="border: 1px solid black;"
      height="300"
      width="300"
      viewBox="0 0 300 300"
      xmlns="<http://www.w3.org/2000/svg>"
    >
   
      <rect x="0" y="0" width="100%" height="100%" fill="red" />      
      <circle cx="50%" cy="50%" r="10" fill="black" />
    
</svg>

The dimensions of the SVG are 300*300, and it has a rectangle and a circle within.

As the dimensions of the SVG and the dimensions of the viewBox are the same, the SVG appears the same.

This is how the SVG would appear without a viewBox.

About the shapes:

The rectangle starts from 0,0 of the SVG, and as the dimensions are in percentage, it covers the entire SVG.

The circle starts from 50%, 50%- which is the center of the SVG rectangle, with a set radius of 10px

Changing the height and width

Zooming-in:

To create a “zoomed-in” effect, all we need to do is change the last two attributes- height and width. If their values are less than the SVG’s; which in our case are 300*300, the viewBox works like a telescope or a magnifying glass, it shows us lesser area, but magnified.

Now if we change the viewBox coordinates to 0 0 100 100 , we see that the circle appears to be bigger. Relative to the center of the SVG, the viewport now shows us 100*100. As the circles center was in percentage, it still remains in the center.

Similarly we can change it to 0 0 50 50.

If we use larger dimensions here, instead of zooming-in, it’ll be zoomed out.

<svg
style="border: 1px solid black;"
height="300"
width="300"
viewBox="0 0 100 100"
xmlns="<http://www.w3.org/2000/svg>"
>
<rect x="0" y="0" width="100%" height="100%" fill="red" />
<circle cx="50%" cy="50%" r="10" fill="black" />
</svg>

Zooming-out:

Similarly, if the height and width of the viewBox is more than that of the SVG, it creates a “zoomed-out” effect. This is because while the SVG is 300*300 , increasing the values of the viewBox means it shows us more area than that, which makes the SVG look smaller.

In case of viewBox = "0 0 1000 1000" , the visible area is now scaled up to 1000px*1000px.

As the <rect> element’s dimensions were in percentage, it remains unchanged visually, but the circle is visibly smaller.