J’ai écrit dernièrement un article sur Comprendre SVG viewport et viewBox et je me suis dit que celui-ci ferait une suite idéale pour approfondir le sujet.

Comprendre l’espace de travail SVG est parfois compliqué. La qualité de notre SVG dépend fortement du système de coordonnées que nous aurons défini.

Résumé de viewport et viewBox

La largeur width et la hauteur height de notre SVG établissent la surface visible (le viewport). Si nous définissons une viewBox, nous pouvons spécifier la façon dont notre élément graphique peut s’étendre pour remplir un container (habituellement le viewport). Lorsque les valeurs de chacun des deux sont identiques, l’image est visible dans son entièreté et se redimensionne lorsque la taille du viewport est modifiée. C’est magnifique.

Si la viewBox SVG et le viewport n’ont pas le même ratio largeur et hauteur, preserveAspectRatio indique si l’on doit ou non forcer un redimensionnement uniforme.

Dans les exemples qui suivent, nous allons passer des poires aux cerises et nous verrons l’effet que les diverses valeurs de preserveAspectRatio auront sur le rendu visuel. Dans ce premier exemple, les cerises sont définies de façon à se redimensionner uniformément grâce à des valeurs de viewport et de viewBox identiques.

voir viewport et viewBox dans CodePen

Valeurs de preserveAspectRatio

preserveAspectRatio accepte deux paramètres, <align> et <meetOrSlice>. Le premier paramètre comporte deux parties et régit l’alignement de la viewBox à l’intérieur du viewport. Le second paramètre est optionnel et indique la façon dont le ratio d’aspect doit être préservé.

preserveAspectRatio=“xMaxYMax meet”

Ces valeurs vont aligner le coin inférieur droit de la viewBox avec le coin inférieur droit du viewport. La valeur meet préserve le ratio d’aspect en redimensionnant la viewBox de façon à ce qu’elle s’adapte autant que possible au viewport.

Il existe trois options <meetOrSlice> : meet (par défaut), slice et none. La première option meet assure une complète visibilité du graphique (autant que possible), alors que slice essaie de remplir le viewport avec la viewBox et découpe (slice off) tout ce qui dépasse. La troisième option none a pour résultat la perte du ratio d’aspect et donc une image potentiellement déformée.

Vous pourrez trouver une liste complète des combinaisons de valeurs et leur description sur W3C.

Ratio d’aspect et cerises

La valeur la plus simple est none, elle établit qu’aucun redimensionnement uniforme ne doit être appliqué. Si nous augmentons les valeurs en pixel du viewport, les cerises vont s’étirer de manière non uniforme et seront déformées (et pas très appétissantes...)

voir Ratio d’aspect dans CodePen

Valeurs Min, Max et Mid modifiées

Jetons un coup d’oeil à ce que donnent les différentes combinaisons.

voir preserveAspectRatio à xMinYMax dans CodePen

Le preserveAspectRatio est fixé à xMinYMax ce qui aligne le coin inférieur gauche de la viewBox au coin inférieur gauche du viewport, qui est maintenant visualisé par son contour. meet assure que l’image est redimensionnée de façon à entrer dans le viewport autant que possible.

Si on change xMin en xMax ou en xMid, les cerises seront positionnées à droite ou au centre du viewport.

Voici ce qui se passe si nous changeons meet en slice :

voir meet en slice dans CodePen

Les cerises ne sont plus forcées de rester à l’intérieur du viewport, et l’excédent graphique est éliminé : tout le contenu de la viewBox qui n’entre pas dans le viewport est supprimé.

Les valeurs d’alignement ne sont pas obligées d’être liées.

voir preserveAspectRatio à xMinYMid slice dans CodePen

L’exemple ci-dessus a un preserveAspectRatio égal à xMinYMid slice. Nous voyons maintenant les cerises alignées sur le milieu de l’axe des y du viewport.

👉🏾 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