Quand nous utilisons l’élément <svg>, nous créons un fragment constitué de détails multiples, imbriqué dans notre document. Ce fragment a son propre viewport et son propre système de coordonnées, ce qui peut semble compliqué et intimidant lorsqu’on débute avec SVG.

Si vous voulez que votre travail s’affiche correctement, il est utile de comprendre l’espace dans lequel se situe votre SVG, mais cela devient réellement crucial dès lors que vous vous lancez dans un SVG un peu plus complexe, comme les dégradés et les motifs, où les détails sont fortement liés à un système de coordonnées.

Le sujet est riche, mais je donnerai ici les bases, en indiquant l’objectif et le comportement de SVG viewport et viewBox. J’espère que cette introduction vous donnera des fondations solides pour avancer dans vos créations SVG.

👉🏾 NdT : Vous pouvez également consulter l'article de Dudley Storey traduit dans la Cascade "Comprendre SVG viewBox".

Le viewport

Le viewport est la partie visible d’un SVG. Un SVG est par nature extensible, il peut être aussi haut et large que nous le voulons, et nous pouvons également déterminer qu’une partie seulement soit visible.

Le viewport est défini grâce aux attributs height et width à l’intérieur de l’élément <svg>.

Si nous choisissons de ne pas définir de viewport, les dimensions du viewport seront déterminées par tout autre indicateur présent dans le SVG, par exemple la largeur de l’élément SVG contenant. Cependant, si vous laissez cet information non définie, le risque est que votre SVG soit coupé à l’affichage.

De mon point de vue, plus on donne de détails à l’intérieur de SVG, et mieux notre image se comportera sur tous les navigateurs.

preserveAspectRatio

Si le viewport et la viewBox n’ont pas le même ration de hauteur et de largeur, l’attribut preserveAspectRatio indique au navigateur comment afficher l’image (NdT : Voir l'article sur preserveAspectRatio qui fait suite à celui-ci).

Les valeurs de cet attribut sont nombreuses, Mozilla Developer Network les liste clairement.

Si nous ne spécifions pas de valeur, le réglage par défaut impose une mise à l’échelle uniforme et la viewBox entière est visible dans le viewport.

Poire exemple

Prenons une image de poire. Dans ce premier exemple, le viewport et la viewBox sont définis avec des valeurs correspondantes, une width de 155px et une height de 190px. La viewBox est définie de façon à couvrir entièrement l’image de la poire et cette image est définie de façon à entrer dans les limites de son container.

Dans l’exemple ci-dessous, vous pourrez constater en jouant avec Codepen que l’élément <svg> est défini ainsi :

//HTML
...
<svg width="115" height="190" viewBox="0 0 115 190">
...

Les widthet height définissent le viewport.

1 - Dimensions concordantes

voir Dimensions concordantes dans CodePen

2 - viewBox réduite

Si nous réduisons de 50px la hauteur et la largeur de la viewBox de notre image, nous réduisons la dimension de la portion de notre poire que nous souhaitons afficher, mais du coup ce qui reste visible est redimensionné de façon à remplir le container.

voir viewBox réduite dans CodePen

3 - viewport agrandi

Ajoutons maintenant 200px aux width et height de notre viewport. L’image se redimensionne pour correspondre à ces dimensions. La viewBox couvre l’image entière, la poire est entièrement visible. Le viewport contient toute l’image et définit les limites que doit remplir notre poire.

Voici ce que donne notre viewport agrandi :

voir viewport agrandi dans CodePen

4 - Changer les valeurs `min`

À l’intérieur de la viewBox, les valeurs min définissent l’origine de la viewBox dans l’élément parent. En d’autres termes, à quel point, dans la viewBox, nous voulons que commence la correspondance avec le viewport. Dans les exemples qui précèdent, les valeurs min sont définies comme 0, 0 (c’est à dire en haut à gauche). Modifions-les en 50, 30.

voir Changer les valeurs `min` dans CodePen

La viewBox (ce qui sera visible) commence maintenant à 50px sur l’axe des x et à 30px sur celui des y. En changeant ces valeurs, nous avons simplement changé la partie de la poire sur laquelle nous voulons nous concentrer.

Conclusion

Comprendre et mettre en oeuvre un bon système de coordonnées pour SVG est vraiment utile pour créer et afficher vos réalisations graphiques.

Nous avons passé en revue quelques modifications basiques de SVG viewport et viewBox qui je l’espère ont montré toute la puissance et l’utilité d’une bonne définition de l’espace de travail SVG.

👉🏾 Le livre de Joni, “Pocket Guide to Writing SVG” est open source, vous pouvez le télécharger gratuitement ici ou le lire en ligne en suivant le même lien.

Ressources complémentaires en anglais

• SVG Viewport and viewBox, par Jakob Jenkov

Ressources complémentaires en français

• Système de coordonnées, transformations et unités, par Tecfa
• SVG viewport et viewBox (pour les débutants complets), par Kezz Bracey