Tuto SVG 02 - Coordonnées, viewBox et unités

Public visé: dev lambda.

Objectif

• Comprendre le repère X/Y, les unités utilisateur et le mapping viewBox.

Références W3C

• SVG 2 - Coordinate Systems, Transformations and Units: https://www.w3.org/TR/SVG2/coords.html

Exemple

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 100 50">
  <rect x="0" y="0" width="100" height="50" fill="#f2f2f2" stroke="#333"/>
  <circle cx="50" cy="25" r="10" fill="#3a6ea5"/>
</svg>

tutos-svg-02-coordonnees-viewbox-unites.svg

À retenir

• viewBox mappe un repère logique vers la taille affichée.
• Les unités par défaut sont des "user units" (souvent proches du px).
• Les valeurs en % se basent sur la boîte d'affichage.

Exercice

• Change viewBox en 0 0 200 100 et observe l'effet sur le cercle.