SVG : les dégradés

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

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 viewBox ="0 0 800 400" ... > <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>

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.

Retour menu