Scalable Vector Graphics

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

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

Scalable Vector Graphics (SVG) est une spécification du W3C. C'est un format de fichier basé sur XML permettant de décrire des ensembles de graphiques vectoriels.

[modifier] Caractéristiques

Les coordonnées, dimensions et structures des objets vectoriels sont indiqués 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.

Ce format gère quelques formes géométriques de base (rectangles, ellipses, etc.), mais aussi des chemins (paths en anglais), qui utilisent les courbes de Bézier et permettent ainsi d'obtenir n'importe quelle forme. Le remplissage peut se faire à l'aide de dégradés (gradients) de couleurs de motifs (pattern) qui sont des objets SVG quelconques, ou de filtres (appelés shaders en imagerie 3D). On peut également appliquer des motifs le long des chemins (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 certains navigateurs Web, comme Konqueror, Opera, et Mozilla Firefox, ou à l'aide d'un plug-in pour d'autres.

Certaines interfaces 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.

[modifier] Exemples

<?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>

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

[modifier] Voir aussi

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

• Carte du monde en anglais
• Carte du monde css:hover/title firefox en français

[modifier] Notions connexes

• Graphisme
• Dessin vectoriel
• VML
• format ouvert

[modifier] Logiciels

• Skencil (anciennement Sketch)
• Sodipodi
• Inkscape
• Karbon14
• OOo Draw
• Illustrator
• CorelDraw
• Gill

Ces environnements graphiques utilisent le format SVG: X.Org, GNOME, KDE.

[modifier] Liens externes

• La page francophone du format SVG
• Portail francophone de la communauté SVG
• (en) La page SVG du site W3C
• (en) SVG.org Un site d'information sur le format SVG et ses applications. Notamment les mobiles.
• (en) La page SVG de Mozilla
• (en) La page SVG de Opera
• (en) Un jeu de cartes à jouer très détaillé entièrement en SVG
• (fr) Dessin vectoriel : le format SVG sur Générationcyb.net
• (en) Modèle gravitationnel: Un très bel exemple d'interactivité en svg avec du javascript (site partisan du créationnisme)

[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 notament 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'acceleration 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é.

[modifier] Visualisation/plugin SVG

• librsvg bibliothèque SVG, contient un visualiseur et un plugin Mozilla/Firefox SVG depuis la 2.8.0 (supporte les path, gradients, markers, filters).
• Adobe SVG Viewer, visualiseur SVG, notamment comme plugin HTML
• Corel SVG Viewer, un autre visualiseur SVG (en anglais)

[modifier] Éditeurs SVG

• Inkscape, un logiciel libre de dessin vectoriel spécialisé SVG (fork de Sodipodi).
• skencil (anciennement Sketch), est un éditeur vectoriel permettant l'import/export SVG.
• The GIMP Logiciel 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.