The viewBox attribute is one of the first encountered by those new to SVG, and potentially one of the most confusing. While it has been covered by others in the past - Sara Soueidan’s long-form series might be considered one of the canonical resources - designers and developers have been missing a “quick start” guide that provides just the details necessary to get up and running in the most common vector drawing applications. That’s the goal of this article.

An Infinite Canvas

The SVG drawing space is effectively infinite: you can draw at any coordinate point anywhere in an SVG document. However, for display purposes the document usually has to have some sort of dimensioning, like a frame around a canvas painting. That’s where viewBox comes in.

The most common way you’ll see viewBox applied is something like the following:

<svg viewBox="0 0 200 100">

The viewBox uses four values, locating two coordinates in space: the top left of the SVG document, and the bottom right. In the example above, the top left corner is defined as 0 0 (x value, followed by y value), and the bottom right as 200 units across and 100 units down.

Two notes at this point:

1. The values used don’t have units of measurement. It’s best not to think of them as pixels, inches, or anything else, just as generic units.
2. While it’s very common for the top left corner of an SVG document to start at 0 0, it doesn’t have to.

In most vector drawing applications, the viewBox corresponds to the “canvas” or “artboard” area set up before you start drawing. However, many apps, including Adobe Illustrator and Sketch, will “clip” the viewBox to the visible area around the elements you have drawn when exporting as SVG, leaving little white space available inside the document. This is another reason why understanding the viewBox is important: you can adjust the visible “canvas” of the SVG directly in the code, rather than fighting the behaviour of your drawing application.

An SVG <circle> element drawn without cx or cy attributes will assume that it’s center is at 0 0 in the coordinate space. Let’s see what one looks like drawn inside an SVG with the viewBox values we’ve used:

<svg viewBox="0 0 200 100">
    <circle r="50">
</svg>

Which produces:

You can see that the viewBox does not determine the size of the SVG element rendered on the page; that’s the purpose of the width and height attributes and/or any CSS applied to the SVG. Instead, the viewBox determines the aspect ratio of the space, and the relative size of elements within it.

If the viewBox gets smaller the apparent size of the circle becomes larger, relative to the SVG document, even though the circle’s radius remains unchanged:

<svg viewBox="0 0 100 50">
    <circle r="50">
</svg>

You might think of this change as “zooming into” the document; thus, the viewBox also provides an overall “scale” to the elements inside an SVG.

Elements drawn outside the viewBox space will get cut off. Let’s add a different <circle> element, this time with cx and cy values together with a fill:

<svg viewBox="0 0 100 50">
    <circle cx="150" cy="120" r="20" fill="red" />
</svg>

Because this falls outside the dimensions of the viewBox, it can’t be seen: the SVG document clips it off automatically. We can change this by altering the viewBox values:

<svg viewBox="0 0 200 120">
    <circle cx="150" cy="120" r="20" fill="red" />
</svg>

Which produces:

It’s important to note that SVG elements clipped outside the viewBox are still “present”: they can be animated and brought “into” the viewable area. They just can’t be seen by default.

It’s also possible to show elements hidden by restrictive viewBox dimensions by applying overflow: visible to the SVG document via CSS. However, this will not extend the SVG background to cover the newly-exposed area, assuming one is applied:

Rescue Time

It’s also possible for viewBox coordinates for the top left corner to be negative. This may be required in the scenario provided earlier, when SVG elements are exported a little too close to the edge of the document.

Let’s say that you have the following:

<svg viewBox="0 0 500 100">
    <circle cx="50" cy="0" r="50" fill="red" />
</svg>

Which creates:

Currently only the bottom half of the circle can be seen; if we decrease the y component at the top left of the viewBox, we can fix that:

<svg viewBox="0 -40 500 100">
    <circle cx="50" cy="0" r="50" fill="red" />
</svg>

The result:

It’s important to note that changing the viewBox values does not change the origin point of the SVG as a whole. That is, a circle drawn with its center at 0 0 will be seen completely if the top left corner of the viewBox is moved outwards enough: the origin point is not dragged with this change.

Conclusion

There are many more aspects to the viewBox, but this article, combined with the material in the SVG reading lists, should be enough for you to start with your own SVG work with confidence… which I very much look forward to seeing shared in the comments below.

Photograph by Qalinx, used under a Creative Commons Attribution 2.0 Generic license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.