Introduction
SVG (Scalable Vector Graphics) est un format standardisé (c'est une recommandation W3C) pour les images et les animations (web, mais pas seulement) en deux dimensions. La version actuelle est la numéro 1.0.
Véritable langage de dessin vectoriel, il s'agit donc, en clair, d'un concurrent du Flash. Particularité de SVG, c'est un format "opensource" (comme le PNG), et c'est aussi un langage XML, défini par une DTD particulière.

Les applications de SVG sont multiples, et l'on peut citer notamment la cartographie. A partir d'une carte que l'on convertit au format SVG (il existe des outils pour cela, notamment Illustrator d'Adobe ou CorelDraw) et d'une base de données, on produit les documents XML qui consitueront la carte intéractive. Un exemple peut être visualisé ici, d'autres sur ce site.
D'autres utilisations possibles incluent la production de graphiques, à partir de données issues d'une base, ou, via l'intéraction avec un langage de script (PHP, Perl...) à partir du remplissage d'un formulaire.

En tant que langage XML, SVG est basé sur des fichiers "texte", ce qui lui confère une souplesse et une clarté d'utilisation très forte.

Pour visualiser un document SVG, notamment dans son navigateur web, il est d'abord nécessaire de télécharger les outils nécessaires, dont le plug-in. Adobe fournit par exemple son SVG Viewer 3.0 gratuitement.

Pour éditer un document SVG, il faudra d'autres outils. Certains sont gratuits (comme le navigateur/éditeur Amaya sous Linux et Windows), d'autres payants (comme Jasc WebDraw). Une liste complète des outils SVG est donnée par cette page du site du W3C. Elle comprend aussi les "convertisseurs" vers et depuis le SVG.

Un document SVG a la structure de base suivante:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="500" height="500">
<title>Titre de l'image ou de l'animation</title>
<desc>Description de l'image ou de l'animation</desc>
...
</svg>

La taille de l'image peut être spécifiée dans différentes unités (cm, in...), le pixel (px) étant l'unité par défaut.

Exemples d'instructions SVG
Pour afficher, par exemple, un rectangle, on écrira quelque chose comme:

<rect x="50" y="50" width="400" height="400" style="fill: #FFFFFF; stroke: #000000; stroke-width: 5" />

On précise les coordonnées de l'objet graphique par rapport au coin supérieur gauche, puis la taille de l'objet, puis le style (ici, couleur de remplissage, couleur du contour - trait -, épaisseur du contour).

Autre exemple avec un cercle:

<circle cx="250" cy="250" r="200" style="fill: #660000; stroke: #000066; stroke-width: 10" />

où cx et cy sont les coordonnées du centre depuis le coin supérieur gauche, et r le rayon (le pixel est ici l'unité).

On peut créer aussi des ellipses, des lignes, etc... Pour plus d'informations sur ces formes "de base", consulter la spécification W3C du langage sur le sujet.

On peut aussi manipuler des formes beaucoup plus complexes, pourvu qu'un logiciel spécifique nous ait fourni les coordonnées des différents points qui composent ces formes.
On utilise pour cela l'élément (balise SVG) <path /> qui permet de spécifier le contour d'un objet sur le modèle suivant (d signifie data):

<path d="M50,50l400,0l-200,400l-200,-400z" style="fill: #DDDDDD; stroke: #333333; stroke-width: 20" />

Ceci va donner un triangle à partir du point initial de coordonnées absolues 50,50 (M signifie move to - aller à - et sa casse spécifie le type des coordonnées qui suivent - majuscule pour des coordonnées absolues, minuscule pour des coordonnées relatives), duquel on trace une ligne (l) vers les coordonnées relatives (le "l" est en minuscule) 400,0 (450,50 en coordonnées absolues), etc... On aurait pu par ailleurs s'affranchir de la répétition du "l" en le remplaçant par un espace, sauf la première fois.
Le "z" final spécifie qu'à partir des coordonnées relatives qui précèdent, on trace une ligne vers le point initial pour "clore le chemin" (close path).
Notons que les virgules ne sont pas obligatoires (on peut les remplacer par des espaces) mais permettent de clarifier l'écriture.
Pour visualiser l'exemple (vous avez besoin du plug-in pour cela), cliquer ici. Si vous recontrez des problèmes, télécharger le fichier et faites le tourner depuis votre disque dur.

Réutilisation de formes
Imaginons que nous avons défini une forme très complexe, par exemple la forme suivante (une carte de France dont les coordonnées ont été calculées par exportation d'une image au format SVG à l'aide d'un logiciel approprié) définie à l'aide d'un "chemin" (path) spécifiant un contour dont les différents points (en coordonnées relatives) sont reliés par des courbes de bézier ("c").
Ce chemin à la forme:

<path style="fill: #FFFFFF; stroke: #000066; stroke-width: 15" d="M1000 4250c208,-29 217,-721 281,-694 ... -2,-2 -2,-2 0,0 2,2 2,2z">

Remarque : ces coordonnées correspondent à une image de 5000 sur 5000 (dans l'unité choisie), avec comme point de départ le point de coordonnées absolues 1000,4250. Cela signifie que pour l'observer dans une "image SVG" de 500px sur 500px, on utilisera l'argument viewBox qui permet de définir une "boite" de la taille voulue, automatiquement mise à l'échelle de l'image. Ainsi on écrira:

<svg width="500" height="500" viewBox="0 0 5000 5000">

Comme vous pourrez le constater en affichant la source de l'exemple, on a tout intérêt à pouvoir réutiliser cette forme sans recopier tout le code nécessaire à sa production.
Nous allons donc écrire ce qui suit pour obtenir une carte avec effet de relief.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="500" height="500" viewBox="0 0 5000 5000">

<defs>
<path id="france" style="stroke: #000066; stroke-width: 15" d="M1000 4250c208,-29 217,-721 281,-694 ... -2,-2 -2,-2 0,0 2,2 2,2z">
</defs>

<use xlink:href="#france" style="fill: #000000"/>
<use xlink:href="#france" style="fill: #FFFFFF" transform="translate(-20,-20)"/>

</svg>

En "repérant" notre forme "carte de France" par l'identifiant (id) "france", nous pouvons y faire appel avec l'attribut xlink:href de la balise (SVG) <use />. Nous spécifions deux couleurs de remplissage différentes (en déportant cette information de style de la balise <path /> jusqu'à la balise <use />). Enfin, nous "décalons" légèrement (à l'échelle de l'image, cela ne représente que 2 pixels dans chaque direction) la deuxième carte à l'aide de l'attribut transform et sa règle translate() dont les paramètres sont des coordonnées relatives.

Conclusion
Ce bref tour d'horizon a permis de se pencher sur la définition d'un document SVG, sur la taille de l'image, sur la création de formes simples ou complexes et leur réutilisation. Il sera complété, dans de prochains articles, par l'exploration des possibilités d'insertion de texte, de dégradé, de rotation et d'animation du SVG.