Dans cette section, nous allons écrire un fichier SVG qui représente
l'image du chat que nous avons vu dans le chapitre précédent. Cet
exemple introduit beaucoup des concepts qui seront expliqués en détail
dans les chapitres suivants. Ce fichier convient comme exemple, mais il
n'est pas forcément représentatif de la façon dont vous devriez écrire
un fichier SVG dans un projet réel.
2.1 Structure du document
L'exemple 1
commence par les instructions XML standard ainsi que par la déclaration
DOCTYPE. L'élément racine "svg" définit la largeur et la hauteur du
graphique en pixels par les attributs width et height. L'élément
"title" est souvent utilisé par le programme de visualisation comme
titre de la fenêtre ou texte d'une bulle d'aide, l'élément "desc" donne
une description complète de l'image.
2.2 Formes de base
La tête du chat (un cercle) est dessinée par un élément .
Ses attributs spécifient les coordonnées du centre x et y, ainsi que
son rayon. Le point de coordonnées (0,0) est le coin en haut à gauche
de l'image. Les coordonnées en x augmentent quand on va vers la droite,
les coordonnées en y augmentent quand on descend.
La position du cercle et sa taille font partie de la structure du
dessin. La couleur dans laquelle il est dessiné fait partie de sa
présentation. Comme il est courant avec XML, on sépare la structure de
la présentation pour plus de flexibilité. L'information de presentation
est donnée dans l'attribut style. Sa valeur est une série de propriétés
de présentation avec leurs valeurs, telles que décrites dans l'annexe
B, dans la section Anatomie d'un style. Nous utiliserons une couleur
noire pour le contour et pas de couleur de remplissage none pour rendre
l'intérieur transparent. Le code SVG est montré dans l'exemple 2, le
résultat apparait à la figure 5.
Exemple 2. Formes de base – cercle
Figure 5
2.3 Specifier les styles en tant qu'attribut
Ajoutons deux cercles pour les yeux. Dans l'exemple 3, bien que les
couleurs de contour et de remplissage fassent partie de la
presentation, SVG autorise aussi qu'elles soient specifiées comme des
attributs. Dans cet exemple nous spécifions les couleurs de contour et
de remplissage comme deux attributs -Fill et stroke distincts au lieu
de les specifier dans un seul attribut style. Vous n'utiliserez
probablement pas souvent cette méthode. Cet exemple est juste donné
pour montrer qu'il est possible de procéder ainsi. Le résultat est
donné dans la figure 6.
L'en-tête ainsi que ont été supprimés pour ne pas surcharger le listing.
Figure 6
2.4 Grouper les objets graphiques
L'exemple 4 ajoute lc code nécessaire pour créer les moustaches sur le
côté droit de la tête du chat grace à deux éléments "line". Les
moustaches sont groupées (nous allons voir plus loin pourquoi) en les
incluant dans un élément auquel on donne un nom par
l'attribut id. Une ligne est spécifiée par les coordonnées x et y du
point de depart (x1 et y1) et du point d'arrivée (x2 et y2). Le
résultat est montré dans la figure 7.
Figure 7
2.5 Transformation du système de coordonnées
A present nous allons réutiliser grace a l'élément
2.6 Autres formes de base
L'exemple 6 construit les oreilles et la bouche a l'aide de l'élément
, qui utilise comme valeur de l'attribut points une
liste de coordonnées x et y. Les coordonnées sont séparées par des
blancs ou des virgules, le résultat est montré dans la figure 8.
100 Visites
Mickael OHAYON
[10 mn de lecture - paru le 11/17/2006 6:40:45 PM - Public : Débutant]
[10 mn de lecture - paru le 11/17/2006 1:06:00 PM - Public : Débutant]