preserveAspectRatio

« SVG Attribute reference home

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.

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.

<meetOrSlice>

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) - Scale the graphic such that:
  • aspect ratio is preserved
  • the entire viewBox is visible within the viewport
  • the viewBox is scaled up as much as possible, while still meeting the other criteria
  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).
• slice - Scale the graphic such that:
  • aspect ratio is preserved
  • the entire viewport is covered by the viewBox
  • the viewBox is scaled down as much as possible, while still meeting the other criteria
  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).

Example

Elements

The following elements can use the preserveAspectRatio attribute

• <svg>
• <symbol>
• <image>
• <feImage>
• <marker>
• <pattern>
• <view>