Dessiner avec SVG - sommaire

Balises use, defs, use & symbol du langage SVG

Définir un modèle et utiliser ce modèle

Nous devons dessiner 4 carrés identiques : 100 par 100 avec une bordure de 5 bleu marine ; seule la couleur de fond change.

Première solution

Extrait du code (canevas de 400 par 400) : ... <rect x="100" y="100" width="100" height="100" stroke ='navy' stroke-width ='5' fill="olive" /> <rect x="200" y="100" width="100" height="100" stroke ='navy' stroke-width ='5' fill="green" /> <rect x="100" y="200" width="100" height="100" stroke ='navy' stroke-width ='5' fill="lime" /> <rect x="200" y="200" width="100" height="100" stroke ='navy' stroke-width ='5' fill="lime" fill-opacity ='0.5' />

Le code est très redondant.

Deuxième solution : le clonage

Extrait du code correspondant : ... <defs> <rect id="carre" width="100" height="100" stroke ='navy' stroke-width ='5' /> </defs> <use xlink:href="#carre" x="100" y="100" fill="olive" /> <use xlink:href="#carre" x="200" y="100" fill="green" /> <use xlink:href="#carre" x="100" y="200" fill="lime" /> <use xlink:href="#carre" x="200" y="200" fill="lime" fill-opacity ='0.5'/>

J'ai utilisé la balise defs pour définir une modèle de forme : un carré de 100 par 100 borduré de bleu marine.
Puis j'emploie la balise use pour dessiner à partir de ce modèle (clonage).
Il faut identifier le modèle ; ici #carré.
Ainsi la valeur de l'attribut xlink:href de la balise use devient : "#carre".

Le clonage : une duplication dynamique

Si je redéfinis le modèle idéntifié "carré" dans la définition, les copies sont automatiqument modifiées.

Créer des groupes de formes

On peut créer des modèles composés chacuns de plusieurs formes de base.

Le code correspondant

Définition des modèles

On définit en guise de modèles deux groupes de formes.
Notez l'emploi de l'élément G pour créer des groupes de formes.

Clonage des modèles

La balise use dessine des copies fidèles du modèle. On dit que l'on procéde à un clonage. <use xlink:href="#maison" x="0" y="0" /> <use xlink:href="#arbre" x="100" y="0" /> <use xlink:href="#maison" x="200" y="0" /> <use xlink:href="#arbre" x="300" y="0" /> <use xlink:href="#maison" x="400" y="0" /> <use xlink:href="#arbre" x="500" y="0" />

La balise symbol

Pour créer un modèle (sans le dessiner) composé d'un groupe de formes basiques on a utilisé la balise G à l'intérieur du conteneur defs mais il y a une autre solution plus simple.
Sachez que la balise symbol remplace avantageusement les deux balises précitées.

Exemple

Ci-dessous une image de 800 par 600 avec un modèle "homme" et un modèle "femme"

Le code SVG correspondant

Définition des modèles

Pour chaque modèle on crée une zone de dessin de 100 par 100 avec l'attribut viewbox.
Les coordonnées des formes constitutives du modèle sont donc désormais indépendantes du canevas SVG mais liées au viewBox associé à la balise symbol.
L'homme et la femme sont identiques sauf que chez la femme l'ellipse (tronc) est remplacée par un polygone (triangle symbolisant une robe).

Clonage des modèles

Si un modèle est défini avec la balise symbol, les attributs width & height sont alors obligatoires au niveau de la balise use.