Accueil

Traduction

Dessiner avec SVG - sommaire

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

SVG : dégradés, motifs, masques et découpes

Plutôt qu'une couleur, une forme peut être remplie avec un dégradé ou un motif.

Les dégradés

Il existe deux types de dégradés : dégradé linéaire et dégradé radial.

La syntaxe des dégradés en SVG est disons ... un peu lourde.
Vous pouvez aussi utiliser la librairie Snap SVG pour réaliser des dégradés applicables à des éléments SVG.

Dégradés linéaires

Exemple

Ci-dessous un canevas SVG contenant 4 rectangles. Chaque rectangle rempli avec un dégradé linéaire. balise lineargradient de SVG

Le code SVG correspondant (définition des dégradés)

Dans le canevas ci-dessus quatre types de dégradés ayant des axes de dégradé différents ont été définis.
Ensuit chaque dégradé défini est utilisé pour remplir un rectangle.

Syntaxe

On déclare un dégradé linéaire grâce au conteneur linearGradient dans lequel on intègre des balises stop.
La balise linearGradiant doit contenir quatre attributs x1 y1 x2 et y2 qui précisent l'axe du dégradé à moins que nous voulions un dégradé horizontal. Dans ce cas ces quatre attributs sont inutiles !
L'attribut ID est obligatoire pour pouvoir appliquer le dégradé à une forme.
Comme tous les objets réutilisables, linearGradient doit évidemment se trouver dans le conteneur defs.

La balise linearGradiant contient autant de balises stop que de couleurs dans le dégradé.
La balise stop permet de préciser l'une des couleurs du dégradé et comprend trois attributs : offset et stop-color et stop-opacity. Le dernier attribut est facultatif (valeur par défaut =1).

Remplir une forme avec un dégradé

Quant à l'utilisation d'un dégradé linéaire pour remplir une forme c'est exactement comme l'application d'un motif : via l'attribut fill dans la balise correspondant à la forme.

Les dégradés radiaux

Exemple

Ci-dessous deux formes (un cercle et une ellipse).
Seul le cercle est rempli par un dégradé. SVG - balise radialGradiant

Le code SVG correspondant

La balise SVG est un élément HTML donc rien n'interdit de lui appliquer en guise de "background" un dégradé CSS.
Extrait de la feuille de style de la page : .radial_css {background :linear-gradient(to bottom, skyblue ,white);}
Par contre j'ai tenté d'appliquer ce même dégradé CSS à l'ellipse (élément SVG) et vous voyez que ça ne marche pas !

Un dégradé radial est défini grâce au conteneur radialGradiant avec un attribut obligatoire : ID.
Comme pour un dégradé linéaire il faut ensuite préciser les différentes tons.
Dans l'exemple je joue sur l'opacité de la couleur. J'ai donc un dégradé de la couleur olive.

Application d'un dégradé à un groupe de formes

Peut-on remplir un groupe de formes avec un dégradé ?
Oui mais le dégradé s'applique alors à chaque forme et non pas à l'ensemble !
Il faudrait transformer le groupe de formes en un chemin.

Le code SVG

Le rendu de ce code

Le dégradé se répète au niveau de chacune des deux formes constitutives du groupe constitué du cercle et du rectangle.
C'est un peu gênant ...
Il aurait fallu convertir le groupe de formes en un chemin unique puis appliquer le dégradé au chemin.

Les motifs : la balise pattern

Dans le cadre d'une découverte du langage SVG, vous pouvez faire l'impasse sur ce paragraphe un peu difficile.
Lisez plutôt attentivement les découpes.

Nous savons déjà remplir une forme avec une couleur unie (plus ou moins opaque) et avec un dégradé de couleurs.
Nous allons voir maintenant que l'on peut remplir une forme avec un motif préalablement défini. Bref produire un fond tel un papier peint.

Un motif est une forme (ou groupe de formes) contenue dans un rectangle et qui se répète dans toute la zone cible.
Un motif peut être aussi une image matricielle 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.

Exemple 1 : le motif est un groupe de formes

Le code SVG correspondant (extraits)

Dans cette page nous définissons deux motifs (donc dans le conteneur defs) avec le conteneur pattern et identifiés respectivement motif1 et motif2.

L'attribut ID est obligatoire. Vous allez comprendre pourquoi bientôt.
Ces deux motifs sont pratiquement identiques : un carré de 50 par 50 contenant une ellipse. Cette ellipse contenant elle-même un cercle de couleur "olive".

La seule différence entre les deux motifs est la valeur des attributs patternUnits, width, height.
Ces trois attributs précisent le mode de répétition du motif dans la forme cible.

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 veut dire que le motif sera dupliqué tous les 20% en largeur et 25% en hauteur.
Donc 5 fois en largeur et 4 fois en hauteur.

Attention dès que l'attribut patterUnits a pour valeur objectBoundindBox les valeurs des attributs width et height de la balise pattern doivent être exprimées en pourcentage.

Il faut maintenant utiliser ces deux motifs pour remplir des rectangles.
Le canevas SVG est en effet divisé en deux rectangles.
Le premier rectangle (partie gauche de la zone de dessin) est rempli avec motif1 : < rect fill = "url(#motif1)" ...
Le deuxième rectangle (partie droite du canevas) est rempli avec motif2 : < rect fill = "url(#motif2)"...
Donc je pense que vous avez compris pourquoi il faut non seulement définir un motif mais aussi l'identifier.

Motif basé sur une image existante

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

Exemple

Le code SVG correspondant

On définit un motif identifié "plongeur1" qui a une taille de 100 par 100. Et à l'intérieur du conteneur pattern on utilise la balise isolée image pour importer une image matricielle.
On définit un deuxième motif identifié "plongeur2" qui correspond aussi à une image existante et qui a une taille également de 100 par 100

Les deux motifs se distinguent par le mode de répétition du motif dans la zone cible. Voir page précédente !
Premier motif répété tous les 100px en largeur et tous les 100px en hauteur : ...patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"
Deuxième motif répété 4 fois en largeur et 1 fois en hauteur : ...patternUnits="objectBoundingBox" x="0" y="0" width="25%" height="100%"

Il faut maintenant utiliser ces motifs pour remplir deux rectangles.

Un rectangle qui occupe la moitié haute de la zone de dessin a pour fond le motif identifié "plongeur1" :
<rect... fill = "url(#plongeur1)" ... .
Un rectangle qui occupe la moitié basse de la zone de dessin a pour fond le motif identifié "plongeur2" :
<rect ... fill = "url(#plongeur2)" ...

Motif défini à partir de plusieurs images

Le code SVG correspondant

Rappel : on peut exprimer les dimensions d'une forme en pourcentages des dimensions du canevas. C'est le cas ici du rectangle qui sera rempli avec le motif.

On définit un motif identifié couple composé de deux images existantes placées côte à côte (elles pourraient être l'une en dessous de l'autre).
Comme chaque image fait 100 par 100 le motif fait donc 200 par 100.
On demande que le motif soit répété tous les 200px en largeur et tous les 100px en hauteur : patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100"

Masques et découpes

Nous allons aborder deux nouvelles balises du format SVG : mask et clipath.

L'outil masque

On peut souhaiter appliquer au dessin le même effet que si il était vu au travers d'un rideau translucide. Il faut alors utiliser la fonction masque.

Exemple

Le haut de l'image est masqué. Le bas de l'image est identique à l'original.

Le code SVG correspondant

Ici on définit avec la balise mask un masque composite : 6 rectangles. Chaque rectangle a une largeur de 500 et une hauteur de 100 et est rempli de blanc avec une opacité croissante (augmentation de 20% à chaque fois).
Ce masque s'applique à une image de 500 par 600 grâce via l'attribut mask.

La découpe

On peut souhaiter l'effet d'un objet vu à travers un trou de serrure ou une paire de jumelles. Il faut alors utiliser la fonction découpe.

Exemple

Utilisation d’une découpe grâce à la balise clipPath

Le code SVG correspondant

Grâce au conteneur clipPath on définit ici une découpe simple : une ellipse.
Puis on affiche une image avec cette découpe en utilisant l'attribut clip-path à la balise image

Découpe : autre exemple

Jolie fille vue au travers d'un trou de serrure.
La découpe peut être un groupe de formes.

Ici il s'agit de l'incorporation dans la page d'un fichier SVG (decoupe.svg)

Le code pour l'insertion de l'image SVG dans la page :

Il faut incorporer l'image vectorielle avec la balise object car le code SVG du fichier contient des liens vers d'autres images.

Le fichier "decoupe.svg"

Quant au code du fichier SVG, il est le suivant (extraits) :

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