SVG : clonage, motifs, découpes, masques & marqueurs

Pour définir un objet (sans le dessiner) il faut que sa description soit dans la partie DEFS du document SVG.

la définition des filtres : balise FILTER
la définition des modèles à cloner : balise SYMBOL
la définition des dégradés : balises LINEARGRADIENT et RADIALGRADIENT
la définition des motifs : balise PATTERN
la définition des découpes : balise CLIPPATH
la définition des masques : balise MASK
la définition des marqueurs : balise MARKER

Dans ce chapitre je vais évoquer les modèles à cloner, les motifs, les découpes, les masques et les marqueurs.
En effet j'ai évoqué les dégradés dans le chapitre précédent et je consacre un chapitre entier aux filtres.

Définir un modèle à cloner 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 et donc maladroit !

Deuxième solution : définir un modèle et le cloner

Extrait du code correspondant : ... <defs> <rect id="carre" width="100" height="100" stroke ='navy' stroke-width ='5' /> </defs> <use href="#carre" x="100" y="100" fill="olive" /> <use href="#carre" x="200" y="100" fill="green" /> <use href="#carre" x="100" y="200" fill="lime" /> <use 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.
Ce premier carré ne sera pas dessiné puisqu'il est contenu dans DEFS.
Puis j'emploie la balise use pour dupliquer N fois ce modèle via l'attribut href

L'attribut href remplace xlink:href ; ce dernier attribut est désormais obsolète.

Le clonage : une duplication dynamique

Le clonage n'est pas une simple duplication d'un objet.
Si je redéfinis le modèle ; les copies (clones) sont automatiqument modifiées comme vous le constatez ci-dessous.
Il y a donc un lien entre l'original et les copies (les clones).

J'ai modifié la définition de l'objet RECT dans la partie DEFS (suppression contour, coins arrondis).
Les clones sont actualisés ! <defs> <rect id="carre2" width="100" height="100" rx ="10" /> </defs> <desc>Duplication du modèle </desc> <use href="#carre2" x="100" y="100" fill="olive" /> ...

Clonage : cloner un groupe d'objets

Un modèle à cloner peut être un groupe d'objets.

Le code SVG

Deux parties : définition des modèles à cloner puis les clonages.

La partie DEFS

<defs>
<g id = 'arbre'>
	<rect x ='45' y ='60' width = '10' height = '30' fill = 'marroon' />
	<circle cx = '50' cy = '40' r = '35' fill = 'green'	/>
</g>
<g id="maison">
	<rect x ='60' y = '10' width = '10' height = '40'  fill = 'white'/>  
	<circle  cx = '50' cy = '50' r="30" fill = 'red' />
	<rect x = '20' y = '50' height ='30' width = '60' fill = 'white' />
	<rect x = '30' y = '60' height ='10' width = '10' fill = 'black' />
	<rect x = '50' y = '60' height ='20' width = '10' fill = 'black' />
</g>
</defs>

On définit en guise de modèles deux groupes de formes.
Notez l'emploi de l'élément G pour regrouper les 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 href="#maison" x="0" y="0" /> <use href="#arbre" x="100" y="0" /> ...

La balise symbol

Pour définir un modèle à cloner on peut utiliser une autre syntaxe : emploi du conteneur SYMBOL.
Tout objet dessiné dans SYMBOL ne sera pas affiché même s'il n'est pas contenu dans DEFS.

Exemple

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

Le code SVG

Là encore il faut distinguer la définition des modèles à cloner et les clonages.

Définition des modèles à cloner

...
<symbol id ="homme" viewbox ="0 0 100 100">
	<circle cx ="50" cy ="20" r ="10" />
	<polyline points ="30,30 50,40 70,30" />			
	<ellipse cx="50" cy ="50" rx ="5" ry="20" />
	<polyline points ="40,90 50,70 60,90" />
</symbol>
<symbol id ="femme" viewbox ="0 0 100 100">
	<circle cx ="50" cy ="20" r ="10" />
	<polyline points ="30,30 50,40 70,30" />
	<polygon points ="50,30 60,70 40,70" />
	<polyline points ="40,90 50,70 60,90" />
</symbol>

Pour chaque modèle on crée une zone de dessin de 100 par 100 avec l'attribut viewbox.
Les coordonnées des objets constitutifs du modèle sont donc désormais indépendantes du canevas SVG mais liées au viewBox associé à la balise symbol.

Clonage des modèles

<use href ="#homme" width ="100" height ="100" 	x="0" 	y="0" />
<use href ="#femme" width ="100" height="100" 	x="200" y="0" />
<use href ="#homme" width ="100" height="100"   x="400" y="0" />
<use href ="#femme" width ="100" height="100"  	x="600" y="0"/>
<use href ="#homme" width ="50"  height="50" 	x ="0" 	y ="200"/>
<use href ="#femme" width ="200" height="200" 	x ="200" y="200"/>

Les motifs : la balise pattern

Nous allons voir maintenant que l'on peut remplir un objet avec un motif préalablement défini. Bref produire un fond tel un papier peint.

Un motif est une forme (ou groupe de formes) qui se répète dans toute l'objet cible pour le remplir entièrement.
Un motif peut être aussi une image importée (ou un groupe d'images).
Avant d'utiliser un motif pour remplir une zone du canevas SVG il faut bien entendu le définir.
Pour créer un motif il faut utiliser l'élément PATTERN dans la partie DEFS.

Motif basé sur un groupe de formes

Le code SVG

La définition des motifs

<defs>
	<pattern id="motif1" x="0" y="0"  patternUnits="userSpaceOnUse" width="50" height="50" >
		<ellipse fill='red'  cx="25" cy="20" rx="20" ry="15" />
		<circle  fill = 'olive'  cx="25" cy="20" r = '10' />
	</pattern> 
	<pattern id="motif2" x="0" y="0" patternUnits="objectBoundingBox" 	width="20%" height="25%">
		<ellipse fill='red'  cx="25" cy="20" rx="20" ry="15" />
		<circle  fill = 'olive'  cx="25" cy="20" r = '10' />
	</pattern> 
</defs>

Je définis deux motifs identifiés respectivement motif1 et motif2.
Notez les attributs de la balise pattern : patternUnits, width & height que j'appelle les attributs de répétition.

Ces deux motifs sont pratiquement identiques : une ellipse contenant un cercle.
La seule différence entre les deux motifs c'est au niveau des attributs de répétition :

Pour le premier motif nous avons pour ces trois attributs respectivement les valeurs :
userSpaceOnUse 50 50.
Ce qui veut dire que le motif sera répété tous les 50 pixels dans la zone cible.

Pour le deuxième motif et pour les mêmes attributs nous avons les valeurs :
objectBoundingBox 20% 25%.
Ce qui signifie que le motif sera dupliqué tous les 20% en largeur et 25% en hauteur.
Donc 5 fois en largeur et 4 fois en hauteur.

Le remplissage des formes avec ces motifs

	<rect x="0" y="0" width="400" height="200" 	fill = "url(#motif1)" stroke-width ='1' stroke ='black' />
	<rect x="400" y="0" width="400" height="200" fill = "url(#motif2)" stroke-width ='1' stroke ='black' />

Notez la valeur de l'attribut fill

Motif basé sur une image existante

Un motif peut être une image matricielle ou un groupe d'images !

Exemple

Le code SVG correspondant

<svg viewBox ="0 0 800 400" style = 'background : aqua' width ="100%" >
<defs>
	<pattern id="plongeur1" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
			<image x="0" y="0" width="100" height="100" href="../images/plongeur3.gif" />
	</pattern>
	<pattern id="plongeur2" x="0" y="0" width="25%" height="50%" patternUnits="objectBoundingBox" >
			<image x="0" y="0" width="100" height="100" href="../images/plongeur4.gif" />
	</pattern>
</defs>
<rect x="0" y="0" width="800" height="200" fill = "url(#plongeur1)"  stroke ="red" stroke-width ="2" />
<rect x="0" y="200" width="800" height="200" fill = "url(#plongeur2)" stroke ="red" stroke-width ="2" />
</svg>

motif "plongeur1" : motif de 100 par 100 ; répétition tous les 100px tant en hauteur qu'en largeur
motif "plongeur2 : motif de 100 par 100 avec répétition 4 fois en largeur et deux fois en hauteur

Le premier motif est utilisé pour remplir le rectangle haut du canevas et le deuxième motif l'est pour remplir le rectangle bas du canevas.

L'outil découpe : balise ClipPath

On peut souhaiter l'effet d'une image vue à travers un trou de serrure ou une paire de jumelles. Il faut alors effectuer un rognage / découpe / détourtage de l'image via une forme simple ou un groupe de formes.

Exemple 1

Découpe selon une forme simple.

Le code SVG correspondant

<svg width="50%"  viewBox="0 0 400 300"
	style ="box-shadow : 5px 5px 5px gray;"> 
	<title>Utilisation d’une découpe grâce à la balise clipPath</title> 
<defs> 
	<clipPath id="decoupe"> 
		<ellipse cx="50%" cy="50%" rx="200" ry = "150" /> 
	</clipPath> 
</defs> 
<image xlink:href="../images/chalets.jpg" width="400" height="300" 	clip-path  = 'url(#decoupe)'/> 
</svg>

Grâce au conteneur clipPath on définit ici une découpe simple (une ellipse) dans la partie DEFS.
Notez l'attribut clip-path de la balise IMAGE.

Exemple 2 : découpe selon un groupe de formes

La découpe peut être un groupe de formes.

Le code correspondant

Ci-dessous et pour info le code de ce fichier svg : ... <defs> <clipPath id="trou_serrure"> <circle cx="50%" cy="200" r="150" /> <polygon points ="250,200 150,500 350,500" /> </clipPath> </defs> <image xlink:href="../images/jolie_fille.jpg" width="500" height="600" clip-path = "url(#trou_serrure)" /> ...

Deux formes (un cercle et un polygone sont contenus dans la balise clippath.

Exemple 3 : un seul modèle de découpe s'appliquant à plusieurs images

Syntaxe

La balise clipPath a un attribut clipPathUnits qui définit le système de coordonnées.

userSpaceOnUse (valeur par défaut)
objectBoundingBox

Deux images rognées avec le même modèle de découpe

Le SVG correspondant

<svg ...>
<defs>
	<clipPath id="losange" clipPathUnits="objectBoundingBox">
		<polygon points="0.5 0, 1 0.5, 0.5 1, 0 0.5" />
	</clipPath>
</defs>
<image height="50%"  xlink:href ="../images/bikini4.jpg" x ="0" y="0"  clip-path="url(#losange)"  />
<image width="50%"  xlink:href ="../images/bikini2.jpg" x ="50%" y="50%"  clip-path="url(#losange)"  />
</svg>

C'est miraculeux ! Je définis une seule découpe que j'applique aux deux images alors qu'elles ont des paramètres géométriques (position et taille) différents.
Le miracle c'est l'attribut clipPathUnits="objectBoundingBox" qui précise que les coordonnées de la forme de découpe sont exprimées en relatif : par rapport aux coordonnées de l'image découpée et non pas par rapport au canevas.

Observez attentivement l'instruction polygon points="0.5 0, 1 0.5, 0.5 1, 0 0.5"
L'attribut points comprend quatre paires de X,Y. Ce qui indique les coordonnées relatives des angles du losange de découpe par rapport à l'image : le milieu du côté haut (x =0.5 et y =0), milieu du côté droit, milieu du côté bas et milieu du côté gauche.

L'outil masque : balise MASK

L'outil "masque" est très proche de l'outil découpe.
Cet outil permet de rogner l'image et en plus pour la partie visible de lui appliquer une certaine transparence.

Exemple

L'image apparait de façon transparente dans l'ellipse.

Le code SVG correspondant

<svg width="50%" viewBox ="0 0 500 600" style ="border : 1px solid black;"> 
<defs>
	<mask id="masque"> 
		<ellipse cx ="50%" cy ="50%" rx ="250" ry ="300" fill ="white" fill-opacity = 0.5 />
	</mask> 
</defs> 
	<image xlink:href="../images/jolie_fille.jpg" width="500" height="600" x="0" y ="0" mask = 'url(#masque)'/>
</svg>

Observez bien la balise IMAGE avec l'attribut mask.

Les marqueurs

L' élément marker est utilisé pour créer des marqueurs qui sont ensuite utilisés pour délimiter les segments d'un chemin.
Les marqueurs définis sont donc ensuite positionnées au niveau des noeuds.
Les marqueurs doivent bien sûr être au préalable définis donc décrits dans la partie DEFS.

Exemple

la ligne simple qui devient un vecteur avec un carré à l'origine et une flèche à la destination
un chemin (escalier) où pour chaque noeud un marqueur est dessiné ; il y a trois types de marqueurs : un carré pour le premier noeud, un rond pour les noeuds intermédiaires et une flèche pour le noeud final.

Le code correspondant

<svg viewBox ="0 0 300 300" width ="50%" style ="border : 1px solid navy; ">
<defs>
	<desc> Définit un rond en guise de marqueur</desc>
    <marker id="rond" markerWidth="10" markerHeight="10" refX="5" refY="5">
      <circle cx="5" cy="5" r="3" fill="navy" />
    </marker>
	
	<desc> Définit un carré en guise de marqueur</desc>
    <marker id="carre10" markerWidth="10" markerHeight="10" refX="5" refY="5" orient ="auto">
      <rect x="2" y="2" width ="6" height="6" fill="navy" />
    </marker>
	
	<desc> Définit une flèche en guise de marqueur</desc>
    <marker id="fleche" markerWidth="10" markerHeight="10" refX="5" refY="5" orient ="auto" >
      <path d="M 0 0 L 10 5 L 0 10 z" fill="navy" />
    </marker>
</defs>
<title>Utilisation des marqueurs dans deux objets</title>
  <desc>Une ligne simple avec marqueurs</desc>
  <line x1="50" y1="50" x2="250" y2="250" stroke="grey" stroke-width="3" 
		marker-start="url(#carre10)" marker-end="url(#fleche)" />
  
  <desc>dessiner un escalier : notation en relatif </desc>
   <path d="M 10,250 h100 v-100 h100 v-100 h80 " stroke="grey" stroke-width="2" fill ="none" 
		marker-start="url(#carre10)"  marker-mid ="url(#rond)" marker-end="url(#fleche)"/>
...

Dans la partie DEFS on définit les trois marqueurs.

marker

id : pour identifier de façon unique l'objet
markerWidth : la largeur de la zone de dessin du marqueur
markerHeight : la hauteur de la zone de dessin du marqueur
refX et refY : voir paragraphe "code buggé"
orient : voir paragraphe "code buggé"

Notez que les trois marqueurs sont définis dans une zone de 10 par 10.

Le plus simple pour expliquer les trois derniers attributs et de montrer le rendu lorsqu'ils sont absents.

line / path

markert-start : précise le type de marqueur pour le premier noeud
markert-mid : précise le type de marqueur pour le deuxième, troisième et avant dernier noeud
markert-end : précise le type de marqueur pour le dernier noeud

Un code "buggé"

Ci-dessous je vous montre par un contre-exemple l'intérêt des attributs refX, refY & orient
En effet dans ce code "buggé" ces attributs sont absents !

Le rendu est très moche !
Les marqueurs "flèche" et "carré" ne sont plus dans l'axe du segment.
Les marqueurs sont décalés par rapport au noeud car les valeurs par défaut de refX & refY sont zéro.

Extrait du code "buggé"

Faites attention aux identifiants des marqueurs !

Conseils pour définir des marqueurs

Si la zone de dessin du marqueur fait W par H pixels alors refX = W/2 et refY = H/2.
Pour les marqueurs autres que les ronds règlez l'attribut orient à "auto".

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins statiques

Animations SVG

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

SVG : clonage, motifs, découpes, masques & marqueurs

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

Première solution

Deuxième solution : définir un modèle et le cloner

Le clonage : une duplication dynamique

Clonage : cloner un groupe d'objets

Le code SVG

La partie DEFS

Clonage des modèles

La balise symbol

Exemple

Le code SVG

Définition des modèles à cloner

Clonage des modèles

Les motifs : la balise pattern

Motif basé sur un groupe de formes

Le code SVG

La définition des motifs

Le remplissage des formes avec ces motifs

Motif basé sur une image existante

Exemple

Le code SVG correspondant

L'outil découpe : balise ClipPath

Exemple 1

Le code SVG correspondant

Exemple 2 : découpe selon un groupe de formes

Le code correspondant

Exemple 3 : un seul modèle de découpe s'appliquant à plusieurs images

Syntaxe

Deux images rognées avec le même modèle de découpe

Le SVG correspondant

L'outil masque : balise MASK

Exemple

Le code SVG correspondant

Les marqueurs

Exemple

Le code correspondant

Un code "buggé"

Extrait du code "buggé"

Conseils pour définir des marqueurs