---
title: SVG
slug: Web/SVG
tags:
  - Graphiques 2D
  - Images
  - Images 2D
  - Images Extensibles
  - Images Vectorielles
  - Reference
  - SVG
  - Web
  - 'l10n:priority'
  - Ícones
translation_of: Web/SVG
---
<div>{{SVGRef}}</div>

<div class="callout-box"><strong><a href="/fr/SVG/Tutoriel" title="fr/SVG/Tutoriel">Premiers pas</a></strong><br>
Ce tutoriel vous aidera à débuter en SVG.</div>

<p><span class="seoSummary"><strong>SVG (Scalable Vector Graphics)</strong> est un langage de balisage <a href="/fr/docs/Web/XML">XML</a> décrivant des <a href="https://fr.wikipedia.org/wiki/Image_vectorielle">images vectorielles</a> bidimensionnelles. On pourrait dire que SVG est aux images ce qu'<a href="/fr/docs/Web/HTML">HTML</a> est au texte.</span></p>

<p>SVG est une <a class="external" href="http://www.w3.org/Graphics/SVG/">recommandation du W3C</a> et est basé sur XML. Il est explicitement conçu pour fonctionner avec d'autres standards du <a class="external" href="http://www.w3.org/">W3C</a> comme <a href="/fr/CSS" title="fr/CSS">CSS</a>, <a href="/fr/DOM" title="fr/DOM">DOM</a> et <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.</p>

<p>SVG est un format d'images vectorielles. Les images vectorielles peuvent être redimensionnées sans perte de qualité, tandis que ce n'est pas possible avec des images matricielles (bitmap).</p>

<p>SVG est une norme développée par le <a href="https://www.w3.org/">World Wide Web Consortium (W3C) </a>depuis 1999.</p>

<h2 class="Documentation" id="Documentation">Documentation</h2>

<dl>
 <dt><a href="/fr/SVG/Element" title="fr/SVG/Element">Référence des éléments SVG</a></dt>
 <dd>Obtenir des informations sur les éléments SVG.</dd>
</dl>

<dl>
 <dt><a href="/fr/docs/Web/SVG/Attribute" title="/fr/docs/Web/SVG/Attribute">Référence des attributs SVG</a></dt>
 <dd>Obtenir des informations sur les attributs SVG.</dd>
 <dt><a href="/fr/docs/Référence_du_DOM_Gecko#Interfaces_SVG" title="/fr/docs/Référence_du_DOM_Gecko#Interfaces_SVG">Référence de l'interface DOM SVG</a></dt>
 <dd>Les détails sur l'API DOM SVG pour intéragir avec Javascript.</dd>
</dl>

<dl>
 <dt><a href="/fr/SVG_dans_Firefox" title="fr/SVG_dans_Firefox">SVG dans Firefox</a></dt>
 <dd>Cet article décrit les caractéristiques et le comportement du sous-ensemble de la spécification SVG 1.1 actuellement implémenté dans Firefox 2.</dd>
 <dt><a class="external" href="http://svground.fr/">SVG documentation tierce</a></dt>
 <dd>Une référence francophone du format SVG sous forme de tutoriels.</dd>
 <dt><a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> (en anglais)</dt>
 <dd>jwatt traite des erreurs les plus courantes commises dans le contenu SVG, et explique ce que les auteurs peuvent faire pour les corriger.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_SVG_Project" title="fr/Projet_SVG_de_Mozilla">Projet SVG de Mozilla</a></dt>
 <dd>Une présentation du projet SVG de Mozilla (à traduire de <a href="/en/Mozilla_SVG_Project" title="en/Mozilla_SVG_Project">en:Mozilla SVG Project</a>).</dd>
 <dt><a class="external" href="http://www.mozilla.org/projects/svg/faq.html">Mozilla SVG Project FAQ</a></dt>
 <dd>Cette FAQ est le résultat de recherches au sein du groupe mozilla.dev.tech.svg et des forums de MozillaZine pour connaître les questions les plus souvent posées à propos de SVG dans Mozilla.</dd>
 <dt>Autres ressources</dt>
 <dd>
 <ul>
  <li><a href="/fr/docs/Web/SVG/Tutoriel" title="/fr/docs/Web/SVG/Tutoriel">Un tutoriel</a></li>
  <li><a href="/fr/docs/Introduction_à_SVG_dans_HTML" title="/fr/docs/Introduction_à_SVG_dans_HTML">Une introduction à SVG dans HTML</a></li>
 </ul>
 </dd>
</dl>

<h2 class="Community" id="Communauté">Communauté</h2>

<ul>
 <li>Voir les forums Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li>
</ul>

<h2 class="Tools" id="Outils">Outils</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li>
 <li><a class="external" href="http://validator.w3.org/">Validateur SVG</a> (jusqu'à 1.1 seulement)</li>
 <li>D'autres ressources connexes : <a href="/fr/docs/Web/XML" title="/fr/docs/XML">XML</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a>, <a href="https://developer.mozilla.org/en-US/docs/DOM">DOM</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas">Canvas</a></li>
</ul>

<h2 class="Related_Topics" id="Exemples">Exemples</h2>

<ul>
 <li><a href="http://plurib.us/1shot/2007/svg_gallery/">Galerie d'art SVG</a></li>
 <li><a href="http://www.carto.net/papers/svg/samples/">carto.net</a></li>
 <li>Google <a href="http://maps.google.com">Maps</a> (tracé des routes) et Google <a href="http://docs.google.com">Docs</a> (graphiques des tableurs)</li>
 <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Menus « bulles » SVG</a></li>
 <li>Présentation <a href="https://jwatt.org/blog/2009/11/16/slides-and-demos-from-svg-open-2009">SVG et Mozilla</a> lors de SVG Open 2009</li>
 <li><a href="/fr/docs/Web/SVG/SVG_en_tant_qu_image">SVG comme image</a></li>
 <li><a href="/fr/docs/Web/SVG/SVG_animation_with_SMIL">Animation SVG avec SMIL</a></li>
</ul>

<h3 id="Animation_et_interaction">Animation et interaction</h3>

<p>Comme HTML, SVG dispose d'un modèle de document (DOM) et d'évènements, et est accessible depuis JavaScript. Ceci permet aux développeurs de créer des animations riches et des images interactives.</p>

<ul>
 <li><a href="http://svg-wow.org/">svg-wow.org</a></li>
 <li>Extension Firefox (<a href="http://schepers.cc/grafox/">Grafox</a>) pour ajouter la gestion d'un sous-ensemble des animations SMIL</li>
 <li>Manipulation interactive de <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a></li>
 <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">Transformations HTML </a>utilisant <code>foreignObject</code> de SVG</li>
</ul>

<h3 id="Cartes_graphiques_jeux_et_expérimentations_3D">Cartes, graphiques, jeux et expérimentations 3D</h3>
Bien qu'un peu de SVG puisse contribuer à améliorer le contenu du web, voici quelques exemples d'utilisation poussée du SVG.

<dl>
 <dd>
 <ul>
  <li>Un<a href="http://www.codedread.com/yastframe.php"> Tetris en SVG</a> et <a href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li>
  <li>Jeu <a href="http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/USStates.svg">Find the State</a></li>
  <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">Boîte 3D</a> et <a href="http://www.treebuilder.de/default.asp?file=206524.xml">boîtes 3D</a></li>
  <li><a href="http://jvectormap.com/">jVectorMap</a> (pour représenter des cartes interactives avec des données) (en anglais)</li>
 </ul>
 </dd>
</dl>