L'attribut viewBox est l'un des premiers qu'on rencontre quand on débute avec SVG, et potentiellement une grande source de confusion. Bien que largement couvert par d'autres auteurs — la série d'articles de Sara Soueidan pouvant être considérée comme une des sources canoniques sur le sujet — il manquait d'un "guide de départ" donnant les quelques détails nécessaires pour pouvoir se lancer dans les applications basiques du dessin vectoriel. C'est l'objectif de cet article.  NdT : En complément, on pourra également consulter dans La Cascade les articles de Joni Trythall comprendre viewBox et viewPort ainsi que comprendre SVG preserveAspectRatio.

Un canevas infini

L'espace de dessin de SVG est infini : on peut dessiner à partir de n'importe quel point de coordonnées dans un document SVG. Toutefois, pour des raisons d'affichage, le document a généralement une dimension, comme un cadre ou un canevas. C'est ici qu'entre en jeu la viewBox.

On la trouve le plus souvent appliquée ainsi :

<svg viewBox="0 0 200 100">

👉🏾 Remarque : j'ai laissé de côté l'espace de nom pour la simplicité et la clarté des exemples. De plus, le background des exemples SVG sera apparent (en bleu clair) pour mieux montrer leur dimension réelle.

La viewBox utilise 4 valeurs pour localiser deux coordonnées dans l'espace : les coins supérieur gauche et inférieur droit du SVG. Dans le code ci-dessus le coin supérieur gauche est défini comme 0 0 (valeur de x, puis valeur de y), et le coin inférieur droit comme 200 unités vers la droite et 100 unités vers le bas.

Deux points à noter ici :

• Les valeurs utilisées ne comportent pas d'unité de mesure. Il est préférable de ne pas les considérer en pixels, centimètres ou autres, mais simplement comme des unités génériques.
• Même s'il est très courant que le coin supérieur gauche d'un document SVG commence à 0 0, ce n'est pas obligatoire.

Dans la plupart des applications de dessin vectoriel, la viewBox correspond au canevas ou à l'artboard préparé avant que vous ne commenciez à dessiner. Toutefois, de nombreuses applications, dont Adobe Illustrator et Sketch, vont réduire la viewBox à la surface visible autour des éléments que vous aurez dessiné lorsqu'ils les exporteront en SVG. C'est une des raisons pour lesquelles il est important de bien comprendre la viewBox : vous pouvez ajuster le canevas du SVG directement dans le code, sans avoir à vous battre avec le comportement de votre application.

Un élément SVG circle dessiné sans attributs cx ou cy supposera que son centre est à 0 0 dans l'espace de coordonnées. Voyons ce que ça donne lorsque nous utilisons les valeurs viewBox que nous avons utilisées :

<svg viewBox="0 0 200 100">
    <circle r="50">
</svg>

Ce qui produit :

Comme vous pouvez le constater, la viewBox ne détermine pas la taille de l'élément SVG rendu sur la page. Pour cela, il y a les attributs width et height et/ou n'importe quel CSS appliqué à SVG. Par contre, la viewBox détermine le ratio d'aspect de l'espace et la taille relative des éléments qui l'occupent.

👉🏾 Remarquez également la capitale à l'intérieur de viewBox : SVG, qui est un langage de la famille XML, est sensible à la casse, donc l'attribut doit être écrit ainsi, avec un B majuscule, pour être reconnu.

Si la viewBox est réduite, la taille apparente du cercle s'agrandit, relativement au document SVG, même si le rayon du cercle reste inchangé :

<svg viewBox="0 0 100 50">
    <circle r="50">
</svg>

On pourrait voir cela comme un "zoom avant" dans le document. La viewBox nous permet une "mise à l'échelle" à l'intérieur d'un SVG.

Les éléments dessinés à l'extérieur de l'espace de la viewBox sont coupés. Ajoutons un autre élément <circle>, cette fois-ci avec des valeurs cx et cy ainsi qu'une couleur de remplissage (fill).

<svg viewBox="0 0 100 50">
    <circle cx="150" cy="120" r="20" fill="red" />
</svg>

Du fait que l'élément se trouve en dehors des dimensions de la viewBox, on ne peut pas le voir. Le document SVG l'a automatiquement découpé. Changeons cela en modifiant les valeurs de la viewBox :

<svg viewBox="0 0 200 120">
    <circle cx="150" cy="120" r="20" fill="red" />
</svg>

Ce qui nous donne :

Il est important de noter que les éléments SVG découpés en dehors de la viewBox sont toujours présents. Il peuvent être animés et revenir dans la surface visible. Mais par défaut ils ne sont pas visibles.

Il est également possible de faire apparaître des éléments cachés par les dimensions restrictives de la viewBox en appliquant overflow: visible au document SVG via CSS. Cependant, cela n'étendra pas le background SVG (s'il y en a un) de manière à s'adapter à l'élément :

Sauvetage

On peut également donner des valeurs négatives aux coordonnées du coin supérieur gauche de la viewBox. Dans certains scénarios, comme ceux évoqués en début d'article lorsque les éléments SVG sont exportés un peu trop serrés, cela peut s'avérer nécessaire.

Admettons que nous ayons ceci :

<svg viewBox="0 0 500 100">
    <circle cx="50" cy="0" r="50" fill="red" />
</svg>

...qui crée :

Seule la partie inférieure du cercle est visible. Si nous diminuons la composante y du coin supérieur gauche de la viewBox, nous pouvons corriger le problème :

<svg viewBox="0 -40 500 100">
    <circle cx="50" cy="0" r="50" fill="red" />
</svg>

Le résultat :

👉🏾 L'ajout d'un padding à notre élément SVG aura le même effet, mais il n'exposera pas davantage un élément caché par la limite de la viewBox.

Il est important de noter que modifier les valeurs de la viewBox ne changera pas le point d'origine du SVG globalement. Autrement dit, un cercle dessiné avec son centre à 0 0 sera complètement visible si le coin supérieur gauche est suffisamment déplacé vers l'extérieur. Le point d'origine, lui, n'est pas modifié.

Conclusion

Il y a bien d'autres choses à dire sur viewBox, mais cet article et les liens suggérés ci-dessous devraient vous suffire pour vous lancer dans SVG en toute confiance. Bon courage !

👉🏾 NdT : vous pouvez également consulter ici l'article de Joni Trythall Comprendre SVG viewBox et viewport