Latest Posts
InfoTechSite
Web Designing Tutorials Collection

Preserve Aspect Ratio in SVG: 4 Ways to Specify The Alignment

Pinterest LinkedIn Tumblr Reddit WhatsApp
As given in the examples of the previous post about creating a viewport in SVG, the aspect ratio, or ratio of width to height, of the viewport and the viewBox were the same. In some cases, typically when using the viewBox attribute, the graphics should stretch to fit non-uniformly to take up the entire viewport. In other cases, it is desirable that uniform scaling be used to preserve the aspect ratio of the graphics.The preserve aspect ratio in SVG (preserveAspectRatio attribute) lets you specify the alignment of the scaled image concerning 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 concerning the reference rectangle and whether the aspect ratio of the referenced image should be preserved concerning the current user coordinate system.

The following are the methods to specify alignment for Preserve Aspect Ratio in SVG.

1. 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 viewport aspect ratio. The <align> parameter must be one of the following strings.xMinYMin

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

xMidYMin

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

xMaxYMin

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

xMinYMid

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

xMidYMid

Align the midpoint x value of the viewBox with the midpoint x value of the viewport, and align the midpoint y value of the viewBox with the midpoint y value of the viewport.

xMaxYMid

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

xMinYMax

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

xMidYMax

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

xMaxYMax

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

2. Using the meet Specifier

The meet or slice specifiers 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 and scales the graphic where the 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.

The following is an example to show the effects of using the meet specifier along with the 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>

3. Using the slice Specifier

Another option can be provided in preserveAspectRatio as slice, which scales the graphic where the 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.The following is an example to show the effects of using the slice specifier along with the 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>

4. Using the none Specifier

There is 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.The following is an example to show the effects of using a 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>

Read Next:  How to Transform SVG Elements

Author

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 12 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Related Posts

Write A Comment

Pin It

Protected by Security by CleanTalk and CleanTalk Anti-Spam