Comprendre SVG viewBox et viewport

SVG viewport et viewBox peuvent sembler compliqués et intimidants lorsqu’on débute avec SVG. Joni Trythall décortique tout cela dans un langage simple et clair, excellente introduction agrémentée d'illustrations fruitées.

Par

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.

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

See the Pen RWOeLO by Pierre Choffe (@pierrechoffe) on 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.

See the Pen RWOexO by Pierre Choffe (@pierrechoffe) on 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 :

See the Pen LpvgQg by Pierre Choffe (@pierrechoffe) on 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.

See the Pen XmQxEV by Pierre Choffe (@pierrechoffe) on 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 télécharger gratuitement ici ou le lire en ligne en suivant le même lien.


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

Tous les articles sur SVG parus dans la Cascade.

Du même auteur, dans la Cascade :


Ressources complémentaires en anglais

Ressources complémentaires en français


original paru le dans le blog de Joni Trythall.

Sur l’auteur : apprend le design de jour et l'oublie la nuit venue. Elle passe son temps à essayer de conjuguer son amour du code et son obsession de la couleur. Joni habite à Seattle, WA, où le soleil brille toujours. Vous pouvez retrouver ses divagations sur son blog, Google+ ou Twitter.

Traduit avec l'aimable autorisation de l'auteur.
Copyright Joni Trythall © 2014.