Nous l’avons vu, SVG sert à dessiner des formes. Nous allons donc commencer par dessiner des formes de base : les rectangles, les cercles et les ellipses, les lignes et les polygones.
Pour dessiner un rectangle, on utilise la balise rect qui a quatre attributs :
Dessinons un rectangle de 100 pixels de longueur et 40 de hauteur, décalé de 50 pixels vers le bas et vers la droite :
En XML, on peut inclure des commentaires entre <!-- et -->, à condition qu’il n’y ai pas plus d’un tiret
consécutif à l’intérieur. Par exemple :
<!-- ceci-est-un-commentaire -->
est valide mais pas
<!-- ---------- commentaire --------- -->
Avec l’exemple précédent, on obtiens…
… un rectangle noir pas superbement beau . Mais avant de lui mettre de la couleur, schématisons ce qui s’est passé :
Notre rectangle de largeur 100 pixels et de hauteur 40 pixels a subi une translation qui l’a déplacé de 50 sur l’axe des abscisse et
celui des ordonnées. Vous avez sans doute remarqué que nous n’avons pas spécifié l’unité : dans ce cas on considère que ce sont des
pixels.
Pour l’habiller, il faut utiliser l’attribut style. On va voir trois propriétés CSS : fill,
stroke et stroke-width.
Pour écrire du style en ligne, on doit utiliser la syntaxe suivante :
balise style="propriété1:valeur1;propriété2:valeur2;propriétén:valeurn"
Pour la couleur, on peut utiliser les mots-clefs, par exemple :
fill:red;
ou alors la notation rgb :
fill:rgb(125,125,125);
fill:rgb(10%,70%,27%);
ou encore la noatation hexadecimale :
fill:#ffa14e;
Visitez les cours du siteduzero pour de plus amples
explications.
On peut donc décorer nos rectangles :
Une petite remarque : je n’utilise quasiment que les mots clefs CSS dont voici la liste.
Quand on ne veut pas que notre forme soit remplie, on met fill:none;. none est un mot-clé CSS qui signifie « sans ». On n’a pas besoin de faire de même avec stroke puisqu’aucune bordure n’est dessinée si rien n’est indiqué. La taille d’une bordure peut bien sur être précisée avec les différentes unités citées plus haut.
Vous avez sans doute remarqué que les rectangles se superposent selon l’ordre dans lequel ils sont placés dans le code XML. En SVG, il n’existe pas de propriété CSS qui contrôle la superposition des éléments comme la propriété z-index qui permet de définir l’orde de superposition de blocs XHTML par exemple.
On aimerait avoir des coins arrondis. C’est possible grâce aux attributs rx et ry. Les valeurs de ces attributs doivent être comprises entre 0 et la moitié de la taille du côté. rx agit bien évidemment sur les deux côtés width et ry sur les deux côtés height.
Voici la source :
Vous avez remarqué que plus les attributs rx et ry sont grands, plus la « courbure » du « coin » est grande. Au contraire, si on veut faire des coins armonieux, il vaut mieux mettre la même valeur pour ces deux attributs (c’est le premier rectangle bleu-violet). D’ailleurs, si on ne spécifie que rx, ry prend la même valeur et vice versa. Vous avez sans doute vu que le dernier rectangle (en bas à gauche) ressemble plutôt à une ellipse ! La balise rect peut être utilisée pour faire des ellipses, mais il y a plus simple : c’est ce qu’on va voir maintenant !
Vous allez être surpris, mais pour peindre nos formes, on utilise les mêmes attributs. Ainsi, le cercle ne déroge pas à la règle
et on peut le remplir avec fill, colorer sa bordure avec stroke
et l’épaissir à souhait avec stroke-width.
Pour dessiner un cercle, on utilise la balise circle. Elle doit avoir trois attributs :
Simplissime, n’est il pas ?
N’oubliez pas de commenter votre code, sinon vous risquez de ne plus savoir où est la balise truc qui affiche le machin de…
Bref des commentaires bien placés vous éviterons de devoir replonger entièrement dans votre code quand vous voudrez le modifier
(cette remarque est d’ailleurs valable pour tous les langages de programmation).
Comme vous les voyez, tracer un cercle n’oppose pas vraiment de difficulté : on le rempli avec fill
pour obtenir un disque, sinon, si on ne veut qu’un cercle, on met fill:none; et on met des valeurs
à stroke et à stroke-width. Heureusement pour nous, il existe
d’autres propriétés CSS tout aussi intéressantes, dont fill-opacity.
fill-opacity sert à indiquer l’opacité de la couleur de remplissage d’une forme. On lui donne une
valeur comprises entre 0 et 1, 1 signifiant opaque et 0 transparent. Par défaut, cette valeur est fixée à 1.
Notez que si j’ai mis une valeur plus basse pour le jaune, c’est parceque l’œil humain le « voit » beaucoup mieux.
Maintenant que nous savons tracer des cercles, intéressons nous aux ellipse. C’est sensiblement la même chose, sauf qu’on utilise la balise ellipse. Elle requiert quatre attributs :
Notez que comme pour le cercle, si cx et/ou cy ne sont pas renseignés, ils prennent zéro comme valeur. Voici le schéma d’une ellipse :
Maintenant, un petit mot à propos de la bordure. Vous remarquez sans doute que les lignes rx et ry ne s’arrêtent pas au bord
intérieur de la bordure verte, mais au milieu. En fait, la longueur stroke-width est dessinée
également de part et d’autre de la bordure. Par exemple, si on met stroke-width:10px;, il y aura
5 pixels de chaque côté de la bordure.
De la même manière qu’on peut régler l’opacité de la couleur de remplissage grâce à
fill-opacity, il existe une propriété pour faire de même avec les bordures : c’est
stroke-opacity. Comme pour fill-opacity, sa valeur doit être
comprise entre 0 et 1 et est, par défaut, réglée à 1. La propriété opacity permet quant à elle
de définir d’un seul coup l’opacité de toute la forme, bordure comprise.
On peut facilement dessiner un point avec un élément circle, en lui mettant un petit rayon, et c’est d’ailleurs la meilleur manière de le faire. Maintenant, passons aux lignes…
Pour dessiner un ligne, on utilise la balise line qui a besoin de quatre attributs :
Une ligne n’a pas de couleur de remplissage (fill) et si le viewer d’Adobe en dessine, c’est une erreur !
Dans cet exemple, on a mis fill:none; juste pour corriger le bug du viewer d’Adobe, mais ce n’est normalement pas nécessaire.
Ici, on a tracé des lignes continues, mais SVG est aussi capable de tracer des lignes pointillées. Pour cela, on utilise la
propriété CSS stroke-dasharray. Sa valeur doit être un liste d’entiers positifs supérieurs à 0
séparés par des espaces blancs ou des virgules.
Par exemple : stroke-dasharray:5px,10px,3px,10px;
Dans cet exemple, il y aura un trait de 5 pixels, un blanc de 10 pixels, un trait de 3 pixels puis un blanc de 10 pixels. Ce motif
sera répété jusqu’au bout de la ligne. On peut bien sur mettre d’autres unités ou ne pas en mettre du tout, ce qui revient à
mettre des pixels. Si la liste est impaire, elle est doublée pour qu’elle deviennent paire. Par exemple :
stroke-dasharray:3 2 7;
devient
stroke-dasharray:3 2 7 3 2 7;.
On peut demander à SVG de « décaler » le début du motif grâce à la propriété stroke-dashoffset. Par défaut, sa valeur est 0.
Il existe aussi une propriété qui permet de spécifier l’apparence des extrémités d’une ligne. Il s’agit de la propriété stroke-linecap. Elle peut prendre trois valeurs :
Les lignes noires représentent les lignes d’origine.
Ces propriétés sont bien sur utilisables avec les autres formes que nous avons déjà vu, sauf stroke-linecap qu ne s’applique que sur des formes qui ont des extrémités ouvertes.
Derrière l’appelation « lignes polygonales » se cache en fait une suite de segments, tout simplement. C’est la balise polyline qu’on utilise et elle n’a besoin que d’un attribut : points qui contient une liste de couples de points qui délimitent notre ligne polygonale. Ces couples peuvent être séparés par des espaces blancs ou des virgules. Par exemple :
Pour le premier polyline, il n’y a pas de style. La forme est donc remplie automatiquement. Comme ce n’est pas, en général, l’effet recherché, on supprime le remplissage en écrivant fill:none; (second polyline). Ensuite, les différents segments se comportent comme des line, c’est à dire qu’on peut utiliser les différentes propriétés CSS vues plus haut (troisième polyline).
Les « coins » entre deux segments ne sont pas très agréable à l’œil : ce sont des carrés. On aimerais les arrondir : c’est possible avec la propriété CSS stroke-linejoin. Elle peut prendre trois valeurs :
Quand la rencontre de deux segments forme un angle aigu et que la valeur de stroke-linejoin est mitter (qui est la valeur par défaut), il est possible d’étendre la jointure avec la propriété stroke-miterlimit. Par défaut, sa valeur est 4 mais elle peut varier de 1 inclu à l’infini.
Le support de cette propriété est buggé avec le viewer d’Adobe.
Passons aux polygones. En fait c’est quasiment la même chose, à deux différences près : un segment est automatiquement tracé entre le dernier point et le premier et on utilise l’élément polygon au lieu de polyline. C’est tout !
Vous savez à peu près tout sur les formes de bases, mais sachez qu’il existe un élément générique qui permet de dessiner tout ce
qu’on a déjà dessiné, et bien plus encore… … mais de
manière bien plus compliqué.
Jusqu’à maintenant, on ne peut pas vraiment dessiner nos formes dans tous les sens. C’est possible avec ce que nous allons étudier
maintenant : les transformations.
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.