SVG
L'élément SVG

viewBox

L'attribut viewBox définit le système de coordonnées d'un élément <svg> . Cela vous permet de modifier facilement la taille et la proportion relative d'un graphique SVG sans avoir à ajuster la position et les dimensions de chaque élément dessiné.

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

Ce code ressemble à ceci:

Sans le viewBox, cela ressemble à ceci:

Conserver les proportions

preserveAspectRatio est un attribut qui indique si l'image doit être mise à l'échelle uniformément. Cet attribut ne fonctionne que si l'élément <svg> possède également une viewBox .

La valeur par défaut est xMidYMid , qui conserve les proportions et centre le chemin dans le conteneur 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>

Lorsque preserveAspectRatio est défini sur none , l'icône s'étire pour s'adapter à la boîte:

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

Il existe de nombreuses autres valeurs pour preserveAspectRatio , mais ces deux valeurs sont de loin les plus courantes.

preserveAspectRatio - Attributs de rencontre et de découpe

L'attribut preserveAspectRatio a un paramètre facultatif: meet | slice Le comportement par défaut est meet qui étend le contenu à la fois dans la dimension x et y jusqu'à ce qu'il remplisse la largeur ou hauteur de la viewBox. La variante - slice conserve le rapport d'aspect du contenu mais transforme le graphique jusqu'à ce qu'il remplisse à la fois la largeur et la hauteur de la zone de visualisation (en écrêtant le contenu qui déborde de la zone de visualisation).

Ceci est l'exemple en utilisant 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" />

qui rend comme:

et le même exemple en utilisant 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>

qui rend comme: