SVG
El elemento SVG

viewBox

El atributo viewBox define el sistema de coordenadas para un elemento <svg> . Esto le permite cambiar fácilmente el tamaño y la proporción relativa de un gráfico SVG sin tener que ajustar la posición y las dimensiones de cada elemento dibujado individual.

<!-- stretches a small icon to 60px square -->
<svg viewBox="0 0 16 16" height="60px" width="60px">
    <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>

Ese código se ve así:

Sin el viewBox, se ve así:

preservar la relación de aspecto

preserveAspectRatio es un atributo que indica si la imagen debe escalarse uniformemente. Este atributo solo funciona si el elemento <svg> también tiene un viewBox .

El valor predeterminado es xMidYMid , que mantiene la relación de aspecto y centra la ruta dentro del contenedor SVG:

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

Cuando preserveAspectRatio se establece en none , el icono se estira para ajustarse a la caja:

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

Hay muchos otros valores para preserveAspectRatio , pero estos dos son, con mucho, los más comunes.

preserveAspectRatio - cumplir y cortar atributos

El atributo preserveAspectRatio tiene un parámetro opcional: meet | slice El comportamiento predeterminado es meet que se extiende el contenido tanto en la x y la dimensión Y hasta que llena la anchura o altura de la viewBox. El slice alternativo conserva la relación de aspecto del contenido, pero amplía el gráfico hasta que llena tanto el ancho como el alto del cuadro de vista (recortar el contenido que desborda el viewBox).

Este es el ejemplo usando 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" />

que se traduce como:

y el mismo ejemplo usando 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>

que se traduce como: