SVG
L'elemento SVG

viewBox

L'attributo viewBox definisce il sistema di coordinate per un elemento <svg> . Ciò consente di modificare facilmente la dimensione e la proporzione relativa di un grafico SVG senza dover regolare la posizione e le dimensioni di ogni singolo elemento disegnato.

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

Il codice è simile a questo:

Senza il viewBox, assomiglia a questo:

preserveAspectRatio

preserveAspectRatio è un attributo che indica se l'immagine deve essere ridimensionata in modo uniforme. Questo attributo funziona solo se l'elemento <svg> ha anche un viewBox .

Il valore predefinito è xMidYMid , che mantiene le proporzioni e centra il percorso all'interno del contenitore 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>

Quando preserveAspectRatio è impostato su none , l'icona si allunga per adattarsi alla casella:

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

Esistono molti altri valori per preserveAspectRatio , ma questi due sono di gran lunga i più comuni.

preserveAspectRatio: incontra e affetta gli attributi

L'attributo preserveAspectRatio ha un parametro facoltativo: meet | slice . Il comportamento predefinito è meet che si estende il contenuto sia nella dimensione xe y fino a riempire la larghezza o altezza della viewBox. L'alternativa - slice di mantenere le proporzioni del contenuto, ma ridimensiona il grafico finché riempie sia la larghezza e l'altezza del viewBox (clipping il contenuto che trabocca il viewBox).

Questo è l'esempio che usa 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" />

che esegue il rendering come:

e lo stesso esempio 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>

che esegue il rendering come: