Preserve the Aspect Ratio of an SVG

I wondered how to make hard 45 degree corners, and then I spent hours traveling the depths of this rabbit hole. 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.

Attribute preserveAspectRatio indicates whether or not to force uniform scaling.

For all elements that support that attribute (see above), except for the <image> element, preserveAspectRatio only applies when a value has been provided for viewBox on the same element. For these elements, if attribute viewBox is not provided, then preserveAspectRatio is ignored.

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.

Take, for instance, the SVG used to create the “angled corners” at the top of a content area.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1400 40" preserveAspectRatio="xMinYMax" width="100%" class="contentpoly">
    <polygon transform="scale(1)" class="polybg" points="0,40 40,0 300,0 320,20 1180,20 1200,40 0,40"/>
</svg>

By setting the property preserveAspectRatio=“xMinYMax” I ensure that the SVG will scale. xMin means that it will be pinned to the left, and YMax means it will be pinned to the bottom. In this way I’m able to keep the 45 degree angles accurate AND keep the SVG snuggly pinned up against the square container below it.

Conversely, the SVG used to create the “angled corners” at the bottom of a content area.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 40" preserveAspectRatio="xMinYMin" width="100%" class="contentpoly">
    <polygon transform="scale(1)" class="polybg" points="0,0 1600,0 1560,40 700,40 680,20 20,20 0,0"/>
</svg>

Here is set the property preserveAspectRatio=”xMinYMin” I ensure the scaling of the SVG will maintain its aspect. However, in this case xMin means I pin to the left, and YMin means I pin to the top.

Usage context<align>

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:

  • none
    Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element’s bounding box exactly matches the viewport rectangle.
    (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.
  • 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.
  • 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.
  • 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.
  • xMidYMid (the default) – 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.
  • 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.
  • 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.
  • 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.
  • 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.

12
Mar
2017

Leave a Reply

Your email address will not be published.
*