Balise HTML <svg>
La balise <svg> sert de conteneur pour les graphiques SVG.
Le SVG (Scalable Vector Graphics) est un langage pour les graphiques bidimensionnels basé sur le XML, avec prise en charge de l'animation et de l'interactivité. Pour dessiner des images, il utilise des figures géométriques simples (cercle, lignes, polygone, etc.).
DANGER
L'attribut xmlns est requis uniquement pour l'élément <svg> externe des documents SVG autonomes. Il n'est pas requis pour les éléments <svg> internes ou dans les documents HTML.
Syntaxe <svg>
La balise <svg> s'utilise par paires. Le contenu est écrit entre la balise d'ouverture (<svg>) et la balise de fermeture (</svg>).
Exemple de la balise HTML <svg> :
Balise HTML <svg>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div style="display:flex; flex-flow:row wrap;">
<svg width="180" height="180">
<rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:lightgray; stroke:#1c87c9; stroke-width:4;"/>
</svg>
<svg width="200" height="200">
<circle cx="100" cy="70" r="60" stroke="#1c87c9" stroke-width="4" fill="lightgray"/>
</svg>
<svg width="200" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightgray; stroke:#1c87c9; stroke-width:4; fill-rule:evenodd;"/>
</svg>
</div>
</body>
</html>Exemple de la balise HTML <svg> dessinant une ellipse :
Exemple de la balise HTML <svg> dessinant une ellipse :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="#1c87c9" />
</svg>
</body>
</html>Différences entre SVG et Canvas
À première vue, SVG et Canvas font la même chose : dessiner des illustrations vectorielles à l'aide de points de coordonnées. Cependant, il existe des différences entre les deux. Examinons-les.
SVG est un langage pour décrire des graphiques 2D en XML, tandis que Canvas est utilisé pour dessiner des graphiques 2D à la volée (avec JavaScript).
SVG est comme un programme de "dessin" (vectoriel). Le dessin est une instruction de tracé pour chaque forme, et n'importe quelle partie d'une forme peut être modifiée. Les dessins sont orientés formes.
Canvas est comme un programme de "peinture" (bitmap). Une fois les pixels affichés à l'écran, c'est votre dessin. Vous ne pouvez modifier les formes qu'en les écrasant avec d'autres pixels. Les peintures sont orientées pixels.
SVG est basé sur le XML, ce qui signifie que chaque élément est accessible via le DOM SVG. Dans SVG, la forme dessinée est mémorisée en tant qu'objet. Dans Canvas, le navigateur oublie immédiatement la forme dessinée après son affichage. Si vous devez apporter des modifications au dessin, vous devez le redessiner entièrement.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| baseProfile | none (default), full, basic, tiny | Décrit le profil minimum du langage SVG que l'auteur estime nécessaire pour rendre correctement le contenu. Non pris en charge après SVG2. |
| contentScriptType | content-type | Spécifie le langage de script par défaut pour le fragment de document donné. Non pris en charge après SVG2. |
| contentStyleType | content-type | Identifie le langage de feuille de style par défaut utilisé par le fragment SVG. Non pris en charge après SVG2. |
| height | length, percentage | Définit la hauteur de l'élément SVG. |
| preserveAspectRatio | none, xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax, meet (default), slice | Définit comment le fragment SVG doit être déformé s'il est intégré dans un conteneur avec un ratio d'aspect différent. |
| version | number | Définit la version de SVG utilisée pour le contenu interne de l'élément. Non pris en charge après SVG2. |
| viewBox | list-of-numbers | Définit les limites de la zone de visualisation SVG pour le fragment SVG actuel. |
| width | length, percentage | Détermine la largeur de l'élément SVG. |
| x | length, percentage | Détermine la coordonnée x du conteneur SVG. N'a aucun effet sur les éléments SVG les plus externes. |
| y | length, percentage | Détermine la coordonnée y du conteneur SVG. N'a aucun effet sur les éléments SVG les plus externes. |
Pratique
Quel est l'utilité de la balise SVG en HTML ?