SVG : les dégradés

Plutôt qu'une couleur unie, une forme peut être remplie avec un dégradé linéaire ou radial.
La définition des dégradés SVG peut correspondre à des classes CSS ; voir la fin du chapitre.

Les dégradés radiaux

Exemple : le rendu

Le canevas SVG comprend quatre ronds ; chaque rond rempli avec un dégradé radial.

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>

L'élément SVG est un élément HTML ; on peut donc lui appliquer un dégradé CSS.
Par contre les cercles sont des éléments SVG ; il faut leur appliquer des dégradés SVG.

Extrait de la feuille de style de cette page web :

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

définition des dégradés SVG (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. L'attribut stop-opacity n'name

Dégradés linéaires

Exemple : le rendu

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

Définition des dégradés

...
<defs>
<lineargradient id="diagonal_bas" x1="0%" y1="0%" x2="100%" y2="100%">
	<stop offset="0%" stop-color="green" stop-opacity ="1" />   
	<stop offset="100%" stop-color="green" stop-opacity =".1" />
</lineargradient>
<lineargradient id="diagonal_haut" x1="0%" y1="100%" x2="100%" y2="0%">
	<stop offset="0%" stop-color="green"  stop-opacity ="1"/>    
	<stop offset="100%" stop-color="green" stop-opacity =".1"  />
</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>

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.

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 à l'élément linearGradient dans lequel on inclut 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

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

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

<svg width="80%" viewBox ="0 0 400 300" > 
<defs>
<radialGradient id="rg1" cx="75%" cy="75%" r="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
</defs>
<radialGradient id="rg2" cx="0.25" cy=".25" r="1">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
</defs>
<circle  cx="100" cy="100"  r ="100"  fill="url(#rg1)" />
<circle  cx="300" cy="100"  r ="100"  fill="url(#rg2)" />
<rect x ="0" y ="200" width="200"  height="200" fill="url(#rg1)" />
<rect x ="200" y ="200" width="200"  height="200" fill="url(#rg2)" />
</svg>

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.

Définir les paramètres du dégradé SVG via CSS

Vous pouvez remplacer les attributs des balises stop (stop-color, offset,...) par l'attribut class.

Le code d'un document SVG :"degrade_via_css.svg"

<svg width ="50%"  viewBox="0 0 200 200"  xmlns="http://www.w3.org/2000/svg" >
	
<style>
	.stop-debut {stop-color: red;}
	.stop-fin {stop-color: green;}
</style>
  <defs>
    <linearGradient id="degradeModifiable">
      <stop offset="0%" class="stop-debut" />
      <stop offset="100%" class="stop-fin" />
    </linearGradient>
  </defs>
  <rect width="100" height="100" x ="50" y ="50"  fill="url(#degradeModifiable)" />
</svg>

Les attributs stop-color des balises stop sont définis via les classes CSS stop-debut & stop-fin

Le rendu

La version dynamique

Mais quel est l'intérêt de cette manipulation ?
Si vous rajoutez un script dans le document SVG, vous pouvez créer une animation ; par exemple les couleurs du dégradé changent si survol du rectangle.

Le code de "degrade_via_css_script.svg"

<svg viewBox="0 0 200 200"  xmlns="http://www.w3.org/2000/svg" >
<style>
	.violet {stop-color: purple;}
	.jaune {stop-color: yellow;}
	.rouge {stop-color: red;}
	.vert {stop-color: green;}
	text{font-size:6px; text-anchor : left ;}
</style>
  <defs>
    <linearGradient id="degradeModifiable">
      <stop id ="debut" offset="0%" class="violet" />
      <stop id ="fin" offset="100%" class="jaune" />
    </linearGradient>
  </defs>
  <rect width="100" height="100" x ="50" y ="50"  fill="url(#degradeModifiable)" id ="rectangle" />
  <text  x="20" y="180">Survolez le rectangle et observez ...</text>
<script>
let rectangle =document.getElementById("rectangle"); 
let debut = document.getElementById("debut"); 
let fin = document.getElementById("fin"); 

rectangle.onmouseover = function()
{
	debut.classList.toggle("rouge");
	fin.classList.toggle("vert");
}	
</script>
</svg>

Notez que les éléments stop ont chacun un ID.
Le script : si survol du rectangle SVG et grâce aux classes CSS, la valeur de l'attribut stop-color change !

Le rendu

Attention compte tenu de la présence d'un script, ce document SVG doit être inséré dans la page web via les balises iframe / object sinon le script n'est pas interprété.

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 : les dégradés

Les dégradés radiaux

Exemple : le rendu

Le code SVG correspondant

Dégradés linéaires

Exemple : le rendu

Définition des dégradés

Syntaxe

Application des dégradés aux formes

Retour sur les dégradés radiaux

Le rendu

Le code

Définir les paramètres du dégradé SVG via CSS

Le code d'un document SVG :"degrade_via_css.svg"

Le rendu

La version dynamique

Le code de "degrade_via_css_script.svg"

Le rendu