<svg>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
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