HTML <svg> preserveAspectRatio Attribute

The preserveAspectRatio attribute on an <svg> tag specifies that the svg is scaled uniformly in both the x and y direction.

Example

#

A preserveAspectRatio attribute on an <svg> image.
This svg does not scale proportionally and is vertically compressed.

<svg viewBox="0 0 16 16" height="60" width="120" preserveAspectRatio="none">
  <path d="M16 6.216l-6.095-.02L7.98.38 6.095 
    6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 
    4.932 3.59-1.904-5.815L16 6.215" fill="orangered"/>
</svg>

Using preserveAspectRatio

The preserveAspectRatio attribute specifies if the SVG should be scaled uniformly.

This attribute only works if the viewBox attribute is also present.


Syntax

<svg viewBox="min-x min-y width height"
     preserveAspectRatio = "none | xMinYMin | xMidYMin | xMaxYMin | 
                            xMinYMid | xMidYMid | xMaxYMid | 
                            xMinYMax | xMidYMax | xMaxYMax">

Note:  The viewBox attribute must be present.

Values

#

Value Description
none Does not force uniform scaling.
xMinYMin Aligns the min-x of the SVG viewBox with the smallest X value of the viewport.
Aligns the min-y of the SVG viewBox with the smallest Y value of the viewport.
xMidYMin Aligns the midpoint X value of the SVG viewBox with the midpoint X value of the viewport.
It is used to set the height of preserveAspectRatio.
Aligns the min-y of the SVG viewBox with the smallest Y value of the viewport.
xMaxYMin Aligns the min-x+<width> of the SVG viewBox with the maximum X value of the viewport.
Aligns the min-y of the SVG viewBox with the smallest Y value of the viewport.
xMinYMid Aligns the min-x of the SVG viewBox with the smallest X value of the viewport.
Aligns the midpoint Y value of the SVG viewBox with the midpoint Y value of the viewport.
xMidYMid Aligns the midpoint X value of the SVG viewBox with the midpoint X value of the viewport.
Aligns the midpoint Y value of the SVG viewBox with the midpoint Y value of the viewport.
This is default.
xMaxYMid Aligns the min-x+<width> of the SVG viewBox with the maximum X value of the viewport.
Aligns the midpoint Y value of the SVG viewBox with the midpoint Y value of the viewport.
xMinYMax Aligns the min-x of the SVG viewBox with the smallest X value of the viewport.
Aligns the min-y+<height> of the SVG viewBox with the maximum Y value of the viewport.
xMidYMax Aligns the midpoint X value of the SVG viewBox with the midpoint X value of the viewport.
Aligns the min-y+<height> of the SVG viewBox with the maximum Y value of the viewport.
xMaxYMax Aligns the min-x+<width> of the SVG viewBox with the maximum X value of the viewport.
Aligns the min-y+<height> of the SVG viewBox with the maximum Y value of the viewport.

Browser support

Here is when preserveAspectRatio support started for each browser:

Chrome
4.0 Jan 2010
Firefox
3.0 Jun 2008
IE/Edge
9.0 Mar 2011
Opera
10.1 Jun 2010
Safari
3.2 Nov 2008

You may also like

 Back to <svg>
Guides