How To Specify Alignment For PreserveAspectRatio In SVG

As given on the examples of previous post about creating viewport in SVG, the aspect ratio, or ratio of width to height, of the viewport and the viewBox were same. In some cases, typically when using the viewBox attribute, it is desirable that the graphics stretch to fit non-uniformly to take up the entire viewport. In other cases, it is desirable that uniform scaling be used for the purposes of preserving the aspect ratio of the graphics.

The preserveAspectRatio attribute lets you specify the alignment of the scaled image with respect to the viewport, and whether you want it to meet the edges or be sliced off.The syntax for this attribute is as follows.

preserveAspectRatio=<alignment> [meet | slice]

where alignment specifies the axis and location, and is one of xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid, or xMaxYMax.

For ‘image’ elements, preserveAspectRatio indicates how referenced images should be fitted with respect to the reference rectangle and whether the aspect ratio of the referenced image should be preserved with respect to the current user coordinate system.

Following are the methods to specify alignment for PreserveAspectRatio in SVG.

Table of Contents

Using <align> parameter

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. The <align> parameter must be one of the following strings.

xMinYMin

Align minimum x of viewBox with left corner of viewport and align minimum y of viewBox with top edge of viewport.

xMidYMin

Align midpoint x value of viewBox with midpoint x value of viewport and align minimum y of viewBox with top edge of viewport.

xMaxYMin

Align maximum x value of viewBox with right corner of viewport and align minimum y of viewBox with top edge of viewport.

xMinYMid

Align minimum x of viewBox with left corner of viewport and align midpoint y value of viewBox with midpoint y value of viewport.

xMidYMid

Align midpoint x value of viewBox with midpoint x value of viewport align midpoint y value of viewBox with midpoint y value of viewport.

xMaxYMid

Align maximum x value of viewBox with right corner of viewport and align midpoint y value of viewBox with midpoint y value of viewport.

xMinYMax

Align minimum x of viewBox with left corner of viewport align maximum y value of viewBox with bottom edge of viewport.

xMidYMax

Align midpoint x value of viewBox with midpoint x value of viewport and align maximum y value of viewBox with bottom edge of viewport.

xMaxYMax

Align maximum x value of viewBox with right corner of viewport and align maximum y value of viewBox with bottom edge of viewport.

Using the meet Specifier

The meet or slice specifier are optional and, if the value of them provided, is separated from the <align> value by one or more spaces.

The meet specifier is the default specifier which scales the graphic, where aspect ratio is preserved. With this option, the entire viewBox is visible within the viewport and the viewBox is scaled up as much as possible, while still meeting the other criteria.

Following is an example to show the effects of using the meet specifier along with align parameter for tall and wide viewports.

<!– tall viewports –>
<svg viewBox=”0 0 200 200″ width=”300″ height=”200″>
<g transform=”translate(0,10)”>
<text transform=”translate(-10,0)”>xMinYMin</text>
<rect width=”50″ height=”180″ stroke=”blue” fill=”none”></rect>
<svg preserveAspectRatio=”xMinYMin meet” viewBox=”0 0 90 90″ width=”50″ height=”180″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″/>
</svg>
</g>
<g transform=”translate(80,10)”>
<text transform=”translate(-11,0)”>xMidYMid</text>
<rect width=”50″ height=”180″ stroke=”blue” fill=”none”></rect>
<svg preserveAspectRatio=”xMidYMid meet” viewBox=”0 0 90 90″
width=”50″ height=”180″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″/>
</svg></g>
<g transform=”translate(160,10)”>
<text transform=”translate(-12,0)”>xMaxYMax</text>
<rect width=”50″ height=”180″ stroke=”blue” fill=”none”></rect>
<svg preserveAspectRatio=”xMaxYMax meet” viewBox=”0 0 90 90″
width=”50″ height=”180″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″/>
</svg></g>
</svg>
<!– wide viewports –>
<svg viewBox=”0 0 200 200″ width=”200″ height=”200″>
<g transform=”translate(0,10)”>
<rect width=”200″ height=”50″ stroke=”blue” fill=”none”></rect>
<text transform=”translate(60,0)”>xMinYMin</text>
<svg preserveAspectRatio=”xMinYMin meet” viewBox=”0 0 90 90″ width=”200″ height=”50″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″/>
</svg>
</g>
<g transform=”translate(0,75)”>
<rect width=”200″ height=”50″ stroke=”blue” fill=”none”></rect>
<text transform=”translate(60,0)”>xMidYMid</text>
<svg preserveAspectRatio=”xMidYMid meet” viewBox=”0 0 90 90″
width=”200″ height=”50″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″/>
</svg></g>
<g transform=”translate(0,140)”>
<rect width=”200″ height=”50″ stroke=”blue” fill=”none”></rect>
<text transform=”translate(60,0)”>xMaxYMax</text>
<svg preserveAspectRatio=”xMaxYMax meet” viewBox=”0 0 90 90″
width=”200″ height=”50″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″/>
</svg></g>
</svg>

xMinYMin

xMidYMid

xMaxYMax

xMinYMin

xMidYMid

xMaxYMax

Using the slice Specifier

Another option can be provided in preserveAspectRatio is slice which scales the graphic where aspect ratio is preserved and the entire viewport is covered by the viewBox. With the slice Specifier, the viewBox is scaled down as much as possible, while still meeting the other criteria.

Following is an example to show the effects of using the slice specifier along with align parameter for tall and wide viewports.

<!– Tall viewports –>
<svg viewBox=”0 0 200 200″ width=”300″ height=”200″>
<g transform=”translate(0,10)”>
<text transform=”translate(-10,0)”>xMinYMin</text>
<rect width=”50″ height=”180″ stroke=”blue” fill=”none”></rect>
<svg preserveAspectRatio=”xMinYMin slice” viewBox=”0 0 90 90″ width=”50″ height=”180″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″/>
</svg>
</g>
<g transform=”translate(70,10)”>
<text transform=”translate(-11,0)”>xMidYMid</text>
<rect width=”50″ height=”180″ stroke=”blue” fill=”none”></rect>
<svg preserveAspectRatio=”xMidYMid slice” viewBox=”0 0 90 90″
width=”50″ height=”180″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″/>
</svg></g>
<g transform=”translate(140,10)”>
<text transform=”translate(-12,0)”>xMaxYMax</text>
<rect width=”50″ height=”180″ stroke=”blue” fill=”none”></rect>
<svg preserveAspectRatio=”xMaxYMax slice” viewBox=”0 0 90 90″
width=”50″ height=”180″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″/>
</svg></g>
</svg>
<!–Wide Viewports–>
<svg viewBox=”0 0 200 200″ width=”200″ height=”200″>
<g transform=”translate(0,10)”>
<rect width=”200″ height=”50″ stroke=”blue” fill=”none”></rect>
<text transform=”translate(60,0)”>xMinYMin</text>
<svg preserveAspectRatio=”xMinYMin slice” viewBox=”0 0 90 90″ width=”200″ height=”50″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″/>
</svg>
</g>
<g transform=”translate(0,75)”>
<rect width=”200″ height=”50″ stroke=”blue” fill=”none”></rect>
<text transform=”translate(60,0)”>xMidYMid</text>
<svg preserveAspectRatio=”xMidYMid slice” viewBox=”0 0 90 90″
width=”200″ height=”50″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″/>
</svg></g>
<g transform=”translate(0,140)”>
<rect width=”200″ height=”50″ stroke=”blue” fill=”none”></rect>
<text transform=”translate(60,0)”>xMaxYMax</text>
<svg preserveAspectRatio=”xMaxYMax slice” viewBox=”0 0 90 90″
width=”200″ height=”50″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″ />
</svg></g>
</svg>

xMinYMin

xMidYMid

xMaxYMax

xMinYMin

xMidYMid

xMaxYMax

Using the none Specifier

There is an another option for scaling a graphic when the viewBox and viewPort don’t have the same aspect ratio. If you specify preserve-AspectRatio=”none”, then the graphic will be scaled non-uniformly so that its user coordinates fit the viewport.

Following is an example to show the effects of using none specifier for tall and wide viewports.

<!–Tall Viewport–>
<svg viewBox=”0 0 100 200″ width=”120″ height=”200″>
<g transform=”translate(20,15)”>
<text transform=”translate(-5,0)”>Tall Viewport</text>
<rect width=”80″ height=”180″ stroke=”blue” fill=”none”></rect>
<svg preserveAspectRatio=”none” viewBox=”0 0 90 90″ width=”80″ height=”180″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″ />
</svg>
</g>
</svg>
<!–Wide Viewport–>
<svg viewBox=”0 0 200 100″ width=”200″ height=”100″>
<g transform=”translate(0,15)”>
<text transform=”translate(30,0)”>Wide Viewport</text>
<rect width=”180″ height=”80″ stroke=”blue” fill=”none”></rect>
<svg preserveAspectRatio=”none” viewBox=”0 0 90 90″ width=”180″ height=”80″>
<polygon fill=”red” stroke=”brown” points=”45,2 2,45 45,88 88,45″ />
</svg>
</g>
</svg>