<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 Éléments de dégradés <a> , <clipPath> , <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) :
xml
<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 :
html
<!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
Specification |
---|
Scalable Vector Graphics (SVG) 2 # NewDocument |
Compatibilité des navigateurs
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.