SVG les dégradés de couleur

Les dégradés de couleurs

Un dégradé est une transition en douceur d'une couleur à l'autre. En outre, plusieurs transitions de couleurs peuvent être appliquées au même élément.

Mais avant, quelque soit le type de dégradés, il faut indiquer les couleurs à utiliser. Pour cela l’élément  nécessaire/est  <stop/>.

Et puisqu’un dégradé demande un minimum de deux couleurs, donc deux éléments <stop/> minimum seront utilisés.

Chaque élément <stop/> aura un attribut offset qui indiquera en pourcentage la distance de la couleur entre le point de départ du dégradé et sa fin (nous le verrons  plus tard dans les exemples).

Ce sont les deux propriétés CSS stop-color et stop-opacity qui permettent de contrôler la couleur dans l’élément <stop/>. Dans stop-color on spécifie la couleur, et dans stop-opacity on definit l'opacité dont la valeur va de 0 à 1 (1 étant la valeur par défaut).

Il existe deux principaux types de gradients dans SVG :

Dégradé Linéaire

Dégradé Radial

SVG dégradé linéaire

En SVG un dégradé linéaire s’obtient avec l’élément <linearGradient>

L'élément <linearGradient> est utilisé pour définir un dégradé linéaire.

L'élément <linearGradient> doit être imbriquée dans une balise <defs>. 

La balise <defs> est l'abréviation des définitions et contienne la définition des éléments spéciaux (tels que des dégradés).

La direction d’un dégradé sera indiquée grâce à 4 attributs/: x1, y1, x2 et y2. La direction du dégradé sera celle du vecteur partant du point de coordonnés x1,y1 vers le point de coordonnées x2,y2.

Mais sachez qu’on peut choisir  le système de coordonnées!

Pour choisir le système de coordonnées on utilise l’attribut gradientUnits  qui peut prendre deux valeurs :

la valeur objectBoundingBox (valeur par défaut) : le système de coordonnées est lié à la plus petite boîte rectangle qui englobe la forme sur laquelle vous appliquez le dégradé. Les valeurs prises par les attributs x1 x2 y1 y2 listés ci-dessus sont donc en ourcentage.

La valeur userSpaceOnUse : le système de coordonnées utilisé est le système de coordonnée courant, c'est-à-dire lier au svg parent et les attributs x1, y1, x2 et y2 prendront des valeurs en pixcels.

Les dégradés linéaires peuvent être définis comme des dégradés horizontaux, verticaux ou obliques :

Gradients horizontaux sont créés lorsqu'y1 et y2 sont égaux et x 1 et x 2 sont différents

Gradients verticaux sont créés lorsque x 1 et x 2 sont égaux et d'y1 et y2 sont différents

Gradients obliques sont créés lorsque x 1 et x 2 sont différents et d'y1 et y2 sont différents

Exemple 1 Définir une ellipse avec un dégradé linéaire horizontal du jaune au bleu :

Code SVG :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
</svg>
 

Explication de code :

L'attribut id de la balise <linearGradient> définit un nom unique pour le dégradé

Les attributs x 1, x 2, y1, y2 de la balise <linearGradient> définissent la position de début et de fin du dégradé

La gamme de couleurs pour un dégradé peut être composée de deux ou plusieurs couleurs. Chaque couleur est spécifiée avec une balise <stop>. 

L'attribut offset est utilisé pour définir où commence et se termine le dégradé de couleur

L'attribut de remplissage fill relie l'élément ellipse au gradient grâce à la valeur "url(#grad1)".

Exemple 2 Définir un cercle avec un dégradé linéaire vertical, du jaune au rouge :

Code SVG :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
		 <stopoffset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stopoffset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
 	 </linearGradient>
  </defs>
  <circle cx = "100" cy= "100" r = "80" fill = "url(#grad1)" stroke = "rgb(0,0,0)" stroke-width = "1"/>
</svg>
 

Exemple 3 Définir un rectangle  avec un dégradé linéaire oblique en couleurs et ajouter un texte à l'intérieur :

Code SVG :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="50%" x2="50%" y2="0%">
      <stopoffset="0%" style="stop-color:rgb(0,127,255);stop-opacity:1" />
      <stopoffset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
     <stopoffset="100%" style="stop-color:rgb(0,250,0);stop-opacity:1" />
   </linearGradient>
  </defs>
  <rect width="270" height="200" style="fill:url(#grad1);stroke-width:1;stroke:#000"/>
  <text stroke-width="2" stroke="#ff0000" fill="none" font-size="100" font-family="Verdana" x="10" y="100">SVG</text>
</svg>
 

Exemple 4 avec l’attribut gradientUnits="userSpaceOnUse"

<!DOCTYPE html>
<html>
<head>
<title> SVG les dégradés de couleurs</title>
<meta charset="UTF-8">
<style>
rect, ellipse{
         fill:url(#degrade);
  		stroke:black;
        stroke-width:2px;
}
#stop1{
  	stop-color:#ff0000;
     stop-opacity:0.2;
}
#stop2{
        stop-color:#00ff00;
        stop-opacity:1;
}
#stop3{
        stop-color:#0000ff;
        stop-opacity:0.7;
}
</style>
</head>
<body>
<svg  viewBox="0 0 1200 600"  xml:lang="fr" xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" id="degrade" x1="0" y1="80" x2="200"
y2="200">
                   <stopoffset="0%" id="stop1"/>
                   <stopoffset="40%" id="stop2"/>
                   <stopoffset="100%" id="stop3"/>
        </linearGradient>
</defs>
<rect x="0" y="0" width="200" height="120"/>
<ellipse cx="160" cy="180" rx="120" ry="70" />
</svg>
</body>
</html>
 

Pour voir la différence remplacer la balise
<linearGradient gradientUnits="userSpaceOnUse" id="degrade" x1="0" y1="80" x2="200" y2="200">
par ceci :

<linearGradient gradientUnits="objectBoundingBox" id="degrade" x1="0%" y1="0%" x2="100%" y2="100%">

SVG Dégradé Radial

En SVG l'élément <radialGradient> est utilisé pour définir un dégradé radial.

L'élément <radialGradient> doit être imbriquée  dans une balise <defs>.

Exemple 1 Définir une ellipse avec un dégradé radial du blanc au bleu :

Code SVG :

<svg  viewBox="0 0 1200 600"  xml:lang="fr" xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%"
fy="50%">
      <stop offset="0%" style="stop-color:#ffffff; stop-opacity:1" />
      <stopoffset="100%" style="stop-color:#0000ff; stop-opacity:1"/>
   </radialGradient>
</defs>
<ellipse cx="160" cy="180" rx="120" ry="70" fill="url(#grad1)"/>
</svg>
 

 Explication de code :

L'attribut id de la balise <radialGradient> définit un identifiant unique pour le dégradé

Les attributs cx, cy et r définissent le cercle extérieur et le fx et fy définissent le cercle intime

La gamme de couleurs pour un dégradé peut être composée de deux ou plusieurs couleurs. 

Chaque couleur est spécifiée avec une balise <stop>. L'attribut offset est utilisé pour définir où commencent et se terminent le dégradé de couleur

L'attribut de remplissage fill relie l'élément ellipse au gradient

Exemple 2 Définir une cercle avec un dégradé radial de plusieurs couleurs :

Code SVG :

  <svg  viewBox="0 0 1200 600"  xml:lang="fr" xmlns="http://www.w3.org/2000/svg" 
xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
      <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:#ffffff; stop-opacity:1" />
        <stop offset="30%" style="stop-color:#FF0000; stop-opacity:1" />
             <stop offset="50%" style="stop-color:#00FF00; stop-opacity:1" />
              <stop offset="80%" style="stop-color:#0000FF; stop-opacity:1" />
              <stop offset="100%" style="stop-color:#FFE4B5; stop-opacity:1" />
       </radialGradient>
  </defs>
  <circle cx = "100" cy ="100" r = "80" fill = "url(#grad1)"/>
  </svg>
 

Application de dégradé à un texte

On peut appliquer un dégradé linéaire ou radial à un texte de la même façon qu’à tout élément SVG.

Code SVG :

<svg  viewBox="0 0 1200 600"  xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
   <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
</linearGradient>
</defs>
<text font-size="100" font-family="Verdana" x="10" y="80" fill = "url(#grad)">  SVG </text>
</svg>