droite|400px|vignette|Différence conceptuelle entre les images matricielles et vectorielles.Les images vectorielles peuvent être agrandies à l’infini.

Le (en français « graphique vectoriel adaptableDénomination adoptée entre autres par Fréderic Delhoume pour la traduction du livre SVG de J. David Eisenberg, aux éditions O'Reilly. »), ou SVG, est un format de données ASCII conçu pour décrire des ensembles de graphiques vectoriels 2D et fondé sur XML. Ce format inspiré directement du VML et du PGML est spécifié par le .

Historique SVG a été développé à partir de 1999 par un groupe de sociétés au sein du W3C après la mise en concurrence des propositions (PGML) proposé par Adobe à partir de PostScript et (VML) proposé par Microsoft à partir de (RTF). À cette base se sont ajoutées différentes influences, en particulier les feuilles de style en cascade (CSS)..

En , le W3C publie la « ».. En , le standard évolue vers la recommandation en avec une seconde édition en , qui est la version actuelle.

En parallèle apparaît en la recommandation « » dont le but est d'être utilisable sur les appareils mobiles (téléphone mobile, assistant personnel…). Il se présente comme un sous ensemble du « »..

La du langage est en cours de définition au sein du W3C depuis 2012., et est stabilisée en recommandation candidate à la validation depuis (en date de ).

SVG : le dessin et les cartes Le SVG est très utilisé dans le monde de la cartographie et du téléphone mobile.

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 (CSS ou XSL) permet d’indiquer les couleurs et les polices de caractères à utiliser. Ce format gère quelques formes géométriques de base (rectangles, ellipses), mais aussi des chemins (.), qui utilisent les 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 () de couleurs, de motifs () qui sont des objets SVG quelconques, ou de filtres (appelés en imagerie 3D). On peut également appliquer des motifs le long des chemins () et utiliser les fonctions de remplissage. Le canal alpha, pour la transparence, est géré à tous les niveaux.

Comme dans tout document XML, les objets sont organisés sous forme d’arbre. Le format permet l’intégration d’animations, ou la manipulation des objets graphiques par programmation, notamment grâce à des scripts qui peuvent être intégrés dans le SVG.

SVG peut être inclus dans d’autres documents XML, comme des documents XHTML ou des documents 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 (DOM).

SVG peut être visualisé nativement avec certains navigateurs web, ou avec un (voir : les navigateurs SVG).

Certains environnements graphiques l’utilisent pour la gestion et l’affichage d’icônes, 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, par exemple pour les traductions.

Exemples

Le code suivant permet d’afficher un rectangle, un segment, un cercle et un texte : Code XML <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200"> <title>Exemple simple de figure SVG</title> <desc> Cette figure est constituée d'un rectangle, d'un segment de droite et d'un cercle. </desc>

<rect width="100" height="80" x="0" y="70" fill="green" /> <line x1="5" y1="5" x2="250" y2="95" stroke="red" /> <circle cx="90" cy="80" r="50" fill="blue" /> <text x="180" y="60">Un texte</text> </svg>Image correspondante 350px

Il est possible d’utiliser le format SVG pour des images plus complexes (illustration de la Tectonique des plaques). centré|400px

Paths

Des formes simples ou composées sont formées par le tracé de contours droits ou courbés qui peuvent être remplis, soulignées ou utilisés comme tracé de détourage. Ces formes s'appellent path selon une convention de la langue anglaise. Pour un codage compact, donc court ou bref, ces paths sont codés sans syntaxe superflue. Par exemple M (pour un déplacement de l'anglais "move to") précède les nombres x et y initiaux de coordonnées cartésiennes, et L (rejoindre par une ligne de l'anglais "line to") précède le point que la ligne doit rejoindre. Les lettres des commandes suivantes (C, S, Q, T, et A) précèdent les données utilisées pour tracer des courbes de Bézier et des courbes elliptiques. Z est utilisé pour fermer un chemin. La casse des lettres indique le caractère relatif (minuscules) ou absolu (majuscules) des coordonnées. Dans tous les cas, des coordonnées absolues suivent les commandes en lettres capitales et des coordonnées relatives sont utilisées pour les lettres minuscules.

Code XML <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="376" height="68"> <title>Exemple simple de figure SVG</title> <desc> Cette figure est constituée de chemins décrits par des path </desc> <path stroke="#000" stroke-width="5" fill="none" d="m1,8h66m34,3h67m34,3h67m39,1h67M1,60h66 m34-4h67m34-3h67m33,0h67M8,0V68m52,0V0m52, 0V68m45,0V0m59,0V68m38,0V0m71,1-12,66m39,0 12-66"/> </svg> </svg>

Les notations H et V sont des notations abrégées pour noter des tracés horizontaux et verticaux (respectivement) dont l'une des coordonnées est nulle.Image correspondante

Tracé de quatre lignes horizontales, annotées en bleu: "m1,8h66 m34,3h67 m34,3h67 m39,1h67" Tracé de quatre lignes horizontales, annotées en vert: "M1,60h66 m34-4h67 m34-3h67 m33,0h67"

Tracé des barres verticales: "M8,0V68 m52,0V0" # caractère 1 "m52,0V68 m45,0V0" # caractère 2 "m59,0V68 m38,0V0" # caractère 3 "m71,1-12,66" # vers le sud ouest "m39,0 12-66" # vers le nord est

Mises en œuvre Le support du SVG est possible à différents niveaux : dans le navigateur, au niveau applicatif (navigateur ou logiciel d’édition SVG), au niveau de l'environnement de bureau (KDE, par exemple) ou du « matériel » (téléphone).

Logiciel d’édition vignette|Manipulation d’image SVG avec Inkscape. Certains éditeurs visuels sont fournis avec un éditeur en mode texte. Parfois ce mode texte supporte la complétion et la coloration syntaxique pour aider à écrire du SVG.

Mode textuel XML Spket IDE (gratuit pour une utilisation non commerciale) supporte JavaScript (coloration) et le SVG. Existe sous forme de ou non pour Eclipse. XMLSpy (gratuit ou commercial) sous Windows oXygen (commercial) supporte XSLT et le rendu SVG

Mode graphique . Le logiciel Adobe illustrator reconnait fort bien les fichiers SVG. Il ajoute toutefois des balises propriétaires, des regroupements de calques, et des dépendances CSS qui rendent ses fichiers peu exploitables en dehors de la suite Adobe. Affinity. La suite Affinity permet l’importation, la création, la modification, et l’exportation des fichiers au format SVG dans tous ses logiciels. importe le SVG. CorelDraw importe, crée, modifie et exporte le format SVG. DRAW SVG, éditeur en ligne libre avec une interface aussi en SVG et de nombreuses fonctionnalités. 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. GIMP Logiciel libre de dessin et animation orienté bitmap, gérant l’import et l’export des au format SVG, et la transformation d’images au format SVG, vers un bitmap grâce à la bibliothèque librsvg. Gournal. et Notelab., deux logiciels libres de prises de notes (au stylet, doigts sur tablettes, ainsi qu’à la souris et au clavier) qui utilisent le format SVG comme format de sauvegarde. ImageMagick permet la manipulation et la conversion de fichiers SVG par scripts, en ligne de commande et dans de nombreux langages. Inkscape (logiciel libre sous Licence GNU) et ses deux ancêtres ; Sodipodi et Gill (logiciels libres), supportent complètement SVG (les animations n'étant cependant pas encore supportées sans l'ajout d'extensionsL'extension libre vue sur sozi.baierouge.fr permet de faire des présentations animées SVG à la Prezi sur Inskape.). Karbon14 (logiciel libre). OpenOffice.org Draw / LibreOffice, logiciel libre de dessin vectoriel, gère le format SVG. Scribus importe les fichiers au format SVG. Skitch permet d'enregistrer sous format SVG. SVGEdit éditeur libre anciennement utilisé par BlueGriffon ou en ligne par Framavectoriel.

Éditeurs incluant des graphiques SVG CaRMetal exporte au format SVG. Dia : logiciel libre d’édition de diagrammes qui utilise des objets au format SVG et permet l’export des diagrammes au format SVG. , outil d'affichage de graphes en ligne de commande, supporte l'export au format SVG. : logiciel libre qui se décrit comme une application du concept des cartes mentales à l'interface homme-machine. Les cartes ainsi créées peuvent être exportées au format SVG. Fritzing : logiciel libre de dessin de circuits imprimés qui utilise SVG pour l'image des composants et permet l'export au format SVG. GeoGebra exporte au format SVG. JetPunk utilise des cartes du monde SVG pour la plupart de ses quiz, notamment le plus populaire du site, « Pays du monde ». Maple et Mathematica supportent l'export des formules, des feuilles de travail, des figures et des animations au format SVG. Matlab, et GNU Octave (via Gnuplot) supportent l'export des figures et des animations au format SVG. MediaWiki : logiciel libre de documentation collaboratif (notamment utilisé par Wikipédia) qui accepte les illustrations au format SVG, comme on peut le voir sur cette page. Scribus : logiciel libre de mise en page qui permet d’insérer et de manipuler des illustrations au format SVG. Scilab exporte au format SVG.

Logiciel de vectorisation La création d'un document image vectorielle à partir d'une image raster (bitmap / en mode point) peut s'effectuer de différentes manières qui correspondent à des usages différents. Elle peut être réalisée de manière simple et automatique quand il ne s'agit que de conserver l'apparence d'une image « au trait ». La création d'un document image vectorielle peut nécessiter le recours à un logiciel spécialisé avec, éventuellement, l'intervention d'un opérateur, s'il s'agit de créer un document image vectoriel où les composantes de l'image (les segments composant les tracés par exemple) peuvent avoir des significations différentes. C'est le cas de la vectorisation d'une carte scannée comportant des objets dont il est intéressant de conserver la différenciation : limite de cours d'eau, limites de voirie, limites de forêts - Live Trace (CS3+), Image Trace (CS6+), Affinity Designer, Autotrace., CorelTrace (suite graphique CorelDraw), Inkscape via Potrace ., Potrace., - Vector Magic..

Logiciel de rastérisation

PixJet, , CorelDRAW, Inkscape

En ligne : FileFormat.info . - SVG ⇒ PNG, JPEG, TIFF, [http://image.online-convert.com/ - . - SVG ⇔ BMP, EPS, GIF, HDR, ICO, JPEG, PNG, SVG, TGA, TIFF, WBMP, WebP, SVGConv . - SVG ⇒ JPEG, PNG, GIF, BMP, TGA, TIFF, PDF, PS, EPS. Traitement par lots.

Environnements graphiques supportant SVG Des environnements graphiques utilisent le format SVG : X.Org, GNOME et KDE, ainsi que de nombreux téléphones cellulaires, tels que les Sony Ericsson. Acorn RISC OS incluent également un support natif d'un format vectoriel nommé , proche de SVG.

Les navigateurs SVG Le rendu SVG est intégré dans HTML5 (balises <svg> et <code></svg></code>) et est supporté nativement par la plupart des navigateurs Web depuis 2010..

Support natif du SVG