Scalable Vector Graphics 26932 31745676 2008-07-20T22:52:29Z 141.31.182.165 /* Compatibilité */ corrigé "sont" -> "est" {{Infobox format de données |nom = Scalable Vector Graphics |image = |extension = <tt>.svg</tt> |mime = image/svg+xml |développeur = [[World Wide Web Consortium]] |genre = format d’[[image vectorielle]] |conteneur de = |contenu par = |extension de = [[Extensible Markup Language|XML]] |origine de = |standard = |spécification = 2 }} [[Image:Bitmap VS SVG.svg|right|400px|thumb|Différence entre les images matricielles et vectorielles.<br />Les images vectorielles peuvent être agrandies à l’infini.]] '''{{lang|en|Scalable Vector Graphics}} (SVG)''' est un [[format de données]] conçu pour décrire des ensembles de [[Image vectorielle|graphiques vectoriels]] et basé sur [[Extensible Markup Language|XML]]. Ce format est spécifié par le [[World Wide Web Consortium]]. ==Caractéristiques== Les coordonnées, dimensions et structures des objets vectoriels sont indiquées sous forme numérique dans le document XML. Un système spécifique de style ([[Feuilles de style en cascade|CSS]] ou [[Extensible stylesheet language|XSL]]) permet d’indiquer les couleurs et les polices de caractères à utiliser. [[Image:MediaWikiExternalEditorImage.png|thumb|''Manipulation d’image SVG avec [[Inkscape]].'']] Ce format gère quelques formes géométriques de base (rectangles, ellipses, etc.), mais aussi des chemins ({{en}}{{lang|en|''paths''}}), qui utilisent les [[Courbe de Bézier|courbes de Bézier]] et permettent ainsi d’obtenir presque n’importe quelle forme. Le remplissage peut se faire à l’aide de dégradés ({{en}}{{lang|en|''gradients''}}) de couleurs de motifs (''pattern'') qui sont des objets SVG quelconques, ou de [[Traitement d'image|filtres]] (appelés {{en}}{{lang|en|''shaders''}} en imagerie 3D). On peut également appliquer des motifs le long des chemins ({{en}}{{lang|en|''markers''}}) et utiliser les fonctions de remplissage. Le [[canal alpha]], pour la [[transparence]], est géré à tous les niveaux. Comme dans tout document [[Extensible Markup Language|XML]], les objets sont organisés sous forme d’[[Arbre (informatique)|arbre]]. Le format permet l’intégration d’animations, ou la manipulation des objets graphiques par programmation, notamment grâce à des [[Langage de script|scripts]] qui peuvent être intégrés dans le SVG. Un des intérêts majeurs de SVG est qu’il peut être inclus dans d’autres documents XML, comme par exemple des documents [[Extensible hypertext markup language|XHTML]] ou des documents [[Extensible markup language|XML]] devant être traités par [[XSL-FO]]. Respectant la norme XML, une image SVG peut également être manipulée par l’intermédiaire du modèle [[Document Object Model]] (DOM). SVG peut être visualisé nativement avec des [[Navigateur web|navigateurs web]] modernes, comme [[Konqueror]], [[Opera]], et [[Mozilla Firefox]], ou à l’aide d’un [[plugin|plug-in]] pour d’autres. Certains environnements graphiques l’utilisent pour la gestion et l’affichage d’[[icône (informatique)|icône]]s, et d’interface, comme X.org, [[GNOME]], [[KDE]] ou certains téléphones portables. Des logiciels graphiques permettent de modifier facilement chaque forme, par exemple en déplaçant des points, ou en changeant la couleur des traits, … Il en est de même pour le texte qui peut être modifié sans toucher aux formes, ce qui facilite grandement la modification de schémas. == Exemples == === Simple === {| width="100%" cellpadding="10" |+ Trois objets rectangulaires |<small><source lang="xml"> <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" x="0" y="0" width="300" height="200" id="svg2"> <title>Rectangles</title> <defs id="defs4" /> <g id="layer1"> <rect width="300" height="120" x="0" y="20" fill="green" id="rect1306" /> <rect width="80" height="150" x="20" y="30" fill="red" id="rect1308" /> <rect width="140" height="80" x="50" y="50" fill="blue" id="rect1310" /> </g> </svg> </source></small> | L’affichage graphique du code ci-contre donne ce résultat : [[Image:Example svg.svg|center]] On distingue nettement les trois rectangles, le vert de dimensions 300×120 pixels,<br /> le rouge (80×150) et le bleu (140×80). |} === Complexe === Voici un autre exemple beaucoup plus compliqué en SVG, montrant les différentes [[Tectonique des plaques|plaques tectoniques]] de la Terre : [[Image:Tectonic plates.svg|center]] == Compatibilité == {{Référence nécessaire|Internet Explorer 7 et Internet Explorer 8 beta sont compatibles SVG mais on ne peut pas les installer sur Windows 2000. WebKit ([[Safari]], [[Konqueror]], [[Epiphany]] > 2.22) est compatible SVG}}. [[Gecko (moteur de rendu)|Gecko]] ([[Firefox]], [[Epiphany]]) est partiellement compatible SVG, mais le résultat rendu est tout à fait acceptable. Les animations et les déplacements d'objets sont bien gérés par exemple. [[Opera]] 9 est compatible SVG<ref>[http://www.opera.com/docs/specs/svg/ SVG support in Opera 9<!-- Titre généré automatiquement -->]</ref>. ==Voir aussi== {{Commons|SVG examples|des exemples en SVG}} * [[:Image:World map pol 2005-fr.svg|Carte du monde en français]] * [[:Image:Monde_css_title_mozilla.svg|Carte du monde css:hover/title firefox en français]] ===Notions connexes=== * [[Graphisme]] * [[Image vectorielle]] * [[Vector Markup Language|VML]] * [[Format ouvert]] === Logiciels d'édition de SVG === * [[Inkscape]] et ses 2 ancêtres ; [[Sodipodi]] et [[Gill (logiciel vectoriel)|Gill]] (logiciel libre) * [[Skencil]] (anciennement Sketch) (logiciel libre) * [[Karbon14]] (logiciel libre) * [[OpenOffice.org Draw]] (logiciel libre) * [[Gimp]] (logiciel libre) * [[Illustrator]] * [[CorelDraw (suite)|CorelDraw]] * [[Paint.NET|Paint.NET]] (logiciel libre) N.B. Ce logiciel n'est pas prévu à la base pour du dessin vectoriel Ces [[Environnement graphique|environnements graphiques]] utilisent le format SVG : [[X.Org]], [[GNOME]], [[KDE]], ainsi que de nombreux téléphones cellulaires tels que les Sony/Ericsson. === Navigateurs supportant le format SVG === * Le moteur Gecko de [[Mozilla]] supporte le SVG nativement (mais pas complètement), il est utilisé par les navigateurs et aggrégateurs : ** [[Firefox]] et [[Seamonkey]] ** [[Flock]] ** L'aggregateur [[Liferea]] * Le moteur [[Khtml]] supporte partiellement le SVG ** [[Konqueror]] ** [[Safari_(logiciel)|Safari]] de MacOSX ** [[ABrowse]] * [[Opera]] supporte nativement le SVG * Les téléphones mobiles de norme [[3G]] supportent le SVG tiny et permettant donc de naviguer sur des sites webs utilisant le SVG == Références == <references/> ==Liens externes== {{à recycler}} * [http://ptaff.ca/svg/ La page francophone du format SVG] * [http://www.svgfr.org/ Portail francophone de la communauté SVG] * {{en}} [http://www.w3.org/Graphics/SVG/ La page SVG du site W3C] et [http://www.w3.org/TR/SVG11/ la liste des fonctions] * {{en}} [http://www.svg.org SVG.org] Un site d’information sur le format SVG et ses applications. Notamment les mobiles. * {{en}} [http://www.mozilla.org/projects/svg/ La page SVG de Mozilla] * {{en}} [http://www.opera.com/products/desktop/svg/ La page SVG de Opera] * {{en}} [http://david.bellot.free.fr/svg-cards Un jeu de cartes à jouer très détaillé entièrement en SVG] * {{fr}} [http://www.generationcyb.net/article.php3?id_article=903 Dessin vectoriel : le format SVG sur Générationcyb.net] * {{en}} [http://isthis4real.com/orbit.xml Modèle gravitationnel : Un très bel exemple d’interactivité en svg avec du javascript] ''(site partisan du [[créationnisme]])'' ===Bibliothèques SVG=== * {{en}} [http://xml.apache.org/batik/index.html Apache Batik], [[Application Programming Interface|API]] [[Langage de programmation Java|Java]] permettant de générer des documents SVG * {{en}} [http://librsvg.sourceforge.net librsvg] est une bibliothèque spécialisée SVG, en permettant la manipulation et la conversion en bitmap (en mémoire ou en fichier JPEG ou PNG). Elle est notamment utilisée sur les serveurs de Wikimedia pour convertir les SVG vers les PNG, à la volée, pour permettre l’affichage sur les navigateurs qui ne supportent pas le SVG nativement. * {{en}} [http://cairographics.org Cairo] pour l’accélération matérielle du rendu, comme un des 2 moteurs SVG de [[Mozilla]] pour linux. * {{en}} [http://search.cpan.org/~ronan/SVG-2.30/ module Perl SVG] * {{en}} [http://freshmeat.net/projects/php_svggraph/ svgGraph], bibliothèque PHP + exemple + doc permettant de faire des histogrammes (ligne, barre) SVG en PHP * {{en}} http://www.openclipart.org/ Bibliothèque de clip art au format SVG, libre de droits (projet initié par les créateurs d’Inkscape) * [http://ofccharts.objectweb.org/ OFC Charts] est une bibliothèque Java open source permettant de créer courbes, histogrammes, [[diagramme circulaire|camemberts]], etc. au format SVG statique ou animé. * {{en}} http://wxsvg.sourceforge.net/ Renderer SVG en C++/DOM dont les classes C++ sont générées à partir du standard [[World Wide Web Consortium|W3C]] (IDL+[[Document Type Definition|DTD]]). Peut etre utilisé comme gadget wxWidgets. Permet la construction de GUI. * {{en}} [http://vectormagic.stanford.edu/ Vector Magic], site gratuit de vectorisation d’image conservant les couleurs. ===Visualisation/plugin SVG=== * [http://librsvg.sourceforge.net librsvg] bibliothèque libre SVG, contient un visualiseur et un [[plugin]] [[Mozilla]]/[[Firefox]] ainsi que Konqueror et de nombreux autres outils libres, depuis sa version 2.8.0 (supporte les chemins, dégradés, les marques ansi que les filtres). * [http://www.adobe.com/svg/viewer/install/main.html Adobe SVG Viewer], visualiseur SVG, notamment comme [[plugin]] [[Hypertext Markup Language|HTML]] * [http://www.corel.com/servlet/Satellite?pagename=Corel/Downloads/Details&id=1042152917172 Corel SVG Viewer], un autre visualiseur SVG (en [[anglais]]) * [http://www.emiasys.net/ Renesis Player], visualiseur SVG 1.2, notamment sous la forme de plugin pour [[Internet Explorer]]. ===Éditeurs SVG=== <!--Éditeurs utilisant principalement ce format de fichiers--> * [[Inkscape]], un logiciel libre de dessin vectoriel spécialisé SVG ({{en}}{{lang|en|''[[fork]]''}} de Sodipodi). * [http://www.nongnu.org/skencil skencil] (anciennement Sketch), est un éditeur vectoriel permettant l’import/export SVG. * [[The GIMP]] Logiciel libre de dessin et animation orienté bitmap, gérant l’import et l’export des [[paths]] au format SVG, et la transformation d’images au format SVG, vers un bitmap grâce à la bibliothèque [[librsvg]] * [http://www.imagemagick.org Imagemagick] permet la manipulation et la conversion de fichiers SVG par scripts, en ligne de commande et dans de nombreux langages. * [[FontForge]] logiciel libre d’édition de fontes, permet d’importer/exporter les [[fontes SVG]] ainsi que les chemins SVG pour créer des fontes dans différents formats. * [[OpenOffice]] Draw, logiciel libre de dessin vectoriel, gère le format SVG dans sa version 2.3 (exportation uniquement). * [[Gournal]] [http://www.adebenham.com/gournal/] et [[Notelab]][http://java-notelab.sourceforge.net/] 2 logiciels libres de prises de notes (au stylet ou à la souris et au clavier) utilisent le format SVG comme format de sauvegarde. ==== Éditeurs incluant des graphiques SVG ==== * [[Scribus]] : logiciel libre de mise en page permet d’insérer et de manipuler des illustrations au format SVG. * [[Dia (logiciel)|Dia]] : logiciel libre d’édition de diagrammes utilise des objets au format SVG et permet l’export des diagrammes au format SVG. * [[MediaWiki]] : logiciel libre de documentation collaboratif (notamment utilisé par Wikipédia) accepte les illustrations au format SVG, comme on peut le voir sur cette page. ===Générateurs de SVG=== * [[Gnumeric]] (logiciel libre), tableur générant des graphes au format SVG. * [[Graphviz]] (logiciel libre), générateur automatique de graphiques avec sortie SVG * [[Gnuplot]] (logiciel libre), traceur de fonctions (2D et 3D) scientifique, gérant la sortie au format SVG * [[Ploticus]] [http://ploticus.sourceforge.net/doc/welcome.html] (logiciel libre), générateur de graphs, gérant le format SVG et les imagesmaps. Il existe également de nombreux [[système d'information géographique|systèmes d’information géographiques (SIG)]] générant des cartes au format SVG. {{Portail|informatique}} [[Catégorie:Format de fichier graphique]] [[Catégorie:Dialecte XML]] [[Catégorie:Standard du web]] [[Catégorie:Format ouvert]] [[als:Scalable Vector Graphics]] [[ar:رسوميات متجهية قياسية]] [[bat-smg:SVG]] [[bs:Scalable Vector Graphics]] [[ca:SVG]] [[cs:Scalable Vector Graphics]] [[da:Scalable Vector Graphics]] [[de:Scalable Vector Graphics]] [[en:Scalable Vector Graphics]] [[eo:Streka Vari-skala Grafiko]] [[es:Scalable Vector Graphics]] [[eu:SVG]] [[fa:گرافیک برداری مقیاس‌پذیر]] [[fi:SVG]] [[gl:SVG]] [[he:SVG]] [[hr:SVG]] [[hu:SVG]] [[id:SVG]] [[it:Scalable Vector Graphics]] [[ja:Scalable Vector Graphics]] [[ka:SVG]] [[ko:SVG]] [[lt:SVG]] [[nl:Scalable Vector Graphics]] [[no:Scalable Vector Graphics]] [[pl:SVG]] [[pt:SVG]] [[ru:SVG]] [[simple:Scalable Vector Graphics]] [[sk:Scalable Vector Graphics]] [[sl:Scalable Vector Graphics]] [[sr:SVG]] [[sv:SVG]] [[th:Scalable Vector Graphics]] [[tr:SVG]] [[uk:Scalable Vector Graphics]] [[vi:SVG]] [[zh:SVG]] [[zh-classical:可縮放矢量圖形]] [[zh-min-nan:SVG]]