Demo for article: SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, & preserveAspectRatio
viewBox
800 600
preserveAspectRatio

When the min-x and min-y values change, the mid-x, max-x, mid-y, and max-y values change accordingly.

The “show x & y guidelines” option allows you to show and hide the above mentioned lines to better visualize the position of the viewBox with respect to the viewport.

Note that the grey dotted horizontal and vertical lines represent the horizontal and vertical midpoints of the viewport, used to align the viewBox when a xMid* or *YMid value is used.

CheatSheet

preserveAspectRatio

preserveAspectRatio = defer? <align> <meetOrSlice>?

The align and meetOrSlice parameters work together in a way similar to how background-position and background-size work together. Read further for more information.

The <align> parameter indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the viewBox doesn’t match the aspect ratio of the viewport. It can take one of the following values:

The alignment of the viewBox inside the viewport is—in a way—similar to the positioning of a background image inside a background positioning area when using percentage values to position the image.
none
Do not force uniform scaling. Scale the graphic content of the given element non-uniformly (without preserving aspect ratio) if necessary such that the element’s bounding box exactly matches the viewport rectangle.

In other words, the viewBox is stretched or shrunk as necssary so that it fills the entire viewport exactly, disregarding the aspect ratio. The graphic may be distorted.

(Note: if <align> is none, then the optional <meetOrSlice> value is ignored.)

xMinYMin
Force uniform scaling.
Align the <min-x> of the element’s viewBox with the smallest X value of the viewport.
Align the <min-y> of the element’s viewBox with the smallest Y value of the viewport.
Think of this as being similar to backrgound-position: 0% 0%;.
xMinYMid
Force uniform scaling.
Align the <min-x> of the element’s viewBox with the smallest X value of the viewport.
Align the midpoint Y value of the element’s viewBox with the midpoint Y value of the viewport.
Think of this as being similar to background-position: 0% 50%;.
xMinYMax
Force uniform scaling.
Align the <min-x> of the element’s viewBox with the smallest X value of the viewport.
Align the <min-y>+<height> of the element’s viewBox with the maximum Y value of the viewport.
Think of this as being similar to backrgound-position: 0% 100%;.
xMidYMin
Force uniform scaling.
Align the midpoint X value of the element’s viewBox with the midpoint X value of the viewport.
Align the <min-y> of the element’s viewBox with the smallest Y value of the viewport.
Think of this as being similar to backrgound-position: 50% 0%;.
xMidYMid (The default value)
Force uniform scaling.
Align the midpoint X value of the element’s viewBox with the midpoint X value of the viewport.
Align the midpoint Y value of the element’s viewBox with the midpoint Y value of the viewport.
Think of this as being similar to backrgound-position: 50% 50%;.
xMidYMax
Force uniform scaling.
Align the midpoint X value of the element’s viewBox with the midpoint X value of the viewport.
Align the <min-y>+<height> of the element’s viewBox with the maximum Y value of the viewport.
Think of this as being similar to backrgound-position: 50% 100%;.
xMaxYMin
Force uniform scaling.
Align the <min-x>+<width> of the element’s viewBox with the maximum X value of the viewport.
Align the <min-y> of the element’s viewBox with the smallest Y value of the viewport.
Think of this as being similar to backrgound-position: 100% 0%;.
xMaxYMid
Force uniform scaling.
Align the <min-x>+<width> of the element’s viewBox with the maximum X value of the viewport.
Align the midpoint Y value of the element’s viewBox with the midpoint Y value of the viewport.
Think of this as being similar to backrgound-position: 100% 50%;.
xMaxYMax
Force uniform scaling.
Align the <min-x>+<width> of the element’s viewBox with the maximum X value of the viewport.
Align the <min-y>+<height> of the element’s viewBox with the maximum Y value of the viewport.
Think of this as being similar to backrgound-position: 100% 100%;.
The <meetOrSlice> parameter is optional and, if provided, is separated from the <align> value by one or more spaces and then must be one of the following strings:
meet (The default value)
Scale the graphic as much as possible while maintaining the following two criteria:
  • aspect ratio is preserved
  • the entire viewBox is visible within the viewport

In this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the viewBox (i.e., the area into which the viewBox will draw will be smaller than the viewport).

You can think of this as being similar to backrgound-size: contain. The background image is scaled as much as possible while preserving its aspect ratio and making sure it fits entirely into the background painting area. If the aspect ratio of the background is not the same as that of the element it is being applied to, parts of the background painting area will not be covered by the background image.

slice
Scale the graphic so that the viewBox covers the entire viewport area, while maintaining its aspect ratio. The viewBox is scaled just enough to cover the viewport area (in both dimensions), but it is not scaled any more than needed to achieve that. In other words, it is scaled to the smallest size such that the width and height of the viewBox can completely cover the viewport.

In this case, if the aspect ratio of the viewBox does not match the viewport, some of the viewBox will extend beyond the bounds of the viewport (i.e., the area into which the viewBox will draw is larger than the viewport).

You can think of this as being similar to background-size: cover. In the case of a background image, the image is scaled while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

Notes