Le viewport est la zone d'affichage visible d'une illustration SVG.
Le viewport est défini grâce aux propriétés height et width de l’élément racine <svg>.
Le viewport est la fenêtre d'affichage ouverte sur le svg. Seule une partie de l'illustration est visible à travers cette fenêtre.
Le viewBox est la zone de travail de l'ensemble de l'illustration SVG.
Créer un élément svg et ajouter un cercle de rayon 30px dont le centre est situé à 330px à gauche et à 180px du haut.
<svg>
<circle cx="330" cy="180" r="30" fill="#3ed124">
</svg>Que se passe-t-il ?
Le cercle n’est pas visible car il est en dehors du viewport.
Le viewport par défaut d'un élément svg est de 300px / 150px.
Changer le viewport de l’élément svg en 360px de large et 210px de haut en utilisant les attributs width et height de l'élément <svg>.
<svg width="360" height="210">La taille de SVG est agrandie, le cercle est maintenant visible.
Une illustration SVG peut logiquement être aussi large et haute que vous le souhaitez. Mais comment redimensionner la taille de l'image resultante dans la page html sans masquer les éléments en dehors du viewport ?
Pour cela nous allons définir la taille du plan de travail, le navigateur se charge ensuite de mettre à l'échelle l'illustration pour que le plan de travail corresponde à la fenêtre d'affichage.
Définir un plan de travail très large de 3000px / 2000px. Tracer un cercle de rayon 200 à 2500px/1500px. Régler la fenêtre d'affichage sur 150px/100px.
Le viewbox est défini par 4 nombres, les coordonnées de l'origine sa largeur et sa hauteur qui marquent les limites de la zone de travail.
<svg width="150" height="100" viewbox="0 0 3000 2000">
<circle cx="2500" cy="1500" r="200" fill="#3ed124" />
</svg>L'illustration est mise à l'échelle (zoom) pour faire correspondre le viewport avec le viewbox. Dans ce cas, la mise à l'échelle est de 150/3000 soit 1/20. L'image est enfin réduite mais sans perdre les éléments de l'illustration.
Que se passe-t-il maintenant si la proportion hauteur/largeur du viewport ne correspond pas à la proportion du viewbox ? L'image est-elle déformée ?
Créer une illustration de 3000/2000.
Afficher l'illustration dans une image (viewport) de taille 450/60
Premières constations :
L'illustration est mise à l'échelle au plus petit ratio pour que l'ensemble du viewbox soit contenu dans le viewport. L'illustration est centrée dans le viewport sans déformation. Des marges vides ont été ajoutées à gauche et à droite de l'image. Les éléments qui sont en dehors du viewbox se retrouvent affichés
Passons la taille du viewport à 110 / 60.
Les éléments qui sont en dehors du viewbox se retrouvent affichés si possible sans garantie !
Passons la taille du viewport à 100 / 160.
Le ratio est inversé les marges sont maintenant en haut et en bas.
Seuls les éléments à l'intérieur du viewbox sont affichés avec garantie.
Ajouter la propriété preserveAspectRatio avec la valeur xMinYMid à l'illustration.
<svg viewbox="0 0 3000 2000" preserveAspectRatio="xMinYMid">Avec la valeur xMaxYMid
Le plan de travail est aligné à gauche ou à droite suivant la valeur. Ce qui est en dehors du viewbox du côté de l'alignement n'est pas affiché.
La propriété preserveAspectRatio permet de définir comment sera aligné le viewbox à l’intérieur du viewport et où se trouverons les marges du fait de la non-correspondance du ratio hauteur/largeur.
| xMin | xMid | xMax | |
|---|---|---|---|
| yMin | xMinYMin | xMidYMin | xMaxYMin |
| yMid | xMinYMid | xMidYMid | xMaxYMid |
| xMax | xMinYMax | xMidYMax | xMaxYMax |
Si nous voulons remplir complétement le viewport sans ajouter aucune marge il faut ajouter le mot clé slice au viewbox. La forme est coupée au besoin, et l'ensemble du viewport est rempli par la zone du viewbox sans aucune marge.
Dans ce cas c'est le facteur d'échelle le plus grand qui est pris en compte.
Le placement s'effectue avec les mots clés xM..yM.. qui permettent de choisir la zone à sélectionner et celle à évacuer.
<svg viewbox="0 0 3000 2000" preserveAspectRatio="xMidYMid slice"><svg viewbox="0 0 3000 2000" preserveAspectRatio="xMidYMax slice">A noter :