Les formes de base en SVG

Comme nous l’avons vu dans l’article précédent de cette série consacrée au format vectoriel SVG (Scalable Vector Graphics), ce langage basé XML décrit des graphiques vectoriels à deux dimensions.
S’il est bien plus simple d’utiliser un logiciel de dessin plutôt que de coder soi-même, nous allons quand même nous intéresser aujourd’hui à quelques formes de base en SVG, histoire de mettre notre nez dans le moteur et de voir un peu à quoi ça ressemble !

La grille

Le SVG utilise un système de coordonnées (x,y) classique. Le coin haut gauche du document correspond au point d’origine (0,0). Les positions sont mesurées en pixels depuis ce point, vers la droite pour les x positifs et vers le bas pour les y positifs.

Exemple:

Un élément

<rect x="0" y="0" width="100" height="200" />

Les formes de base en SVG

Il existe plusieurs formes de base utilisées dans nombre de dessins SVG. Les noms des éléments sont en général très clairs. Quelques attributs déterminant leurs positions et tailles sont évoquées ici, sans que notre description soit forcément exhaustive. Ceci n’est qu’une présentation succincte de ces formes les plus répandues.

Enveloppe <svg>

Ceci est l’élément enveloppant les différentes formes. SVG étant un basé sur du XML, il est nécessaire de déclarer le namespace de notre élément SVG. Nous aurons donc quelque chose comme ceci :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
     <!-- ici, le bazar SVG... -->
</svg>

Bien d’autres attributs peuvent être déclarés, mais pour l’instant, contentons nous de nous intéresser aux 3 suivants :

1. Width : représente la largeur dans le système de coordonnées,
2. Height : représente la hauteur dans le système de coordonnées,
3. View box : permet de spécifier qu’un ensemble graphique  stretch to fit a particular container element. La valeur de l’attribut viewBox est une liste de 4 nombres,  min-x, min-y, width et height.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="400px" height="300px" viewBox="0 0 400 300" >
     
</svg>

<rect x="60" y="5" rx="5" ry="10" width="230" height="100"/>

Cercle <circle>

Pour le cercle, les attributs cx et cy définissent la position du centre et r son rayon.

<circle cx="175" cy="70" r="55"></circle>

Ce qui donnera ceci :

<!—->

Ligne <line>

Il s’agit ici de lignes droites : les attributs x1 et y1 définissent la position de la première extrémité et x2 et y2 celle de la seconde.

<line x1="10" y1="10" x2="150" y2="150"/>

Ce qui donnera ceci :

<!– –>

Polygone <polygon>

Dans le polygone, tous les points sont déclarés les uns à la suite des autres dans l’attribut ‘points’, abscisse puis ordonnée, chacun d’entre eux étant séparé par une virgule. Le chemin se ferme automatiquement en retournant au point de départ, créant une forme fermée.

<polygon points="0 0, 50 20, 100 0, 150 40, 60 120, 0 100" />

Ce qui donnera ceci :
<!—->
Notons que l’on peut créer un rectangle en utilisant <polygon>.

Chemin <path>

Avec cet élément très générique, il est possible de dessiner des rectangles, des cercles, des ellipses, des polygones, des lignes… Les coordonnées sont décrites dans l’attribut d.

Chaque lettre correspond à une manière de rejoindre le point suivant, si elle est en majuscules, les coordonnées sont absolues, en minuscules, elles sont relatives.

M x y – définit un point de coordonnées x-y,
L x y – dessine une ligne depuis notre position courante vers le point de coordonnées x-y,
H x – dessine une ligne horizontale vers l’abscisse x,
V y – dessine une ligne verticale vers l’ordonnée y,
Z – ferme le chemin.

<path d="M 0 0 H 250 V 150 H 0 Z"/>

Ce qui donnera ceci :

<!—->

Un peu de style ?

Maintenant, stylons un peu tout ça, si vous voulez bien, car c’est un peu tristounet pour l’instant. Il y a tout un tas de choses que l’on peut contrôler, voici les plus communes :

fill : la couleur de remplissage de l’élément,
fill-opacity : l’opacité de la couleur de remplissage,
stroke : la couleur du tracé de l’élément,
stroke-width : la largeur du tracé,
stroke-opacity : l’opacité de la couleur du tracé…

Avant toute chose, ajoutons une classe à notre cercle pour pouvoir l’utiliser dans notre CSS, puis stylons un peu ce cercle :

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" >
  <circle class="circle" cx="100" cy="100" r="90" fill="#3399cc" stroke="#333333" stroke-width="5"/></circle>
</svg>

<!—->

Et ensuite ?

Pour voir la liste complète des éléments possibles en SVG, et en avoir la description, vous pouvez consulter la liste établie par Mozilla.

Pour se faciliter la tâche, nous verrons dans le prochain article de cette série comment créer un dessin SVG via Illustrator.