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