Dessiner avec SVG - sommaire

SVG : définition d'un modèle et clonage de ce modèle

Pour définir un modèle d'objet (sans le dessiner) il faut utiliser les éléments defs & g OU symbol
Pour cloner ce modèle il faut utiliser la balise use

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.

Inkscape et le clonage

Lorsqu'au niveau d'un document Inkscape vous demandez le clonage d'une forme (ou d'un groupe de formes), le logiciel va générer du code basé sur l'élément USE.

Exemple

Dans un document Inkscape j'ai dessiné une étoile à cinq branches et je veux cloner cette forme 5 fois.

Le code SVG généré

Notez les cinq instructions basées sur l'élément USE.

Pour en savoir plus

Cloner des objets avec Inkscape