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:
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: