index.md

---
title: SVG (Scalable Vector Graphics)
slug: Web/SVG
---

{{SVGRef}}

## Démarrer avec SVG

**SVG (pour <i lang="en">Scalable Vector Graphics</i> en anglais, soit «&nbsp;graphiques vectoriels adaptables&nbsp;»**) est un langage construit à partir de [XML](/fr/docs/Web/XML) et qui permet de décrire des [graphiques vectoriels](https://fr.wikipedia.org/wiki/Image_vectorielle) en deux dimensions.

Il s'agit d'un format texte, standardisé de façon ouverte pour le Web, pour décrire des images qui peuvent être affichées nettement à n'importe quelle taille et qui est conçu pour fonctionner avec les autres technologies web standard comme [CSS](/fr/docs/Web/CSS), [DOM](/fr/docs/Web/API/Document_Object_Model), [JavaScript](/fr/docs/Web/JavaScript), et [SMIL](/fr/docs/Web/SVG/SVG_animation_with_SMIL). D'une certaine façon, SVG est aux graphiques ce que [HTML](/fr/docs/Web/HTML) est au texte.

Les images SVG et leur comportement sont définies dans des fichiers texte [XML](/fr/docs/Web/XML). Cela signifie qu'on peut rechercher dans ces textes, les indexer, réaliser des opérations scriptées, les compresser. De plus, cela signifie aussi qu'on peut en créer ou en éditer avec n'importe quel éditeur de texte ou avec des logiciels de dessin.

Contrairement aux images matricielles classiques aux formats [JPEG](/fr/docs/Glossary/jpeg) ou [PNG](/fr/docs/Glossary/PNG), les images SVG peuvent être affichées à n'importe quelle taille sans perte de qualité. De plus, on peut les localiser en adaptant le texte qu'elles contiennent, sans avoir nécessairement besoin d'un éditeur graphique. Avec des bibliothèques logicielles adaptées, les fichiers SVG peuvent être traduits à la volée.

SVG a été développé par le [W3C (World Wide Web Consortium)](https://www.w3.org/) depuis 1999.

Voir aussi [le tutoriel SVG](/fr/docs/Web/SVG/Tutorial).

## Documentation

- [Référence des éléments SVG](/fr/docs/Web/SVG/Element)
  - : Des informations à propos de chaque élément SVG.
- [Référence des attributs SVG](/fr/docs/Web/SVG/Attribute)
  - : Des informations à propos de chaque attribut SVG.
- [Référence du DOM SVG](/fr/docs/Web/API/Document_Object_Model#interfaces_svg)
  - : Des informations quant à l'API DOM exposée par SVG, qui permet des interactions avec JavaScript.
- [Appliquer des effets SVG à du contenu HTML](/fr/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
  - : SVG peut fonctionner avec [HTML](/fr/docs/Glossary/HTML), [CSS](/fr/docs/Glossary/CSS), et [JavaScript](/fr/docs/Glossary/JavaScript). On pourra utiliser SVG pour [améliorer de façon progressive une page ou une application web](/fr/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction).

## Outils

- [Suite de tests SVG](https://github.com/w3c/svgwg/wiki/Testing)
- [Validateur de balisage](https://validator.w3.org/#validate_by_input)

## Exemples

- [Bonnes pratiques pour l'édition de SVG (en anglais)](https://jwatt.org/svg/authoring/)
- [SVG comme image](/fr/docs/Web/SVG/SVG_as_an_Image)
- [Animation SVG avec SMIL](/fr/docs/Web/SVG/SVG_animation_with_SMIL)
- [Galerie d'art SVG](https://www1.plurib.us/svg_gallery/)
- [D3](https://d3js.org) (une bibliothèque JavaScript qui permet de visualiser des données avec HTML, SVG, et CSS)