Comprendre SVG preserveAspectRatio

Après SVG viewport et viewBox, Joni Trythall présente le complément logique, l'attribut preserveAspectRatio. Là aussi, les choses sont d'abord un peu complexes, mais présentées par Joni elles deviennent très claires.

Par

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.

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

See the Pen qOwQgd by Pierre Choffe (@pierrechoffe) on CodePen.

Valeurs Min, Max et Mid modifiées

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

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

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

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