Inkscape : symboles, motifs & découpes

Dans la partie DEFS d'un document SVG on peut trouver des déclarations de dégradés mais aussi de symboles, de motifs, de découpes et de masques.

Symboles

Définir un symbole c'est créer un modèle qui pourra être dupliqué.
Mais surtout toute modification du symbole sera répercutée sur les copies ; on parle alors de clonage !
Le modèle est un objet (une forme, un chemin) ou un groupe d'objets.

Utiliser les symboles prédéfinis

Les dernières versions de Inkscape proposent une galerié impressionnante de symboles prédéfinis.

il suffit de produire la commande "Objet/symbole" et de choisir une liste de symboles
il faut ensuite faire un "drag & drop" N fois du symbole retenu vers le canevas

Document Inkscape avec clonage de symboles prédéfinis

Le rendu

On a cloné N fois deux symboles prédéfinis : "mail" & "avion".

Le code SVG de ce document (extrait)

...
<defs>
  <symbol id="AigaSymbols.svg:Mail">
   <title>Mail</title>
   <g fill="none" stroke-width="4">
    <path d="m10 55h51v-38h-51z"/>
    <path d="m11 18 22 23c2 2 4 2 6 0.01l22-23"/>
    <path d="m12 54 17-17"/>
    <path d="m60 54-17-17"/>
   </g>
  </symbol>
  <symbol id="AigaSymbols.svg:AirTransportation">
   <title>Air Transportation</title>
   <path d="m39 10v18l25 15v7l-25-9v14l6 4v6l-9-3-9 3v-6l6-4v-14l-25 9v-7l25-15v-18a3 3 0 0 1 6 0z"/>
  </symbol>
</defs>
<g fill="#000000" stroke="#000000">
  <use transform="matrix(.7 0 0 .7 546 233)" xlink:href="#AigaSymbols.svg:Mail"/>
  <use transform="matrix(1 0 0 2 512 282)" xlink:href="#AigaSymbols.svg:Mail"/>
  <use transform="matrix(1 0 0 2 435 346)" xlink:href="#AigaSymbols.svg:Mail"/>
  <use transform="matrix(1 0 0 1 121 57)" xlink:href="#AigaSymbols.svg:AirTransportation"/>
  <use transform="matrix(1 0 0 2 58 211)" xlink:href="#AigaSymbols.svg:AirTransportation"/>
  <use transform="matrix(1 0 0 1 225 56)" xlink:href="#AigaSymbols.svg:AirTransportation"/>
</g>
...

Notez dans la partie DEFS la reprise des deux symboles prédéfinis.
Notez le clonage de ces symboles grâce aux instructions USE.

Créer ses propres symboles

Vous pouvez sous Inkscape définir vos propres symboles (modèles à cloner);

Ci-dessous une document Inkscape avec définition d'un symbole perso et clonage de ce symbole.

La procédure

j'ai dessiné un grand cercle sans remplissage
j'ai dessiné dans ce grand cercle deux petits cercles plein ainsi qu'une ellipse
j'ai groupé toutes ces formes.
j'ai afficher le volet "symboles" (Objet/symboles)
J'ai sélectionné le groupe
dans la boite de dialogue "symboles" j'ai appuyé sur le + (tout en bas du volet) pour "convertir la sélection en symbole" .Mon smiley apparait alors dans la liste des symboles du documen en cours.
Je n'ai plus qu'à effectuer des "glisser-déposer" de la boite "symboles" vers la zone de dessin.

Le code SVG produit (extraits)

Je l'ai aussi simplifié en supprimant les attributs inutiles. ... <defs> <symbol id="g5"> <ellipse cx="146" cy="129" rx="79" ry="76" fill="none" stroke="#000" stroke-width="2"/> <g> <ellipse cx="115" cy="108" rx="11" ry="11" fill="#000"/> <ellipse cx="178" cy="108" rx="11" ry="11" fill="#000"/> <ellipse cx="144" cy="170" rx="24" ry="8" fill="#000"/> </g> </symbol> </defs> <g> <use transform="matrix(.8 0 0 .8 277 -5)" xlink:href="#g5"/> <use transform="matrix(.8 0 0 .8 192 132)" xlink:href="#g5"/> <use transform="translate(361 92)" xlink:href="#g5"/> <use transform="matrix(.8 0 0 .8 51 -6)" xlink:href="#g5"/> </g> ...

J'ai du oublier d'appuyer sur CTRL lorsque j'ai dessiné les cercles ...

Modifiez le symbole

Via un éditeur modifiez la première instuction ELLIPSE :
<ellipse cx="146" cy="129" rx="79" ry="79" fill="yellow" stroke="red" stroke-width="2"/ >

Sauvegardez les modifications.
Affichez de nouveau le document SVG dans le navigateur. Les smiley sont désormais jaunes avec un contour rouge.

Il doit être possible de modifier un symbole personnel directement sous Inskcape (comme c'est possible sous Boxy SVG) mais je n'ai pas trouvé l'info ...

Les motifs

On désigne par motif ou "pattern" un objet (ou un groupe d'objet) qui peut être répété N fois pour remplir un autre objet ou le canevas.
Si vous encodez manuellement il faut utiliser la balise PATTERN dans la partie DEFS puis il faut appeler ce motif via l'attribut fill de l'élément cible.

Inkscape et les motifs

Inkscape propose une multitude de motifs.

créer un nouveau document
dessiner une forme et dans le volet "Fond et contour" sélectionnez "motif"
Choisissez un motif

Ci-dessous un document Inkscape produit en une minute :

Le code SVG généré

 <defs>
  <pattern id="pattern7" patternTransform="scale(.25)" xlink:href="#Bricks"/>
  <pattern id="Bricks" width="100" height="100" fill="#000000" patternTransform="scale(.25)" patternUnits="userSpaceOnUse">
 ...
 </defs>
<g>
  <rect x="31" y="40" width="473" height="319" fill="url(#pattern3)"/>
  <rect x="544" y="199" width="281" height="289" fill="url(#pattern5)"/>
  <rect x="76" y="397" width="426" height="172" fill="url(#pattern7)"/>
</g>
...

On retrouve les balises PATTERN dans DEFS et les attibuts fill="url(#ID_du_motif)" dans chaque forme remplie avec un motif.

Créer et appliquer un motif perso

Ci-dessous j'ai appliqué un motif perso à un rectangle.

Création du motif perso

j'ai dessiné deux rectangles remplis de noir qui se croisent
j'ai groupé les deux formes
j'ai produit la commande Objet/Motif/Objet en motif

J'ai ainsi créé un nouveau motif dans le document qui apparait dans le volet "Fond & contour/
Il suffit ensuite de dessiner un rectangle et d'appliquer le motif.
Ensuite j'ai supprimé le groupe, source du motif.

Les découpes d'images

Vous voulez qu'une image soit rognée (on dit aussi "détourée") par une ellipse ou un losange ou une autre forme, il faut procéder à une découpe.
La découpe peut correspondre à une forme simple ou un groupe de forme ; par exemple un cercle et un triangle pour produire un trou de serrure.
Si vous encodez manuellement vous dévez definir un modèle de découpe via la balise clipPath dans la partie DEFS.

Inkscape et les découpes d'images

importez une image
redimensionnez cette image
dessinez un cercle ou une ellipse au dessus
sélectionnez les deux objets (restez appuyé sur la touche "shift")
Faites un clic droit et sélectionnez "définir une découpe"

Exemple de document Inkcape avec des images détourées

Extrait du code SVG généré

...
<defs>
  <clipPath id="clipPath1">
   <ellipse cx="149" cy="101" rx="146" ry="98" fill="none" stroke="#000" stroke-width="1.3"/>
  </clipPath>
  <clipPath id="clipPath2">
   <rect transform="matrix(.67 .74 -.62 .79 0 0)" x="449" y="-276" width="170" height="165" fill="none" stroke="#000" stroke-width=".93"/>
  </clipPath>
</defs>

  <image  x="-.49" y="-.32" width="296" height="199" clip-path="url(#clipPath1) ... />
  <image x="357" y="116" width="247" height="281" clip-path="url(#clipPath2)" .... />
 ...

Notez la balise double CLIPPATH contenant à chaque fois une forme.
Ici il y a deux élémnents CLIPPATH puisque deux découpes sont définies.
Les formes de détourage sont insérées dans la partie DEFS ; aussi elles n'apparaissent plus dans le canevas.

La découpe d'image peut être un groupe de formes

Ci-dessous une image détourée par un trou de serrure (un rond et un rectangle juxtaposés) :

Comment faire ?

Après avoir importé l'image via Inkscape, j'ai décidé d'encoder manuellement le détourage afin de vous montrer que le code est en fait très simple.

Le code obtenu

Le document pèse 1 KO ... <svg version="1.1" viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clipPath id="trou_serrure"> <circle cx="50%" cy="200" r="150" /> <polygon points ="300,300 600,300 600,600 300,600" /> </clipPath> </defs> <g> <image x="233" y="26" width="400" height="517" clip-path="url(#trou_serrure)" preserveAspectRatio="none" xlink:href="seins_nus.jpg"/> </g> </svg>

Observez attentivement le contenu du conteneur CLIPPATH !
J'ai du aussi modifier la valeur de l'attribut xlink:href de la balise IMAGE car le chemin était indiqué en absolu.
J'ai du aussi rajouter l'attribut clip-path de la balise IMAGE.

Les masques

L'outil "mask" est très proche de l'outil "clipPath" : rognage de l'image mais aussi transparence de l'image.
Ci-dessous une image bénéficiant d'un masque :

J'ai défini un masque avec une transparence de 50%.

La procédure pour produire un masque

importer une image et redimensionner
dessiner une ellipse en dehors de l'image
remplir l'ellipse avec du blanc à demi transparent (opacité de 50%) et supprimer le contour
Déplacer l'ellispe au dessus de l'image
Sélectionnez l'image et l'ellipse et produire la commande "Objet/Masque/Définir un masque

Le code obtenu

...
<defs>
  <mask id="mask1" maskUnits="userSpaceOnUse">
   <ellipse cx="317" cy="291" rx="155" ry="256" fill="#fff" opacity=".5"/>
  </mask>
</defs>
<image x="155" y="38" width="322" height="514" mask="url(#mask1) ... ">
...

le conteneur MASK dans DEFS
les attributs fill & opacity dans la balise ELLIPSE
l'attribut mask dans la balise IMAGE

Traduction

Tutoriel Inkscape & Boxy - sommaire

Inkscape

Boxy SVG

Problèmatiques communes à Inkscape & BoxySVG

Tutoriel Inkscape & Boxy - recherche

L'auteur : Patrick Darcheville

Inkscape : symboles, motifs & découpes

Symboles

Utiliser les symboles prédéfinis

Document Inkscape avec clonage de symboles prédéfinis

Le rendu

Le code SVG de ce document (extrait)

Créer ses propres symboles

La procédure

Le code SVG produit (extraits)

Modifiez le symbole

Les motifs

Inkscape et les motifs

Le code SVG généré

Créer et appliquer un motif perso

Création du motif perso

Les découpes d'images

Inkscape et les découpes d'images

Exemple de document Inkcape avec des images détourées

Extrait du code SVG généré

La découpe d'image peut être un groupe de formes

Comment faire ?

Le code obtenu

Les masques

La procédure pour produire un masque

Le code obtenu