I recently wrote a post on understanding SVG viewport and viewBox and figured this would be the perfect follow-up topic to quickly dig a little deeper.
Understanding SVG workspace can be really tricky. There is a lot of customization to be had within this space and the more details we provide the more likely our graphics will have consistent output across browsers. Also, the details within our SVG, like gradients or patterns, can rely heavily on the initial coordinate system that we define.
viewBox and viewport Summary
height of our SVG establish the visible area (the viewport), and setting a
viewBox allows us to specify that our graphics stretch to fit a certain container (usually the viewport). When the values of each are the same, the entire image is visible and scales accordingly when the viewport dimensions are altered. It's a beautiful thing.
If the SVG
viewBox and viewport do not have the same width to height ratio,
preserveAspectRatio indicates whether or not to force uniform scaling.
In the following examples we will look at a some cherries and the effect various
preserveAspectRatio values will have on their visual output. Here are the cherries set to scale uniformly with matching viewport and
preserveAspectRatio takes two parameters,
<meetOrSlice>. The first parameter takes two parts and directs the
viewBox's alignment within the viewport, and the second is optional and indicates how the aspect ratio is to be preserved.
These values will align the bottom right corner of the
viewBox to the bottom right corner of the viewport.
meet preserves the aspect ratio by scaling the
viewBox to fit within the viewport as much as possible.
There are three
<meetOrSlice> options: meet (default), slice, and none. While
meet ensures complete visibility of the graphic (as much as possible),
slice attempts to fill the viewport with the
viewBox and will then slice off any part of the image that does not fit inside the viewport after this scaling.
none results in no preserved aspect ratio and a potentially distorted image.
You can find a complete list of value combinations and their descriptions here at the W3C.
Aspect Ratios and Cherries
Perhaps the most straightforward value here is "none", which establishes that uniform scaling should not be applied. If we then increase the pixel values of the viewport, the cherries will stretch non-uniformly and look distorted and non-delicious.
Altered Min, Max, Mid Values
Let’s take a look at the effects of a few different value combinations.
preserveAspectRatio here is set to
xMinYMax meet which is aligning the bottom left corner of the
viewBox to the bottom left corner of the viewport, which is now outlined.
meet is ensuring the image is scaling to fit inside the viewport as much as possible.
xMid will position the cherry to the right or to the center of the viewport.
Here’s what will happen is we change
The cherries are no longer being forced to fit within the bounds of the viewport and the excess graphic is sliced off once the
viewBox fills the viewport.
The alignment values do not have to correlate.
The above example has a
xMinYMid slice. We are now seeing the cherries aligned along the middle of the y axis of the viewport.
Establishing your ideal SVG workspace can seem somewhat tedious, but taking the time to define certain details can result in much more powerful and flexible graphics.