<svg>
Intègre un graphique SVG (Scalable Vector Graphics) directement dans le HTML. Supporte les formes, textes, animations et filtres vectoriels.
Description
L’élément <svg> permet d’inclure des graphiques vectoriels SVG directement dans le HTML (SVG inline). Les SVG inline sont pleinement accessibles au CSS et au JavaScript, peuvent être animés, et restent nets à toutes les résolutions. Ils ne nécessitent pas de requête HTTP supplémentaire.
Syntaxe
<svg viewBox="0 0 100 100" width="100" height="100" aria-hidden="true">
<circle cx="50" cy="50" r="40" fill="currentColor"/>
</svg>Exemples
Icône SVG accessible :
<button type="button">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
<path d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"/>
</svg>
Retour
</button>Logo SVG avec titre accessible :
<svg viewBox="0 0 200 60" width="200" height="60" role="img" aria-labelledby="logo-title">
<title id="logo-title">Logo Mon Entreprise</title>
<rect width="200" height="60" rx="8" fill="#336699"/>
<text x="100" y="38" text-anchor="middle" fill="white" font-size="18">Mon Entreprise</text>
</svg>Attributs spécifiques
| Attribut | Type | Description |
|---|---|---|
viewBox | string | Définit le système de coordonnées interne : minX minY largeur hauteur. Permet le redimensionnement sans déformation. |
width | string | Largeur d’affichage (pixels ou %). |
height | string | Hauteur d’affichage. |
xmlns | URL | Espace de noms SVG (http://www.w3.org/2000/svg). Obligatoire dans les fichiers .svg, optionnel en HTML inline. |
Notes
SVG inline vs <img src=".svg"> :
- SVG inline : accessible au CSS/JS, personnalisable, pas de requête HTTP. Idéal pour les icônes.
<img src=".svg">: plus simple, mis en cache, mais CSS externe ne s’applique pas.
Accessibilité : pour les SVG informatifs (logo, graphique), ajouter role="img" et <title> (ou aria-label). Pour les SVG décoratifs, aria-hidden="true".
focusable="false" : dans IE/Edge anciens, les SVG reçoivent le focus par défaut. Ajouter focusable="false" pour éviter un focus indésirable sur les icônes.