This article is a full explanation on how and when to use the SVG viewBox.
The viewBox property is like a camera in a 2D scene, it allows you to zoom in and out and focus only on certain part of the svg.
A viewBox value consists of 4 integers separated by whitespaces:
xPosition: The X (horizontal axis) position of the top left corner of the viewBox
yPosition: The Y (vertical axis) position of the top left corner of the viewBox
width: The width of the portion of the entire SVG we want to capture
height: The height of the portion of the entire SVG we want to capture
Let’s look at examples.
This is the base SVG we are going to use throughout this course.
And here is the corresponding SVG code:
We have a 100px by 100px svg canvas which contains a 100px diameter disc centered in (50, 50).
In our first example, let’s create a viewBox that is placed at (0, 0) (top left corner) and looks at a 100px by 100px portion of our SVG. In other words, it does not do anything since it is the same as the SVG Element size… (for now)
We leave the viewBox at (0, 0) but only look at the first 50px by 50px part of the SVG.
Imagine the camera zooming at the first quarter and displaying that in a 100x100 SVG Element.
We leave the viewBox at (0, 0) but look at a bigger area of the SVG (200px by 200px).
This time around, we won’t modify the size of the area we want to look at (100px by 100px) but we will move the top left corner of the viewBox to the middle of the disc which is located at (50, 50).
It is possible to use negative values for the the X and Y position of the viewBox (it is not possible to use negative values for the width and height though).
In all the examples so far, we have kept the aspect ratio. Let’s see what happens if we zoom out more on one dimension.
So what happened here, is we took a 200px by 100px viewBox (in red below) out of our initial SVG and resized it to fit in our 100px by 100px SVG HTML element:
By default, the aspect ration is preserved, which is why the disc and viewBox height is also divided by half. You should also note that when auto resizing to preserve the aspect ratio, the browser centers the figure.
The next logical question would be: why if do not want to preserve the aspect ratio but stretch the disc into an ellipse instead.
Reusing the example above, this is done by adding an extra element to the
<svg> HTML element:
The Aspect Ration is not preserved here, as a result, the circle is compressed at the width is reduced by half but the height remains the same.
meet property is another possible value for
preserveAspectRatio. It indicates that the aspect ration should be preserved and that all edges should remain contained within the viewBox.
In the situation where you want to keep the aspect ratio, you might also want to control the position where the final vector is placed (centred by default). This is why the
meet property should be paired with another list of keywords to specify the final placement of the vector.
With an horizontal viewBox: (xMin, xMid and xMax are equivalent)
With a vertical viewBox: (yMin, yMid and yMax are equivalent)
meet value can be replace with
slice. Instead of resizing and containing the edges of the viewBox within the SVG element, the vector is sliced.
I believe that at this point, the examples should speak for themselves.
With an horizontal viewBox: (yMin, yMid and yMax are equivalent)
With a vertical viewBox: (xMin, xMid and xMax are equivalent)
That’s it for my explanations on the SVG viewBox, please let me know if you have any questions, corrections or if I have missed anything.
The code for all the examples above is available on CodePen