1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
---
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>
|
