<svg>
L'élément svg peut être utilisé pour intégrer des fragments de code SVG à l'intérieur d'un document (par exemple, un document HTML). Ce fragment de code SVG dispose de ses propres viewport et système de coordonnée.
Contexte d'utilisation
| Catégories | Élément conteneur, Élément structurel |
|---|---|
| Contenu autorisé | Tout élément de cette liste, quel qu'en soit l'ordre: Éléments d'animation Éléments descriptifs Éléments de formes Éléments structurels Eléments de dégradés <a>, <altGlyphDef>, <clipPath>, <color-profile> (en-US), <cursor> (en-US), <filter>, <font> (en-US), <font-face> (en-US), <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script> (en-US), <style>, <switch>, <text>, <view> (en-US) |
Exemple
Prenons le fichier SVG suivant (représentant le drapeau nationnal de l'Italie) :
<svg xmlns="http://www.w3.org/2000/svg"
width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg>Ce fichier peut être inclus dans un document HTML5 de cette façon :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Exemple mêlant HTML & SVG</title>
</head>
<body>
<svg width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg>
</body>
</html>Attributs
Attributs globaux
Attributs spécifiques
Interface DOM
Cette élément implémente l'interface SVGSVGElement.
Spécifications
| Spécification | Status | Commentaires |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 La définition de '<svg>' dans cette spécification. |
Candidat au statut de recommandation | |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de '<svg>' dans cette spécification. |
Recommendation | Définition initiale |
Compatibilité des navigateurs
BCD tables only load in the browser