Le clonage sous Inkscape

Vous connaissez le drapeau de l'Union Européenne. Ce drapeau est complexe : un fond bleu avec 12 étoiles réparties régulièrement sur un cercle.
Donc vous pensez créer une étoile puis la dupliquer 12 fois (Ctrl+D 12 fois). Oui, mais si vous rendez compte que l'étoile n'est pas satisfaisante. Vous allez devoir modifier les 12 formes ... Donc vous allez passer beaucoup de temps pour un résultat hasardeux.

Comme dit le proverbe "Sans méthode la pensée erre et l'action tatônne ! ".

La bonne méthode ici consiste à créer un modèle et de le copier 11 fois ; dans le jargon Inkscape on parle de clonage.
Il ne s'agit pas de copies ordinaires. Les copies sont dépendantes de l'original.
Toute modification du modèle sera répercutée au niveau des copies !

La réalisation du drapeau de l'UE

La procédure

Ci-dessous le drapeau de l'Union Européenne : image SVG

Tests

Attention la légende de l'icône "créer un clone" induit en erreur. Elle devrait être "créer un modèle" (que l'on peut ensuite cloner (c'est à dire créer une copie identique au modèle).

Le problème parfois est de retrouver l'original...

Si vous ne savez plus quel est l'original (le modèle) il y a une procédure pour le retrouver.
Il suffit de sélectionner une des étoiles et de produire la commande : Edition/cloner/sélectionner l'original ; c'est alors le modèle qui est activé (sélectionné).

Il est possible de supprimer le lien de dépendance entre une copie et son modèle. Il suffit d'activer une copie et de produire la commande :Edition/cloner/délier le clone .

Code SVG généré par Inkscape

Attention le code SVG généré par le clonage est totalement différent de celui résultant d'une copie simple de la forme.
Dans le premier cas le code SVG sera beaucoup plus succinct. En effet à l'occasion du clonage il y a génération d'une instruction très courte basée sur la balise use alors que dans le cas d'une duplication normale il y copie de tout le code correspondant à la forme originale.
Donc il faut priviligier le clonage (par rapport à une simple copie de forme) pour optimiser le code.

Essai

Produisez rapidement le dessin ci-dessous en créant un modèle puis en le clonant N fois. image SVG

Il faut donc d'abord produire le modèle : un carré de 60 par 60 converti en chemin puis afin de transformer les quatre segments en courbes.
Ensuite dessinez un rectangle rempli de jaune de 480 par 300 (480 et 300 sont des multiples de 60).
Cloner le modèle N fois dans le rectangle jaune !

Le code généré par Inkscape

"Jetons un oeil" sur le code généré par le logiciel Inkscape !

<path style="fill:#808000;fill-opacity:1;stroke:none" d="m 0,100 c 16.980061,13.0864 36.365204,15.75078 ... id="rect3839" ... ... <use xlink:href="#rect3839" y="0" x="0" transform="translate(100,48)" width="800" height="600" /> <use xlink:href="#rect3839" y="0" x="0" transform="translate(220,48)" width="800" height="600" /> ...

Ceux qui ont étudié attentivement mon tutoriel "dessiner avec SVG" (dans le même site) ne sont pas étonnés par la syntaxe.

Le modèle est ici le chemin identifié rect3839 (au départ c'était un rectangle).

Grâce à la balise use on duplique le modèle et on le positionne (ici avec l'attribut transform:translate)

Il faudrait maintenant que l'original n'apparaisse plus dans le document comme ci-dessous. image SVG

Avez vous trouvé ?

C'est très simple. Il suffit d'inclure le code correspondant au chemin identifié rect3839) dans le conteneur defs. En effet tout objet défini à l'intérieur de ce conteneur n'est pas affiché.

Travail pratique

Grâce à vos connaissances sur les chemins et le clonage vous devez réaliser en quelques minutes la tête de mort. image SVG

Je suis gentil je vous mets sur la voie ...

La démarche

Et voilà c'est terminé !

Extrait du code de "tete_mort.svg"

... <rect ... id="rect3353" width="20 height="20" x="340" y="812" /> <use x="0" y="0" xlink:href="#rect3353" /> <use x="0" y="0" xlink:href="#rect3353" transform="translate(0,20.08658)" /> ...

Le carré blanc est le rectangle (balise rect) identifié "rect3353".
Ce modèle est ensuite cloné N fois grâce à N instructions basées sur la balise use et l'attribut xlink:href.
Retour menu