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>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
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
- Conditional processing attributes »
- Core attributes »
- Document event attributes »
- Graphical event attributes »
- Presentation attributes »
classstyleexternalResourcesRequired
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
Nous convertissons les données de compatibilité dans un format JSON.
Ce tableau de compatibilité utilise encore l'ancien format
car nous n'avons pas encore converti les données qu'il contient.
Vous pouvez nous aider en contribuant !
| Feature | Chrome | Firefox (Gecko) | IE | Opera | Safari |
|---|---|---|---|---|---|
| Support basique | 1.0 | 1.5 (1.8) | 9.0 | 8.0 | 3.0.4 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support basique | 3.0 | 1.0 (1.8) | Pas de support | (Oui) | 3.0.4 |
Ce tableau est basé d'après ces sources de thèses.