Scalable Vector Graphics

Un article de Wikipédia, l'encyclopédie libre.

Scalable Vector Graphics

Extension de fichier :

 .svg

Type MIME :

 image/svg+xml

Développé par :

 World Wide Web Consortium

Type de format :

 format d’image vectorielle

Extension du :

 XML

Spécification :

 Format ouvert
Différence entre les images matricielles et vectorielles.Les images vectorielles peuvent être agrandies à l’infini.
Différence entre les images matricielles et vectorielles.
Les images vectorielles peuvent être agrandies à l’infini.

Scalable Vector Graphics (SVG) est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML. Ce format est spécifié par le World Wide Web Consortium.

Sommaire

[modifier] 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 d’écriture à utiliser.

Manipulation d’image SVG avec Inkscape.
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)paths), 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 ((en)gradients) de couleurs de motifs (pattern) qui sont des objets SVG quelconques, ou de filtres (appelés (en)shaders en imagerie 3D). On peut également appliquer des motifs le long des chemins ((en)markers) 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.

Un des intérêts majeurs de SVG est qu’il peut être inclus dans d’autres documents XML, comme par exemple 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 Document Object Model (DOM).

SVG peut être visualisé nativement avec des navigateurs web modernes, comme Konqueror, Opera, et Mozilla Firefox, ou à l’aide d’un plug-in pour d’autres.

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.

[modifier] Exemples

[modifier] Simple

Trois objets rectangulaires 
<?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>
L’affichage graphique du code ci-contre donne ce résultat :

On distingue nettement les trois rectangles, le vert de dimensions 300×120 pixels,
le rouge (80×150) et le bleu (140×80).

[modifier] Complexe

Voici un autre exemple beaucoup plus compliqué en SVG, montrant les différentes plaques tectoniques de la Terre :

[modifier] Compatibilité

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) sont compatible SVG.

[réf. nécessaire].

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[1].

[modifier] Voir aussi

commons:Accueil

Wikimedia Commons propose des documents multimédia libres sur des exemples en SVG.

[modifier] Notions connexes

[modifier] Logiciels d'édition de SVG

Ces environnements graphiques utilisent le format SVG : X.Org, GNOME, KDE, ainsi que de nombreux téléphones cellulaires tels que les Sony/Ericsson.

[modifier] 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 :
  • Le moteur Khtml supporte partiellement le SVG
  • 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

[modifier] Références

  1. ↑ SVG support in Opera 9

[modifier] Liens externes

[modifier] Bibliothèques SVG

  • (en) Apache Batik, API Java permettant de générer des documents SVG
  • (en) 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) Cairo pour l’accélération matérielle du rendu, comme un des 2 moteurs SVG de Mozilla pour linux.
  • (en) module Perl SVG
  • (en) 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)
  • OFC Charts est une bibliothèque Java open source permettant de créer courbes, histogrammes, 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 W3C (IDL+DTD). Peut etre utilisé comme gadget wxWidgets. Permet la construction de GUI.
  • (en) Vector Magic, site gratuit de vectorisation d’image conservant les couleurs.

[modifier] Visualisation/plugin SVG

[modifier] Éditeurs SVG

  • Inkscape, un logiciel libre de dessin vectoriel spécialisé SVG ((en)fork de Sodipodi).
  • 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
  • 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 [1] et Notelab[2] 2 logiciels libres de prises de notes (au stylet ou à la souris et au clavier) utilisent le format SVG comme format de sauvegarde.

[modifier] É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 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.

[modifier] 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 [3] (logiciel libre), générateur de graphs, gérant le format SVG et les imagesmaps.

Il existe également de nombreux systèmes d’information géographiques (SIG) générant des cartes au format SVG.