Dessiner avec SVG - sommaire

SVG : les dégradés

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

Les dégradés radiaux

Exemple

Ci-dessous une zone de dessin SVG remplie avec un dégradé défini par le CSS.
Le canevas SVG comprend quatre ronds ; chaque rond rempli avec un dégradé radial défini par le SVG.

Le code SVG correspondant

Pour info le code dans le contenteur STYLE de cette page web :

	.degrade_css {background :linear-gradient(to bottom, skyblue ,white);}

Ci-dessous le code SVG correspondant : <svg width="80%" viewBox ="0 0 400 400" class ="radial_css" > <defs> <radialGradient id="radial1" > <stop offset="0%" stop-color = 'olive' stop-opacity ="1"/> <stop offset="50%" stop-color = 'olive' stop-opacity ="0.1" /> </radialGradient> <radialGradient id="radial2" > <stop offset="0%" stop-color = 'olive' stop-opacity ="0.1"/> <stop offset="50%" stop-color = 'olive' stop-opacity ="1" /> </radialGradient> <radialGradient id="radial3" > <stop offset="0%" stop-color = 'olive'/> <stop offset="50%" stop-color = 'green' /> <stop offset="75%" stop-color = 'lime' /> </radialGradient> <radialGradient id="radial4" > <stop offset="0%" stop-color = 'lime' /> <stop offset="25%" stop-color = 'green' /> <stop offset="75%" stop-color = 'olive' /> </radialGradient> </defs> <circle cx = '100' cy = '100' r = '100' fill = 'url(#radial1)' /> <circle cx = '300' cy = '100' r = '100' fill = 'url(#radial2)' /> <circle cx = '100' cy = '300' r = '100' fill = 'url(#radial3)' /> <circle cx = '300' cy = '300' r = '100' fill = 'url(#radial4)' /> </svg>

La balise SVG est un élément du langage HTML, on peut donc lui appliquer (ici via une classe) un dégradé CSS.

La structure du code SVG :
• définition des dégradés dans la partie DEFS
• dessin et remplissage des cercles

Le premier cercle est rempli par un dégradé radial monochrome (olive) : de opaque à transparent.
Le deuxième cercle est rempli par un dégradé radial monochrome (olive) : de transparent à opaque.
Le troisième cercle est rempli par un dégradé radial tricolore : d'un vert foncé vers un vert clair.
Le quatrième cercle est rempli par un dégradé radial tricolore : d'un vert clair vers un vert foncé.

On déclare un dégradé radial grâce au conteneur radialGradient dans lequel on intègre des balises stop.
L'attribut ID est obligatoire afin d'identifier chaque dégradé.
Par défaut l'origine du dégradé est le centre de l'objet auquel s'applique le dégradé.

Il y a autant d'éléments stop que de couleurs ou nuances de couleurs.
l'"attribut offset précise l'étendue de chaque couleur (ou nuance)
Il faut ensuite préciser la couleur avec stop-color et éventuellement l'opacité avec stop-opacity

Dégradés linéaires

Exemple

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

Définition des dégradés

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

Les différents dégradés linéaires définis :
• diagonal_bas : dégradé monocolore mais je joue sur l'opacité ;
  l'axe du dégradé va de HG vers BD
• diagonal_haut : dégradé monocolore mais je joue sur l'opacité ;
  l'axe du dégradé va de BG vers HD
• horizontal : dégradé tricolorore ; l'axe est horizontal ; c'est la valeur par défaut donc les attributs x1,y1,x2 et y2 sont inutiles.
• vertical : dégradé tricolore ;
  l'axe du dégradé va de HG vers BG

Syntaxe

On déclare un dégradé linéaire grâce au conteneur linearGradient dans lequel on intègre des éléments 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 (de gauche vers droite). Dans ce cas ces quatre attributs sont inutiles.
Ici les valeurs de x1,y1,x2 & y2 sont exprimées en pourcentages.
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 tons (couleurs ou niveau de transparence) dans le dégradé.
La balise stop comprend trois attributs : offset, stop-color et/ou stop-opacity.

Application des dégradés aux formes

Retour sur les dégradés radiaux

Je n'ai pas tout dit sur les dégradés radiaux. L'origine du dégradé radial n'est pas forcément le centre de l'objet auquel on l'applique. La portée d'un dégradé radial peut être réduite.

Le rendu

On applique aux ronds successivement les dégradés radiaux "rg1" et "rg2".
On applique aux carrés successivement les dégradés radiaux "rg1" et "rg2".
Ces dégradé n'ont plus pour origine le centre de l'objet.
Le premier dégradé radial a une porté plus faible que le second.

Le code

Dans la définition de chaque dégradé radial j'ai rajouté les attributs cx, cy et r.
Les attributs cx et cy définissent l'origine du dégradé dans l'objet et r l'étendue.
Ces trois paramètres peuvent être exprimés en % (voir premier dégradé) ou en décimal (voir deuxième dégradé). Le pourcentage doit être compris entre 0% et 100% et le décimal entre 0 et 1.