SVG : les dégradés

Une forme SVG peut être remplie avec un dégradé linéaire ou radial défini en SVG.

Si vous produisez du SVG via Snap SVG vous pouvez faire l'impasse sur ce chapitre.
Il y a dans ce tuto une page sur la définition des dégradés avec Snap.

Dégradé linéaire

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

<svg viewBox ="0 0 700 700" ...> <defs> <lineargradient id="diagonal_bas" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargradient> <lineargradient id="diagonal_haut" x1="0%" y1="100%" x2="100%" y2="0%"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargradient> <lineargradient id="horizontal"> <stop offset="0%" stop-color="olive" /> <stop offset="50%" stop-color="lime" /> <stop offset="100%" stop-color="white" /> </lineargradient> <lineargradient id="vertical" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="olive" /> <stop offset="50%" stop-color="lime" /> <stop offset="100%" stop-color="white" /> </lineargradient> </defs> <rect fill="url(#diagonal_bas)" x="0" y="0" width="300" height="300"/> <rect fill="url(#diagonal_haut)" x="50%" y="0" width="300" height="300"/> <rect fill="url(#horizontal)" x="0%" y="400" width="300" height="300"/> <rect fill="url(#vertical)" x="50%" y="400" width="300" height="300"/> </svg>

Nous avons vu qu'une forme peut être remplie avec une couleur (opaque ou transparente) ou avec un motif. Nous voyons maintenant qu'une forme peut être remplie avec un dégradé (linéaire ou radial) !

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 inclut 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).

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

Ci-dessous deux formes (un cercle et une ellipse) remplies avec le même dégradé radial. SVG - balise radialGradiant

Le code SVG correspondant

<svg width="100%" height="100%" viewBox ="0 0 800 400" style ="background :linear-gradient(to bottom, skyblue ,white) ;"> <defs> <radialGradient id="radial" > <stop offset="0%" stop-color = 'olive' stop-opacity ="1"/> <stop offset="25%" stop-color = 'olive' stop-opacity ="0.8" /> <stop offset="50%" stop-color = 'olive' stop-opacity ="0.6"/> <stop offset="75%" stop-color = 'olive' stop-opacity ="0.4"/> <stop offset="100%" stop-color = 'olive' stop-opacity ="0.2"/> </radialGradient> </defs> <circle cx = '50%' cy = '100' r = '100' fill = 'url(#radial)' /> <ellipse cx = '50%' cy = '300' rx = '150' ry ='100' fill = 'url(#radial)' /> </svg>

La balise SVG est un élément HTML donc rien n'interdit de lui appliquer en guise de "background" un dégradé CSS.
Par contre on ne peut appliquer à un objet SVG qu'un dégradé défini selon la syntaxe SVG.

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 !

Le code SVG

<svg viewBox ="0 0 600 600" width ="80%" height ="auto"> <defs> <lineargradient id="vertical" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="black" /> <stop offset="50%" stop-color="olive" /> <stop offset="100%" stop-color="lime" /> </lineargradient> </defs> <circle cx = '50%' cy = '100' r = '100' fill = 'url(#vertical)' /> <g fill ='url(#vertical)' > <circle cx = '50%' cy = '400' r = '100' /> <rect x="200" y = "400" width ="200" height="200" /> </g> </svg>

Le rendu de ce code

Le dégradé se répète au niveau du cercle et du rectangle constitutifs du groupe.
C'est un peu gênant ...
Retour menu