Tuto SVG 01 - Bases et structure

Public visé: dev lambda.

Objectif

• Comprendre la balise <svg> et le namespace.
• Produire un fichier minimal rendu par le navigateur.

Références W3C

• SVG 2 - Structure: https://www.w3.org/TR/SVG2/struct.html
• SVG Authoring: https://www.w3.org/TR/svg-authoring/

Exemple minimal

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="0 0 200 120">
  <rect x="10" y="10" width="180" height="100" fill="none" stroke="black"/>
</svg>

tutos-svg-01-bases-et-structure.svg

À retenir

• Sans namespace, le navigateur ne traite pas le fichier comme du SVG.
• viewBox définit l'espace de dessin, width/height la taille affichée.
• Un SVG est un document XML: balises bien fermées.

Exercice

• Ajoute un title et un desc à l'intérieur de <svg>.