SVG

  • Raccourci de la révision : SVG
  • Titre de la révision : SVG
  • ID de la révision : 30065
  • Créé :
  • Créateur : BenoitL
  • Version actuelle ? Non
  • Commentaire nouvelle présentation

Contenu de la révision

Premiers pas
Ce tutoriel vous aidera à débuter en SVG.

SVG (Scalable Vector Graphics) est un langage balisé en XML décrivant des graphismes vectoriels bidimensionnels. En gros, on pourrait dire que SVG est aux graphismes ce qu'XHTML est au texte.

SVG a une portée similaire à la technologie propriétaire Flash d'Adobe, mais ce qui distingue SVG est qu'il s'agit d'une recommandation du W3C (c'est-à-dire en standard sans restriction aucune) et qu'il est basé sur XML plutôt que d'être un format binaire fermé. Il est explicitement conçu pour fonctionner avec d'autres standards du W3C comme CSS, DOM et SMIL.

Les raisons d'utiliser SVG

Un excellent format d'images
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).

Contenu HTML amélioré
Utilisez SVG pour améliorer une page HTML classique ou une application Web.

Animation et interaction
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.
  • Extension Firefox (Grafox) pour ajouter la gestion d'un sous-ensemble des animations SMIL
  • Manipulation interactive de photos
  • Art animé

Cartes, graphiques, jeux et expérimentations 3D
Si un petit peu de SVG peut faire beaucoup pour améliorer du contenu Web, voici des exemples d'utilisation plus lourde de SVG.

Documentation

SVG dans Firefox
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.
SVG Authoring Guidelines
jwatt traite des erreurs les plus courantes commises dans le contenu SVG, et exmplique ce que les auteurs peuvent faire pour les corriger.
Projet SVG de Mozilla
Une présentation du projet SVG de Mozilla (à traduire de {{ mediawiki.interwiki('en', 'Mozilla_SVG_Project', 'en:Mozilla SVG Project') }}).
Mozilla SVG Project FAQ
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 le plus souvent posées à propos de SVG dans Mozilla.

Tous les articles…

Communauté

  • Voir les forums de Mozilla…

{{ ListeDeDiscussion("dev-tech-svg", "mozilla.dev.tech.svg") }}

Outils

Tous les outils…

Sujets liés

XML, Canvas

Categories

Interwiki Language Links


{{ languages( { "en": "en/SVG", "es": "es/SVG", "it": "it/SVG", "ja": "ja/SVG", "pl": "pl/SVG", "pt": "pt/SVG" } ) }}

Source de la révision

<p>
</p>
<div class="callout-box"><b><a href="fr/SVG/Tutoriel">Premiers pas</a></b><br>
Ce tutoriel vous aidera à débuter en SVG.</div>
<p><b>SVG (Scalable Vector Graphics)</b> est un langage balisé en <a href="fr/XML">XML</a> décrivant des graphismes vectoriels bidimensionnels. En gros, on pourrait dire que SVG est aux graphismes ce qu'XHTML est au texte.
</p><p>SVG a une portée similaire à la technologie propriétaire Flash d'Adobe, mais ce qui distingue SVG est qu'il s'agit d'une <a class="external" href="http://www.w3.org/Graphics/SVG/">recommandation du W3C</a> (c'est-à-dire en standard sans restriction aucune) et qu'il est basé sur XML plutôt que d'être un format binaire fermé. 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">CSS</a>, <a href="fr/DOM">DOM</a> et <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.<br style="clear:both;">
</p>
<h3 name="Les_raisons_d.27utiliser_SVG"> Les raisons d'utiliser SVG </h3>
<table class="topicpage-table">
<tbody><tr><td>
<dl><dt> Un excellent format d'images
</dt><dd> <small>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).
<ul><li> <a class="external" href="http://www.croczilla.com/svg/samples/lion/lion.svg">Lion</a>, <a class="external" href="http://www.croczilla.com/svg/samples/butterfly/butterfly.svg">papillon</a> et <a class="external" href="http://www.croczilla.com/svg/samples/tiger/tiger.svg">tigre</a>
</li><li> <a class="external" href="http://plurib.us/1shot/2007/svg_gallery/">Galerie d'art SVG</a>
</li><li> D'autres exemples (<a class="external" href="http://www.croczilla.com/svg/samples/">Exemples SVG de croczilla.com</a>, <a class="external" href="http://www.carto.net/papers/svg/samples/">carto.net</a>)
</li></ul>
</small></dd></dl>
<p>
</p>
<dl><dt> Contenu HTML amélioré
</dt><dd> <small>Utilisez SVG pour améliorer une page HTML classique ou une application Web.
<ul><li> Tutoriel sur l'utilisation de <a href="fr/Introduction_%c3%a0_SVG_dans_HTML">SVG dans XHTML</a>
</li><li> Google <a class="external" href="http://maps.google.com">Maps</a> (tracé de chemins) et <a class="external" href="http://docs.google.com">Documents</a> (graphiques de tableur)
</li><li> <a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Menus SVG en bulles</a>
</li></ul>
</small></dd></dl>
<p>
</p>
</td><td>
<dl><dt> Animation et interaction
</dt><dd> <small>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.
<ul><li> Extension Firefox (<a class="external" href="http://schepers.cc/grafox/">Grafox</a>) pour ajouter la gestion d'un sous-ensemble des animations SMIL
</li><li> Manipulation interactive de <a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a>
</li><li> <a class="external" href="http://timur.mobi/vienna/">Art</a> animé
</li></ul>
</small></dd></dl>
<p>
</p>
<dl><dt> Cartes, graphiques, jeux et expérimentations 3D
</dt><dd> <small>Si un petit peu de SVG peut faire beaucoup pour améliorer du contenu Web, voici des exemples d'utilisation plus lourde de SVG.
<ul><li> <a class="external" href="http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg">Tetris</a>, <a class="external" href="http://www.codedread.com/yastframe.php">un autre Tetris en SVG</a> et <a class="external" href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a>
</li><li> Jeu <a class="external" href="http://files.myopera.com/orinoco/svg/USStates.svg">Find the State</a>
</li><li> <a class="external" href="http://www.carto.net/papers/svg/us_population/index.html">Carte de la population US</a> et <a class="external" href="http://www.destatis.de/jetspeed/portal/cms/Sites/destatis/Internet/EN/Content/Statistics/Bevoelkerung/VorausberechnungBevoelkerung/InteraktiveDarstellung/Content75/Bevoelkerungspyramide1W1,templateId=renderSVG.psml">pyramide des âges de la population allemande</a>
</li><li> <a class="external" href="http://www.treebuilder.de/default.asp?file=441875.xml">Boîte 3D</a> et <a class="external" href="http://www.treebuilder.de/default.asp?file=206524.xml">boîtes 3D</a>
</li><li> <a class="external" href="http://www.amaltas.org/svgapp">Outil de dessin basé sur SVG+DOM</a>
</li></ul>
</small></dd></dl>
<p>
</p>
</td></tr>
<tr><td>
<h4 name="Documentation"> <a href="Special:Tags?tag=SVG&amp;language=fr">Documentation</a> </h4>
<dl><dt> <a href="fr/SVG_dans_Firefox">SVG dans Firefox</a>
</dt><dd> <small>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.</small>
</dd></dl>
<dl><dt> <a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a>
</dt><dd> <small>jwatt traite des erreurs les plus courantes commises dans le contenu SVG, et exmplique ce que les auteurs peuvent faire pour les corriger.</small>
</dd></dl>
<dl><dt> <a href="fr/Projet_SVG_de_Mozilla">Projet SVG de Mozilla</a>
</dt><dd> <small>Une présentation du projet SVG de Mozilla (à traduire de {{ mediawiki.interwiki('en', 'Mozilla_SVG_Project', 'en:Mozilla SVG Project') }}).</small>
</dd></dl>
<dl><dt> <a class="external" href="http://www.mozilla.org/projects/svg/faq.html">Mozilla SVG Project FAQ</a>
</dt><dd> <small>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 le plus souvent posées à propos de SVG dans Mozilla.</small>
</dd></dl>
<p><span class="alllinks"><a href="Special:Tags?tag=SVG&amp;language=fr">Tous les articles…</a></span>
</p>
</td>
<td>
<h4 name="Communaut.C3.A9"> Communauté </h4>
<ul><li> Voir les forums de Mozilla…
</li></ul>
<p>{{ ListeDeDiscussion("dev-tech-svg", "mozilla.dev.tech.svg") }}
</p>
<ul><li> <a class="external" href="http://wiki.svg.org/">SVG Wiki</a>
</li></ul>
<h4 name="Outils"> Outils </h4>
<ul><li> <a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a>
</li><li> <a class="external" href="http://jiggles.w3.org/svgvalidator/">Validateur SVG</a>
</li></ul>
<p><span class="alllinks"><a href="Special:Tags?tag=SVG:Outils&amp;language=fr">Tous les outils…</a></span>
</p>
<h4 name="Sujets_li.C3.A9s"> Sujets liés </h4>
<dl><dd> <a href="fr/XML">XML</a>, <a href="fr/HTML/Canvas">Canvas</a>
</dd></dl>
</td>
</tr>
</tbody></table>
<p><span class="comment">Categories</span>
</p><p><span class="comment">Interwiki Language Links</span>
</p><p><br>
</p>{{ languages( { "en": "en/SVG", "es": "es/SVG", "it": "it/SVG", "ja": "ja/SVG", "pl": "pl/SVG", "pt": "pt/SVG" } ) }}
Revenir à cette révision