<svg>

La balise <svg> est utilisée pour créer et manipuler des graphiques vectoriels.

Elle permet de dessiner :

• des formes,
• du texte,
• des images,
• ou encore des animations directement dans une page web.

Contrairement à la balise <canvas>, les éléments SVG restent éditables après leur création.

Le SVG est basé sur un format XML, ce qui signifie que chaque élément dessiné est une partie du DOM et peut être stylé ou manipulé avec du CSS et JavaScript.

Structure et syntaxe de la balise <svg>

Structure

Voici un exemple de syntaxe simple pour la balise <svg> :

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

Dans cet exemple :

• width et height définissent les dimensions de la zone SVG.
• xmlns spécifie l’espace de noms XML requis pour le SVG (un truc à apprendre par coeur oui !).
• <circle> dessine un cercle bleu centré à (100, 100) avec un rayon de 50 pixels.

Voici le résultat de notre petit exemple :

Exemple

Voici un exemple de dessin plus complexe avec SVG :

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="50" fill="red" />
  <circle cx="200" cy="50" r="40" fill="green" />
  <line x1="10" y1="150" x2="290" y2="150" stroke="blue" stroke-width="4" />
  <text x="150" y="180" font-size="16" text-anchor="middle" fill="black">Exemple SVG</text>
</svg>

Dans cet exemple :

• <rect> dessine un rectangle rouge.
• <circle> crée un cercle vert.
• <line> dessine une ligne bleue avec une épaisseur de 4 pixels.
• <text> affiche le texte "Exemple SVG" centré.

Testez par vous-même :

Attributs

La balise <svg> accepte plusieurs attributs permettant de définir ses dimensions et son comportement :

• width : largeur de la zone SVG ;
• height : hauteur de la zone SVG ;
• viewBox : définit une vue coordonnée pour redimensionner le contenu de manière proportionnelle ;
• xmlns : spécifie l’espace de noms XML (obligatoire).

Utilisez autant que possible l’attribut viewBox pour rendre le graphique responsive ! 😉

Différence entre <svg> et <canvas>

Voici une comparaison rapide entre ces deux balises :

Bonnes pratiques

Voici quelques conseils quand vous utilisez cette balise :

• Utilisez des dimensions relatives avec viewBox pour rendre vos graphiques réactifs.
• Organisez vos éléments dans des <g> (groupes) pour simplifier leur manipulation (mais généralement les générateurs d'images SVG le proposent par défaut).

Pour des animations complexes, utilisez les propriétés animate ou des bibliothèques comme D3.js.

Compatibilité des navigateurs

La balise <svg> est largement prise en charge par les navigateurs modernes :