SVG : Comprendre le système de coordonnées

Pas de surprise, c’est l’exemple de base, le viewbox est précisé et fait les mêmes dimensions que le viewport. Le rond bleu a bien un diamètre de 100, et le rond rose n’est pas visible.

Cette fois le viewbox représente deux fois le viewport. Il en résulte donc une surface d’affichage deux fois fois plus large, mais toujours dans le même viewport. L’échelle est donc inférieure, ici 1:2, les cercles apparaissent deux fois plus petits, et le rose est cette fois visible.

Cette fois-ci, le viewbox est inférieur au viewport. L’échelle est aussi modifiée à 3:2, le rond bleu prend cette fois toute la place disponible, soit un diamètre de 100 * 3 / 2 = 150, ce qui correspond bien aux largeur et hauteur du viewport.

L’échelle sur l’axe x n’est pas modifiée, puisque la largeur du viewbox est la même que celle du viewport.
Ce qui est intéressant ici, c’est que l’échelle sur l’axe y n’est pas modifiée non plus, puisque le rond n’est pas écrasé. Le ratio est préservé. Nous verrons plus tard que l’attribut **preserveAspectRatio** ermet de jouer avec cela.
Une dernière chose bien visible est que le viewport se retrouve centré verticalement dans le viewport. PreserveAspectRatio aura à nouveau son mot à dire sur cette caractéristique.

Sur cet exemple, l’échelle a été modifiée, puisque ni la largeur, ni la hauteur du viewbox ne correspondait au viewport. Par contre, le ratio entre l’axe x et y reste le même, le rond n’est toujours pas déformé, et on peut se rendre compte que cette fois, le viewbox est centré horizontalement dans le viewport.

Préciser une valeur autre que 0 à min-x et min-y entraine un décalage du viewbox. Plus précisément, une **translation** (**translate**) va faire concorder les coordonnées x = 50 et y = -50 du viewbox avec le point d’origine du viewport. Dans notre exemple, il en résulte donc un translate(-50, 50).
À noter que sur cet exemple, le viewbox est identique au viewport, et seule une translation est effectuée.

Dans ce cas, et comme déjà vu un peu plus haut, la zone d’affichage est deux fois plus grande, vu que l’échelle est devenue plus petite. La translation est également là, mais paraît deux fois moins importante. Visuellement, c’est le cas.
Ce qui se passe, c’est que l’échelle est modifiée en premier, et la translation s’effectue sur cette nouvelle échelle. Visuellement, on voit bien un décalage de 25 pixels correspondant aux informations renseignées dans l’attribut viewbox.

Pour ce dernier exemple, je vais cumuler ce que l’on a vu jusqu’à maintenant. La hauteur du viewbox est deux fois celle du viewport, donc l’échelle est inférieure. En revanche, la largeur du viewbox est la même que celle du viewport, et comme l’attribut preserveAspectRatio n’est pas précisé, le ratio entre l’axe x et l’axe y est préservé. Le viewbox fait donc visuellement 75 pixels de large et est centré dans le viewport. Ensuite, il y a une translation de 75 sur l’échelle du viewbox, soit visuellement de 37,5. Le point d’origine de la viewbox se retrouve donc maintenant confondu avec celui du viewport

none est la seule valeur un peu spéciale. Dans cet unique cas, le ratio n’est pas préservé et le viewbox vient s’inscrire parfaitement dans le viewport, au risque de déformer les dessins.
À noter que dans ce cas, la valeur de <meetOrSlice> n’est pas prise en compte.

Dans cet exemple, nous avons défini un viewbox deux fois plus large que haut. Sans preserveAspectRatio, le viewbox serait centré verticalement dans le viewport, comme on l’a vu précédemment. Mais ici, en précisant comme valeur d’alignement xMinYMin, on force l’alignement du viewbox en haut à gauche.
À noter que les valeurs xMidYMin et xMaxYMin auraient le même résultat visuellement, puisque le viewbox prend toute la valeur du viewport.

Cette fois, c’est la hauteur qui est supérieure à la largeur. On pourrait s’attendre à ce que le viewbox soit centré horizontalement, mais la valeur xMaxYMin va l’aligner à droite.
De la même façon, xMaxYMid et xMaxYMax ont le même résultat visuel.

En reprenant l’exemple précédent, mais en précisant un preserveAspectRatio à xMidYMax, le viewbox est centré horizontalement. xMidYMin et xMidYMid produiront le même effet.
Sur ce cas, on pourrait bien sûr carrément enlever l’attribut, car comme vu sur les exemples de la partie viewbox, avoir ce dernier centré est le comportement par défaut.

Dans ce cas, le viewbox est plus long que le viewport, et le paramètre xMinYMin permet d’aligner à gauche le viewbox.
Cette fois, c’est xMinYMid et xMinYMax qui ont le même comportement.

xMaxYMin permet, à l’inverse de l’exemple précédent, d’aligner à droite le viewbox dans le viewport.
xMaxYMid et xMaxYMax auront le même comportement.

Troisième cas de figure, xMidYMin va permettre de centrer le viewbox horizontalement, car celui-ci est plus long que le viewport.
De la même façon, xMidYMid et xMidYMax auront visuellement le même résultat.

Dernier exemple : cette fois, le viewbox a une hauteur supérieure au viewport.
Pas besoin de reprendre tous les cas de figure possibles, c’est la deuxième partie du paramètre <align> qui sera pris en compte.
xMidYMid va donc permettre de centrer verticalement le viewbox dans le viewport.