Vos documents SVG devront toujours avoir cette structure :
Pour faciliter leur référencement, vous pouvez aussi ajouter un titre et un description :
Décomposons le document :
On commence d’abord par le prologue XML dans lequel on indique la version de XML utilisée et l’encodage. Il y a beaucoup de chances que votre éditeur de texte enregistre les documents en iso-8859-1. Si ce n’est pas le cas, vous devriez trouver une option vous permettant de choisir. Attention : rappelez vous que si rien n’est indiqué, l’encodage par défaut est l’UTF-8 !
Ensuite, nous avons le DOCTYPE permettant au navigateur de avoir ce qu’il affiche. Ici, c’est bien évidemment du SVG !
<!DOCTYPE indique au processeur XML qu’il s’agit d’un DOCTYPE ; ensuite viens le type de document : SVG ; puis on a
l’identifiant public (-//W3C//DTD SVG 20010904//EN) ; enfin l’adresse de la DTD.
On arrive enfin à notre première balise SVG !
Il s’agit bien sur de l’élément racine de notre document.
Une des règles fondamentales de XML est qu’un élément (une balise) doit contenir toutes les autres. Par exemple, la balise html contient toutes les autres balises HTML dans un document Web.
Les attributs width et height servent à spécifier respectivement la longueur et la largeur du dessin. On peut spécificer ces longueurs en pixel, mais il n’y a pas moins de 9 unités possibles :
Si vous n’écrivez pas les attributs width et height, alors le processeur SVG considérera que ces deux valeurs valent 100%.
On arrive ensuite au namespaces.
Le mécanisme des namespaces sert, concrètement, à indiquer au parseur XML de quel langage il s’agit. Il évite donc
les conflits entre deux balises ayant le même nom mais appartenant à deux langages différents, par exemple les balises
text de SVG et de XSLT.
On utilise un préfixe pour indiquer à quel namespace appartient une balise ou un attribut. Par exemple « xlink:href » appartient au
namespace XLink, son nom qualifié (qname) est « xlink:href », son nom local (localname) est « href » et son préfixe est « xlink ».
On doit déclarer un espace de nommage avant de l’utiliser (grâce à l’attribut xmlns) de cette façon :
xmlns:prefix="URI de l’espace de nommage"
Pour SVG, il suffit juste d’indiquer le namespace de SVG, la DTD se chargeant de XLink. Cependant, dans un soucis d’interopérabilité et puisque ça nous ne coûte rien, on va quand même le mettre. En plus ça nous évitera des problèmes lors d’un traitement avec XSLT.
On peut aussi spécifier deux balises enfants de svg : title et desc.
title sert à donner un titre à notre dessin. Son contenu ne sera donc pas affiché dans la zone de dessin. Par contre, il est probable qu’il s’affiche dans la barre d’état de votre navigateur ou dans une infobulle lors du survol du document SVG par la souris. Il n’est pas obligatoire mais pour des raisons d’accesibilité, on devrait toujours mettre un titre évocateur, comme dans un document (X)HTML.
desc donne la description de notre dessin. Renseigner cette balise peut s’avérer utile lorsqu’on souhaite que le document soit référencé par un moteur de recherche.
Et bien je crois que nous sommes prêts à dessiner nos premières formes en SVG.
Contact : tangui.lepense@free.fr - Jabber : Tangui@im.apinc.org
Merci à Link Mauve pour sa relecture, ses conseils et ses corrections.
Ce tutoriel SVG (texte et images
d'exemple) de Tangui Le Pense est
mis à disposition selon les termes de la licence Creative Commons
Paternité - Partage à l'Identique 3.0 non transposé. Basé(e) sur
une oeuvre à svground.fr.