Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<svg>
Baseline Widely available *
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
L'élémentsvg 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 propresviewport 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>,<filter>,<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
Attributs spécifiques
Interface DOM
Cette élément implémente l'interfaceSVGSVGElement.
Spécifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # NewDocument |