Apprends à intégrer des graphiques vectoriels évolutifs directement dans le HTML en utilisant des éléments SVG, des formes de base, des chemins et les bonnes pratiques d'accessibilité.
SVG (Scalable Vector Graphics) est un format basé sur XML pour les images vectorielles. Contrairement aux images matricielles (JPEG, PNG), les SVG sont définis par des formes mathématiques et peuvent être redimensionnés à n'importe quelle taille sans perte de qualité.
Tu peux inclure du SVG dans le HTML de deux façons :
src d'une balise <img> — simple mais sans interactivité ni stylisation CSS.<svg> est placé directement dans ton HTML, te donnant un contrôle total via CSS et JavaScript.Le SVG inline est l'approche préférée lorsque tu as besoin de styliser, animer ou interagir avec le graphique.
L'élément <svg> est le conteneur racine. Son attribut le plus important est viewBox :
<svg viewBox="0 0 100 100" width="200" height="200">
<!-- les formes vont ici -->
</svg>viewBox="minX minY width height" — Définit le système de coordonnées. 0 0 100 100 signifie que la zone de dessin va de (0,0) à (100,100).width / height — La taille de rendu dans la page HTML. Le SVG sera redimensionné pour s'adapter tout en préservant le ratio d'aspect défini par viewBox.Considère viewBox comme la « caméra » — elle définit quelle portion du canevas SVG est visible.
SVG fournit plusieurs éléments de formes intégrés :
| Élément | Description | Attributs clés |
|---|---|---|
<rect> | Rectangle | x, y, width, height, rx (coins arrondis) |
<circle> | Cercle | cx, cy, r |
<ellipse> | Ellipse | cx, cy, rx, ry |
<line> | Ligne | x1, y1, x2, y2 |
<polyline> | Lignes connectées | points |
<polygon> | Forme fermée | points |
<path> | Forme complexe | d (données du chemin) |
Toutes les formes peuvent être stylisées avec fill (couleur intérieure), stroke (couleur de bordure), et stroke-width.
L'élément <path> est le plus puissant — il peut décrire n'importe quelle forme en utilisant un mini-langage de commandes dans l'attribut d (M = déplacer, L = ligne, C = courbe, Z = fermer).
<svg viewBox="0 0 200 200" width="200" height="200"
role="img" aria-label="Démo de formes géométriques">
<title>Formes géométriques</title>
<!-- Rectangle avec coins arrondis -->
<rect x="10" y="10" width="80" height="60"
rx="8" fill="#4a90d9" stroke="#fff" stroke-width="2"/>
<!-- Cercle -->
<circle cx="150" cy="40" r="30"
fill="#e74c3c" stroke="#fff" stroke-width="2"/>
<!-- Triangle utilisant polygon -->
<polygon points="50,120 10,180 90,180"
fill="#2ecc71" stroke="#fff" stroke-width="2"/>
<!-- Ligne -->
<line x1="110" y1="120" x2="190" y2="120"
stroke="#f1c40f" stroke-width="3"/>
<!-- Path: une simple pointe d'étoile -->
<path d="M150,140 L160,170 L190,170 L165,185 L175,210 L150,195 L125,210 L135,185 L110,170 L140,170 Z"
fill="#9b59b6" stroke="#fff" stroke-width="1"/>
</svg>L'élément <text> affiche du texte à l'intérieur du canevas SVG :
<text x="50" y="50" font-size="16" fill="white">Hello SVG</text>Rends le SVG accessible avec :
role="img" sur l'élément <svg>.aria-label — une courte description, ou<title> comme premier enfant de <svg> — le nom accessible.<desc> — une description plus longue pour les graphiques complexes.Pour les SVG décoratifs, utilise aria-hidden="true" pour les masquer des lecteurs d'écran.
Que définit l'attribut viewBox sur un élément SVG ?