Helpful resources ▼
  Download   Pricing   Buy

Systèmes de coordonnées et unités SVG – viewport et viewBox

Tout contenu SVG est dessiné dans des viewports SVG. Chaque viewport définit une région de dessin caractérisée par une taille (width, height) et une origine, mesurées en unités utilisateur abstraites. ( W3C)

Le canvas est l’espace infini où les éléments SVG sont placés. La partie visible de ce canvas, limitée par l’écran ou le conteneur, s’appelle le viewport. Comprendre la relation entre canvas, viewport et viewBox est essentiel pour une mise en page SVG précise et un redimensionnement responsive.

Ce que cet article explique

  • Le canvas est l’espace de dessin SVG abstrait.
  • Le viewport est la fenêtre visible définie par width et height.
  • Le système de coordonnées initial commence en (0,0) dans l’angle supérieur gauche.
  • SVG utilise des unités utilisateur pour les coordonnées et longueurs.
  • Le viewBox peut créer un autre système de coordonnées utilisateur pour l’échelle, le zoom et le positionnement.

Canvas et viewport

Le canvas est un plan abstrait et illimité qui peut contenir des coordonnées positives ou négatives. Tout contenu SVG est affiché à travers le viewport, qui définit une zone du canvas par sa taille et son origine. L’origine par défaut est (0,0). La portée du viewport se définit avec les attributs width et height de l’élément <svg> extérieur.

1    <svg width="900" height="500" xmlns="http://www.w3.org/2000/svg">
2    </svg>

Ce code définit un viewport SVG de 900×500 pixels. L’image est observée à travers cette fenêtre, appelée viewport initial.

Canvas SVG et viewport initial

Système initial et système utilisateur

Le système de coordonnées SVG par défaut ressemble à celui de HTML. Il fonctionne comme un plan x-y : l’origine (0,0) se trouve en haut à gauche, les valeurs x positives vont vers la droite et les valeurs y positives vers le bas. Pour les coordonnées, largeurs et hauteurs, vous pouvez utiliser cm, mm, in, em, ex, pt, pc et px. Les unités SVG par défaut sont les pixels.

Il faut distinguer le système de coordonnées SVG initial du système de coordonnées utilisateur du viewport. L’élément <svg> extérieur peut avoir un attribut viewBox. Sans cet attribut, le système utilisateur est identique au système initial.

viewBox définit un système de coordonnées utilisateur différent. Il prend quatre valeurs :

Les valeurs s’écrivent entre guillemets : viewBox="min-x min-y width height".

1    <svg width="900" height="500" viewBox="220 125 450 250" xmlns="http://www.w3.org/2000/svg">
2    </svg>

Ici, viewBox sélectionne une zone du canvas dont l’origine est (220,125), la largeur 450 et la hauteur 250. Cette zone est ensuite recadrée et agrandie pour remplir tout le viewport.

Viewport initial et viewBox utilisateur

La figure de gauche montre le canvas du document SVG, le viewport initial et le viewBox utilisateur. La figure de droite montre le résultat après application de viewBox.

Avec viewBox, une unité du système utilisateur peut correspondre à plusieurs pixels du viewport. SVG adapte le rectangle de coordonnées choisi pour remplir la zone visible. En changeant les valeurs de viewBox, vous pouvez agrandir, réduire, recadrer ou déplacer visuellement le dessin sans réécrire les coordonnées des formes.

Comment lire les coordonnées et unités SVG

  1. Commencez par l’élément <svg> extérieur et vérifiez width et height.
  2. Considérez (0,0) comme l’angle supérieur gauche du viewport initial.
  3. Lisez les valeurs x comme un déplacement vers la droite et les valeurs y comme un déplacement vers le bas.
  4. Vérifiez la présence de viewBox, car il peut remapper les coordonnées utilisateur vers le viewport.
  5. Utilisez les attributs de chaque élément, comme x, y, cx, cy, points ou les commandes de path, pour comprendre le placement.

Erreurs courantes et corrections

ProblèmeCauseCorrection
Le contenu SVG est coupéviewBox définit une zone plus petite que le dessinAugmentez width et height du viewBox ou ajustez min-x / min-y
Le SVG est étiréLe ratio de viewBox ne correspond pas au viewportGardez des dimensions proportionnelles ou utilisez preserveAspectRatio
Les objets semblent trop grands ou trop petitsL’échelle des unités utilisateur est mal compriseRecalculez les unités viewBox par rapport au viewport
Le contenu se décaleValeurs min-x ou min-y incorrectesAjustez l’origine pour aligner la zone visible souhaitée
Rien ne change après modification de viewBoxAucun contenu visible dans la zone définieVérifiez que les éléments dessinés sont dans les limites de viewBox

Recettes rapides

TâcheExemple SVG
Définir un viewport fixe<svg width="400" height="200"></svg>
Rendre un SVG scalable<svg width="400" height="200" viewBox="0 0 400 200"></svg>
Zoomer sur une zone<svg width="400" height="200" viewBox="100 50 200 100"></svg>

FAQ – coordonnées et unités SVG

Quelle est la différence entre viewport et viewBox en SVG ?

Le viewport est la zone de sortie visible, définie par width, height, CSS ou le conteneur. viewBox définit le rectangle de coordonnées qui est adapté à ce viewport.

Pourquoi l'axe y de SVG descend-il ?

Le système initial commence en (0,0) dans l’angle supérieur gauche. Les valeurs x positives vont vers la droite et les valeurs y positives vers le bas, comme dans beaucoup de systèmes de coordonnées d’écran.

Que sont les unités utilisateur SVG ?

Ce sont les unités de coordonnées utilisées dans le dessin SVG. Sans viewBox, une unité correspond généralement à un pixel CSS; avec viewBox, les unités sont mises à l’échelle pour remplir le viewport.

Pourquoi changer viewBox agrandit ou réduit le contenu SVG ?

SVG adapte le rectangle viewBox au viewport. Un viewBox plus petit montre moins d’unités et agrandit le contenu; un viewBox plus grand montre plus d’unités et réduit visuellement le contenu.

Spécification et ressources associées

Tutoriel SVG SVG viewBox