<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

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

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.