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 dégradés : balises LINEARGRADIENT et RADIALGRADIENT
la définition des filtres : balise FILTER
la définition des modèles à cloner : balise SYMBOL
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 dans le chapitre qui suit.

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 très 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> <desc>Clonage du modèle</desc> <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 et identifié "carre".
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 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 automatiquement modifiées comme vous le constatez ci-dessous.
Il y a donc un lien permanent entre l'original et les copies (les clones).

Je modifie le modèle : coins arrondis et plus de contour.
Les clones sont actualisés ! <defs> <rect id="carre" width="100" height="100" rx ="10" /> </defs> <desc>Duplication du modèle </desc> <use href="#carre" 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 dans ce code : définition des modèles puis clonage de ces modèles.

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.
Ces groupes de formes ne sont pas dessinés puisqu'ils sont à l'intérieur de DEFS.

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" /> ...

L'attribut est "xlink:href" mais le navigateur comprend désormais "href".

La balise symbol

Pour définir un modèle à cloner on peut aussi 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 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 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

La balise marker est utilisée pour créer des marqueurs (un carré, un rond, une flèche) 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 du chemin.

Exemple

Rendu d'un document SVG (insertion dans cette page web via la balise Iframe) :

Le code de ce document SVG

<svg viewBox ="0 0 300 300"  xmlns="http://www.w3.org/2000/svg">
  <defs>
	<desc> Définit un carré en guise de marqueur</desc>
    <marker id="mcarre" 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="mfleche" 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>
  <desc>Une ligne simple avec marqueurs</desc>
  <line x1="50" y1="50" x2="250" y2="250" stroke="grey" stroke-width="2" 
	marker-start="url(#mcarre)" marker-end="url(#mfleche)" />
  
  <desc>dessiner un zigzag : notation en relatif </desc>
   <path d="M 10,250 h100 v-100 h100 v-100 h80 " stroke="grey" stroke-width="2" fill ="none" 
    marker-mid="url(#mcarre)" marker-start="url(#mfleche)" marker-end="url(#mfleche)"/>
</svg>

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 ci-dessous
orient : voir encadré ci-dessous

line / polyline / 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

Rendre le code plus succinct

Grâce à quelques astuces syntaxiques, le code du dessin vectoriel ci-dessous est très court malgré une relative complexité du dessin.

Le rendu (document SVG inséré également via la balise Iframe

Pour le chemin en rouge, les marqueurs (anneaux) sont rouges ; pour le chemin en vert ils sont verts et pour le chemin en bleu ils sont bleus ...

Le code du document SVG

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
	<style> 
		path { fill: none; stroke-width: 2px; marker: url(#anneau); } 
	</style>
  <path d="M 10,50 v -20 h 40 v -20" stroke="red"/>
  <path d="M 30,70 v -20 h 40 v -20" stroke="green"/>
  <path d="M 50,90 v -20 h 40 v -20" stroke="blue"/>
  <marker id="anneau" markerWidth="12" markerHeight="12" refX="6" refY="6" markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" fill="white" stroke="context-stroke" stroke-width="2"/>
  </marker>
</svg>

Les astuces syntaxiques

Trois chemins mais une seule définition car emploi d'une règle de style : path{...}
Dans cette règle de style notez l'utilisation du raccourci marker qui remplace marker-start, marker-mid, marker-end.

La valeur de l'attribut "stroke" dans la balise circle est : stroke="context-stroke" : ainsi chaque marqueur adopte la couleur du stroke de la ligne correspondante.

L'attribut markerUnits="userSpaceOnUse" dans l'élément marker ; idéal quand on veut un marqueur de taille fixe quel que soit la valeur du stroke-width du chemin qui le porte.

Pour un élément dépendant, l'attribut fill peut prendre la valeur "context-fill".

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins vectoriels statiques

Dessins vectoriels animés

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 de ce document SVG

Rendre le code plus succinct

Le rendu (document SVG inséré également via la balise Iframe

Le code du document SVG

Les astuces syntaxiques