The preserveAspectRatio attribute on an <svg> tag specifies that the svg is scaled uniformly in both the x and y direction.
This only works if the viewBox attribute is present.
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>
The preserveAspectRatio attribute specifies if the SVG should be scaled uniformly.
This attribute only works if the viewBox attribute is also present.
<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.
| 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.
|
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 |
Back to <svg>
