L'attribut viewBox est l'un des premiers qu'on rencontre quand on débute avec SVG, et potentiellement une grande source de confusion. Cet article de Dudley Storey vous épargnera bien des soucis.

Par

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 :

L'élément caché réapparaît

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 !


Intéressé par SVG ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur les bases de SVG parus dans la Cascade.
Tous les articles sur SVG parus dans la Cascade.


Du même auteur dans La Cascade :

Backgrounds SVG : hexagones et écailles
Motifs SVG maoris
Les bases de SVG : Groupes
Bien utiliser l’attribut alt
Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5

Articles sur les mêmes thèmes dans la Cascade

comprendre viewBox et viewPort par Joni Trythall
comprendre SVG preserveAspectRatio par Joni Trythall


Ressources complémentaires en anglais

Articles sur SVG de Sara Soueidan.
Practical SVG, par Chris Coyier (en attendant la traduction par Eyrolles)

Ressources complémentaires en français

Tutoriel SVG par MDN
Tutoriel SVG par Alsacréations


Article original paru le 29 octobre 2016 dans the new code
Traduit avec l’aimable autorisation de the new code et de l’auteur.
Copyright the new code © 2016
.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog the new code des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.