Understanding SVG ViewBox
Published: 2021-08-25 11:34:03

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:

```jsx
<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.**


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oeyfhraoio1flzx7mz6v.png)

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.

![An image with a red background showing a small black circle in the center.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uy7165a7908mxgce7q3n.png)
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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbvh1qon9lafk8jf3s87.png)
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.

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cor0bkrmkw2potc1msfe.png) 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.