logo oujood
🔍

SVG : Maîtriser les dégradés de couleur (LinearGradient & RadialGradient)

Apprenez à créer des transitions de couleurs fluides avec les dégradés linéaires et radiaux en SVG. Exemples détaillés et explications techniques des attributs essentiels.

OUJOOD.COM

Comprendre les dégradés de couleurs en SVG


HTML5 cours tutorial SVG - Les gradients vectoriels expliqués

Un dégradé de couleur SVG (ou gradient) est une transition progressive et fluide d'une couleur vers une ou plusieurs autres couleurs. Cette technique permet de créer des effets visuels sophistiqués dans vos graphiques vectoriels. En SVG, vous pouvez appliquer plusieurs transitions de couleurs simultanées sur un même élément graphique, offrant ainsi des possibilités créatives illimitées pour vos designs web.

Avant de créer un dégradé linéaire ou radial, il est essentiel de comprendre l'élément fondamental qui définit les couleurs : la balise <stop/>. Cet élément SVG permet de spécifier les points de couleur qui composent votre gradient, que ce soit pour un linearGradient ou un radialGradient.

Puisqu'un dégradé nécessite au minimum deux couleurs pour créer une transition visible, vous devrez utiliser au moins deux éléments <stop/> dans votre définition de gradient SVG. Toutefois, vous pouvez en ajouter autant que nécessaire pour créer des transitions multicolores complexes.

Chaque élément <stop/> possède un attribut offset obligatoire qui définit la position de la couleur en pourcentage (de 0% à 100%) le long du parcours du dégradé. Cette valeur indique précisément où la couleur doit apparaître entre le point de départ (0%) et le point d'arrivée (100%) du gradient.

Le contrôle des couleurs dans l'élément <stop/> s'effectue via deux propriétés CSS essentielles : stop-color qui détermine la couleur à appliquer (en format RGB, hexadécimal ou nom de couleur), et stop-opacity qui définit le niveau de transparence avec une valeur comprise entre 0 (totalement transparent) et 1 (totalement opaque, valeur par défaut). Cette combinaison permet de créer des effets de dégradé avec transparence progressive.

SVG propose deux types principaux de dégradés pour répondre à différents besoins graphiques :

Dégradé Linéaire (linearGradient) - Pour des transitions en ligne droite

Dégradé Radial (radialGradient) - Pour des transitions circulaires ou elliptiques

Créer un dégradé linéaire SVG avec linearGradient

En SVG, un dégradé linéaire se crée en utilisant l'élément <linearGradient>. Cet élément permet de définir une transition de couleurs en ligne droite, suivant un vecteur directionnel que vous contrôlez précisément.

L'élément <linearGradient> doit obligatoirement être imbriqué dans une balise <defs>. Cette balise <defs> (abréviation de "definitions") sert de conteneur pour les définitions d'éléments réutilisables tels que les dégradés, les filtres, les masques et autres composants SVG spéciaux.

La direction du dégradé linéaire est contrôlée par quatre attributs fondamentaux : x1, y1, x2 et y2. Le gradient suivra la direction du vecteur directionnel partant du point de coordonnées (x1, y1) vers le point de coordonnées (x2, y2). Cette approche vectorielle vous offre un contrôle précis sur l'orientation de votre transition de couleurs.

Un aspect important du linearGradient SVG est la possibilité de choisir le système de coordonnées utilisé pour positionner votre dégradé. Cette flexibilité s'avère cruciale pour créer des effets de gradient adaptatifs.

Le système de coordonnées se définit avec l'attribut gradientUnits qui accepte deux valeurs distinctes :

objectBoundingBox (valeur par défaut) : Le système de coordonnées est relatif à la boîte englobante de l'élément sur lequel vous appliquez le dégradé. Dans ce mode, les valeurs des attributs x1, x2, y1 et y2 sont exprimées en pourcentages (de 0% à 100%), ce qui rend le gradient proportionnel à la taille de l'objet.

userSpaceOnUse : Le système de coordonnées utilisé est le système de coordonnées utilisateur courant, c'est-à-dire celui défini par l'élément SVG parent. Les attributs x1, y1, x2 et y2 prennent alors des valeurs en pixels absolus, permettant un positionnement fixe du dégradé indépendamment de la taille de l'objet.

Les dégradés linéaires SVG peuvent être configurés selon trois orientations principales :

Gradients horizontaux : créés lorsque y1 et y2 sont égaux (même position verticale) tandis que x1 et x2 sont différents - la transition s'effectue de gauche à droite ou inversement

Gradients verticaux : créés lorsque x1 et x2 sont égaux (même position horizontale) tandis que y1 et y2 sont différents - la transition s'effectue de haut en bas ou inversement

Gradients obliques (diagonaux) : créés lorsque x1 et x2 sont différents ET y1 et y2 sont différents - la transition suit un angle diagonal personnalisé

Exemple 1 : Créer une ellipse avec dégradé linéaire horizontal du jaune au bleu

Cet exemple démontre comment créer un gradient horizontal SVG simple avec une transition de couleur jaune vers bleu appliquée à une forme elliptique.

Code SVG :

Exemple :     📋 Copier le code 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <!-- Définition du dégradé linéaire horizontal -->
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <!-- Point de départ : jaune à 0% -->
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <!-- Point d'arrivée : bleu à 100% -->
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <!-- Application du gradient à l'ellipse via url(#grad1) -->
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
</svg>

Explication détaillée du code :

L'attribut id de la balise <linearGradient> définit un identifiant unique ("grad1") qui permet de référencer ce dégradé depuis n'importe quel élément SVG du document.

Les attributs x1, x2, y1, y2 définissent le vecteur de direction du gradient : x1="0%" et x2="100%" avec y1=y2="0%" créent une transition horizontale de gauche à droite.

La gamme de couleurs d'un dégradé peut contenir deux couleurs ou plus. Chaque couleur est définie avec une balise <stop> qui marque un point de couleur sur le tracé du gradient.

L'attribut offset détermine le positionnement exact de chaque couleur le long du dégradé : offset="0%" marque le début, offset="100%" marque la fin.

L'attribut fill de l'ellipse établit le lien avec le gradient en utilisant la syntaxe url(#grad1), où "grad1" correspond à l'id du linearGradient défini.

Exemple 2 : Cercle avec dégradé linéaire vertical du jaune au rouge

Cet exemple illustre comment créer un gradient vertical SVG en modifiant les coordonnées y1 et y2 pour obtenir une transition de haut en bas.

Code SVG :

Exemple :     📋 Copier le code 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <!-- Gradient vertical : x1=x2 mais y1≠y2 -->
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <!-- Couleur de départ en haut : rouge -->
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <!-- Couleur d'arrivée en bas : jaune -->
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
    </linearGradient>
  </defs>
  <!-- Cercle avec contour noir de 1px -->
  <circle cx="100" cy="100" r="80" fill="url(#grad1)" stroke="rgb(0,0,0)" stroke-width="1"/>
</svg>

Exemple 3 : Rectangle avec dégradé linéaire oblique multicolore et texte intégré

Exemple avancé montrant un gradient diagonal avec trois couleurs et l'intégration de texte SVG stylisé sur le fond dégradé.

Code SVG :

Exemple :     📋 Copier le code 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <!-- Gradient diagonal avec 3 points de couleur -->
    <linearGradient id="grad1" x1="0%" y1="50%" x2="50%" y2="0%">
      <!-- Bleu au début (0%) -->
      <stop offset="0%" style="stop-color:rgb(0,127,255);stop-opacity:1" />
      <!-- Jaune au milieu (50%) -->
      <stop offset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <!-- Vert à la fin (100%) -->
      <stop offset="100%" style="stop-color:rgb(0,250,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <!-- Rectangle avec fond dégradé -->
  <rect width="270" height="200" style="fill:url(#grad1);stroke-width:1;stroke:#000"/>
  <!-- Texte avec contour rouge et remplissage transparent -->
  <text stroke-width="2" stroke="#ff0000" fill="none" font-size="100" font-family="Verdana" x="10" y="100">SVG</text>
</svg>

Exemple 4 : Utilisation de gradientUnits="userSpaceOnUse" pour un positionnement absolu

Cet exemple démontre la différence entre les systèmes de coordonnées gradientUnits en utilisant des valeurs en pixels absolus plutôt que des pourcentages.

Exemple :     📋 Copier le code 

<!DOCTYPE html>
<html>
<head>
<title>SVG les dégradés de couleurs - gradientUnits userSpaceOnUse</title>
<meta charset="UTF-8">
<style>
/* Application du gradient aux formes via CSS */
rect, ellipse{
  fill:url(#degrade);
  stroke:black;
  stroke-width:2px;
}
/* Définition des couleurs et opacités via ID */
#stop1{
  stop-color:#ff0000; /* Rouge avec transparence */
  stop-opacity:0.2;
}
#stop2{
  stop-color:#00ff00; /* Vert opaque */
  stop-opacity:1;
}
#stop3{
  stop-color:#0000ff; /* Bleu semi-transparent */
  stop-opacity:0.7;
}
</style>
</head>
<body>
<svg viewBox="0 0 1200 600" xml:lang="fr" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <!-- Gradient avec coordonnées absolues en pixels -->
    <linearGradient gradientUnits="userSpaceOnUse" id="degrade" x1="0" y1="80" x2="200" y2="200">
      <stop offset="0%" id="stop1"/>
      <stop offset="40%" id="stop2"/>
      <stop offset="100%" id="stop3"/>
    </linearGradient>
  </defs>
  <!-- Les deux formes partagent le même gradient positionné en absolu -->
  <rect x="0" y="0" width="200" height="120"/>
  <ellipse cx="160" cy="180" rx="120" ry="70" />
</svg>
</body>
</html>

Pour observer la différence entre les systèmes de coordonnées, remplacez la balise :
<linearGradient gradientUnits="userSpaceOnUse" id="degrade" x1="0" y1="80" x2="200" y2="200">
par cette version avec objectBoundingBox :

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

Vous constaterez que le gradient s'adapte différemment selon la forme : avec userSpaceOnUse, le gradient a un positionnement fixe, tandis qu'avec objectBoundingBox, il s'adapte proportionnellement à chaque forme.

Créer un dégradé radial SVG avec radialGradient

En SVG, l'élément <radialGradient> permet de créer un dégradé radial circulaire ou elliptique. Ce type de gradient génère une transition de couleurs depuis un point central vers l'extérieur, créant un effet de rayonnement particulièrement adapté pour simuler des effets de lumière, de profondeur ou de volume.

Comme pour le linearGradient, l'élément <radialGradient> doit obligatoirement être imbriqué dans une balise <defs> pour être défini puis référencé dans vos éléments graphiques.

Exemple 1 : Ellipse avec dégradé radial du blanc au bleu

Exemple de base montrant comment créer un effet de sphère 3D avec un gradient radial simple.

Code SVG :

Exemple :     📋 Copier le code 

<svg viewBox="0 0 1200 600" xml:lang="fr" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <!-- Gradient radial centré avec transition blanc vers bleu -->
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <!-- Centre blanc (point focal) -->
      <stop offset="0%" style="stop-color:#ffffff; stop-opacity:1" />
      <!-- Périphérie bleue -->
      <stop offset="100%" style="stop-color:#0000ff; stop-opacity:1"/>
    </radialGradient>
  </defs>
  <!-- Application du gradient radial à l'ellipse -->
  <ellipse cx="160" cy="180" rx="120" ry="70" fill="url(#grad1)"/>
</svg>

Explication détaillée du code :

L'attribut id de la balise <radialGradient> définit un identifiant unique permettant de référencer ce dégradé radial depuis n'importe quel élément SVG.

Les attributs cx, cy et r définissent respectivement le centre et le rayon du cercle extérieur du gradient (zone de fin du dégradé), tandis que les attributs fx et fy définissent les coordonnées du point focal (centre lumineux, point de début du dégradé).

La palette de couleurs d'un dégradé radial peut contenir deux couleurs ou plus pour créer des transitions complexes.

Chaque couleur est définie avec une balise <stop>. L'attribut offset détermine la distance radiale où chaque couleur commence et se termine, créant ainsi la progression du gradient.

L'attribut fill de l'ellipse établit le lien avec le gradient radial en utilisant la référence url(#grad1).

Exemple 2 : Cercle avec dégradé radial multicolore

Exemple avancé illustrant un gradient radial avec cinq couleurs pour créer un effet arc-en-ciel rayonnant.

Code SVG :

Exemple :     📋 Copier le code 

<svg viewBox="0 0 1200 600" xml:lang="fr" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <!-- Gradient radial avec 5 transitions de couleurs -->
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <!-- Centre : blanc lumineux -->
      <stop offset="0%" style="stop-color:#ffffff; stop-opacity:1" />
      <!-- Anneau rouge à 30% -->
      <stop offset="30%" style="stop-color:#FF0000; stop-opacity:1" />
      <!-- Anneau vert à 50% -->
      <stop offset="50%" style="stop-color:#00FF00; stop-opacity:1" />
      <!-- Anneau bleu à 80% -->
      <stop offset="80%" style="stop-color:#0000FF; stop-opacity:1" />
      <!-- Bordure beige clair -->
      <stop offset="100%" style="stop-color:#FFE4B5; stop-opacity:1" />
    </radialGradient>
  </defs>
  <!-- Cercle parfait avec le gradient multicolore -->
  <circle cx="100" cy="100" r="80" fill="url(#grad1)"/>
</svg>

Application de dégradé à un texte SVG

Les dégradés SVG (qu'ils soient linéaires ou radiaux) peuvent être appliqués à n'importe quel élément SVG, y compris le texte vectoriel. Cette technique permet de créer des effets typographiques sophistiqués avec des transitions de couleurs fluides sur vos lettres, particulièrement utile pour les titres, logos et éléments graphiques textuels.

Code SVG :

Exemple :     📋 Copier le code 

<svg viewBox="0 0 1200 600" xml:lang="fr" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <!-- Gradient vertical jaune-cyan pour effet typographique -->
    <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
      <!-- Haut du texte : jaune -->
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <!-- Bas du texte : cyan -->
      <stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <!-- Texte SVG avec remplissage dégradé -->
  <text font-size="100" font-family="Verdana" x="10" y="80" fill="url(#grad)">SVG</text>
</svg>

chapitre précédent

sommaire

Par carabde | Mis à jour le 19 novembre 2025