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 :
widthetheightdéfinissent les dimensions de la zone SVG.xmlnsspé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 :
| Aspect | <svg> | <canvas> |
|---|---|---|
| Format | Graphiques vectoriels (XML) | Graphiques raster (bitmap) |
| Éditabilité | Les éléments restent éditables après leur création | Une fois dessinés, les pixels ne sont plus modifiables individuellement |
| Performance | Adapté pour les graphiques simples ou interactifs (ou les logos) | Meilleur pour les animations et dessins complexes |
| Manipulation | Chaque élément fait partie du DOM et peut être manipulé avec CSS/JS | Les manipulations se font uniquement avec le contexte de dessin |
Bonnes pratiques
Voici quelques conseils quand vous utilisez cette balise :
- Utilisez des dimensions relatives avec
viewBoxpour 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 :
| Navigateur | Compatibilité |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Partielle (IE 9+) |