SVG The SVG element preserveAspectRatio - meet and slice attributes


Example

The preserveAspectRatio attribute has an optional parameter: meet | slice. The default behavior is meet which stretches the content in both the x and y dimension until it fills either the width or height of the viewBox. The alternative - slice preserves the aspect ratio of the content but scales up the graphic until it fills both the width and height of the viewbox (clipping the content that overflows the viewBox).

This is the example using slice

<svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin slice">
<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" />

which renders as:

enter image description here

and the same example using meet

    <svg viewBox="0 0 16 16" height="60px" width="120px" preserveAspectRatio="xMinYMin meet">
    <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>

which renders as:

enter image description here