<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.

* Some parts of this feature may have varying levels of support.

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) :

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
svg
baseProfile
Deprecated
height
preserveAspectRatio
systemLanguage
version
Deprecated
viewBox
width
x
y
zoomAndPan
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.