SVG The SVG element preserveAspectRatio


Example

preserveAspectRatio is an attribute that indicates whether the image should be scaled uniformly. This attribute only works if the <svg> element also has a viewBox.

The default value is xMidYMid, which maintains the aspect ratio and centers the path inside the SVG container:

<!-- when not included `preserveAspectRatio` defaults to `xMidYMid` -->
<svg viewBox="0 0 16 16" height="60" width="120">
    <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" />
</svg>

star that is centered within the container

When preserveAspectRatio is set to none, the icon stretches to fit the box:

<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" />
</svg>

star that has been stretched

There are many other values for preserveAspectRatio, but these two are by far the most common.