Qu'est-ce que radialGradient en SVG ?

Introduction aux dégradés radiaux en SVG

Les dégradés sont des outils visuels puissants qui permettent de créer des transitions fluides entre plusieurs couleurs. En SVG, la balise <radialGradient> vous permet de définir des dégradés circulaires, aussi appelés dégradés radiaux, qui s'étendent à partir d'un point central vers l'extérieur. Cette technique est essentielle pour donner du volume, de la profondeur et un aspect réaliste à vos graphiques vectoriels.

Si vous souhaitez maîtriser les fondamentaux du développement web et comprendre comment intégrer des SVG dans vos pages, notre formation complète sur HTML vous guidera pas à pas dans cet apprentissage. Vous y découvrirez comment utiliser SVG de manière optimale pour créer des interfaces modernes et performantes.

Contrairement aux dégradés linéaires qui suivent une ligne droite, les dégradés radiaux créent une transition de couleur depuis un cercle central (le foyer) vers un cercle extérieur. Cette caractéristique les rend parfaits pour de nombreux cas d'usage créatifs que nous allons explorer ensemble dans cet article.

Définition et syntaxe de radialGradient

Syntaxe de base

La balise <radialGradient> est un élément de définition SVG qui doit être placé à l'intérieur d'une balise . Elle ne produit pas de rendu visuel directement, mais définit un dégradé qui peut ensuite être référencé par d'autres éléments SVG via leur attribut fill ou stroke.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="monDegradéRadial">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#3498db" />
    </radialGradient>
  </defs>
  
  <circle cx="100" cy="100" r="80" fill="url(#monDegradéRadial)" />
</svg>

Dans cet exemple, nous créons un dégradé radial simple qui va du blanc au centre vers le bleu sur les bords. La balise utilise ensuite ce dégradé via la syntaxe url(#id).

Attributs principaux

La balise <radialGradient> accepte plusieurs attributs qui contrôlent la position, la taille et le comportement du dégradé :

Les éléments stop

Chaque dégradé radial contient un ou plusieurs éléments <stop> qui définissent les couleurs et leurs positions dans le dégradé :

<radialGradient id="degradeMultiple">
  <stop offset="0%" stop-color="#f39c12" stop-opacity="1" />
  <stop offset="50%" stop-color="#e74c3c" stop-opacity="0.8" />
  <stop offset="100%" stop-color="#9b59b6" stop-opacity="0.6" />
</radialGradient>

L'attribut offset définit la position du stop (de 0% à 100%), stop-color définit la couleur, et stop-opacity permet de contrôler la transparence à ce point précis du dégradé.

Comprendre le système de coordonnées

gradientUnits : objectBoundingBox vs userSpaceOnUse

L'attribut gradientUnits détermine comment les coordonnées du dégradé sont interprétées. Ce choix a un impact significatif sur le rendu final.

<!-- Mode objectBoundingBox (par défaut) -->
<!-- Les valeurs sont relatives à l'élément (0 à 1 ou 0% à 100%) -->
<radialGradient id="gradientBBox" gradientUnits="objectBoundingBox"
                cx="0.5" cy="0.5" r="0.5">
  <stop offset="0%" stop-color="#2ecc71" />
  <stop offset="100%" stop-color="#27ae60" />
</radialGradient>

<!-- Mode userSpaceOnUse -->
<!-- Les valeurs sont en coordonnées absolues du SVG -->
<radialGradient id="gradientUser" gradientUnits="userSpaceOnUse"
                cx="100" cy="100" r="80">
  <stop offset="0%" stop-color="#2ecc71" />
  <stop offset="100%" stop-color="#27ae60" />
</radialGradient>

Positionnement du point focal

Le point focal (fx, fy) est l'endroit d'où émane réellement le dégradé. Par défaut, il coïncide avec le centre du cercle extérieur, mais vous pouvez le décaler pour créer des effets de lumière plus réalistes :

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Dégradé avec point focal décalé pour effet 3D -->
    <radialGradient id="sphere3D" cx="50%" cy="50%" r="50%"
                    fx="30%" fy="30%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="40%" stop-color="#3498db" />
      <stop offset="100%" stop-color="#1a5276" />
    </radialGradient>
  </defs>
  
  <circle cx="100" cy="100" r="80" fill="url(#sphere3D)" />
</svg>

En décalant le point focal vers le haut et la gauche, nous simulons une source de lumière qui éclaire la sphère depuis cette direction, créant un effet tridimensionnel convaincant.

Exemples pratiques avancés

Création d'une sphère réaliste

Voyons comment créer une sphère avec un effet de volume réaliste en utilisant plusieurs techniques combinées :

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Dégradé principal de la sphère -->
    <radialGradient id="sphereMain" cx="50%" cy="50%" r="50%"
                    fx="35%" fy="35%">
      <stop offset="0%" stop-color="#ecf0f1" />
      <stop offset="10%" stop-color="#e74c3c" />
      <stop offset="70%" stop-color="#c0392b" />
      <stop offset="100%" stop-color="#641e16" />
    </radialGradient>
    
    <!-- Reflet lumineux -->
    <radialGradient id="reflet" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8" />
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
    </radialGradient>
  </defs>
  
  <!-- Sphère principale -->
  <circle cx="100" cy="100" r="80" fill="url(#sphereMain)" />
  
  <!-- Reflet -->
  <ellipse cx="75" cy="70" rx="25" ry="15" fill="url(#reflet)" />
</svg>

Cette technique superpose deux éléments : un cercle principal avec un dégradé radial qui simule le volume, et une ellipse avec un dégradé transparent qui simule le reflet de la lumière.

Effet de halo lumineux

Les dégradés radiaux sont parfaits pour créer des effets de halo ou de lueur autour d'éléments :

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="haloBelivemy" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#f1c40f" stop-opacity="1" />
      <stop offset="30%" stop-color="#f39c12" stop-opacity="0.6" />
      <stop offset="60%" stop-color="#e67e22" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#d35400" stop-opacity="0" />
    </radialGradient>
  </defs>
  
  <!-- Halo -->
  <circle cx="150" cy="100" r="80" fill="url(#haloBelivemy)" />
  
  <!-- Texte central -->
  <text x="150" y="105" text-anchor="middle" 
        font-family="Arial" font-size="14" fill="#2c3e50">
    Believemy
  </text>
</svg>

Utilisation avec spreadMethod

L'attribut spreadMethod contrôle ce qui se passe lorsque le dégradé ne couvre pas entièrement l'élément cible. Trois valeurs sont possibles :

<svg width="400" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- pad : la couleur finale s'étend (par défaut) -->
    <radialGradient id="padGradient" cx="50%" cy="50%" r="25%" 
                    spreadMethod="pad">
      <stop offset="0%" stop-color="#9b59b6" />
      <stop offset="100%" stop-color="#8e44ad" />
    </radialGradient>
    
    <!-- repeat : le dégradé se répète -->
    <radialGradient id="repeatGradient" cx="50%" cy="50%" r="25%" 
                    spreadMethod="repeat">
      <stop offset="0%" stop-color="#9b59b6" />
      <stop offset="100%" stop-color="#8e44ad" />
    </radialGradient>
    
    <!-- reflect : le dégradé s'inverse et se répète -->
    <radialGradient id="reflectGradient" cx="50%" cy="50%" r="25%" 
                    spreadMethod="reflect">
      <stop offset="0%" stop-color="#9b59b6" />
      <stop offset="100%" stop-color="#8e44ad" />
    </radialGradient>
  </defs>
  
  <rect x="10" y="25" width="100" height="100" fill="url(#padGradient)" />
  <rect x="150" y="25" width="100" height="100" fill="url(#repeatGradient)" />
  <rect x="290" y="25" width="100" height="100" fill="url(#reflectGradient)" />
</svg>

La valeur repeat crée des cercles concentriques répétitifs, tandis que reflect produit un effet miroir entre chaque répétition, idéal pour des motifs plus doux.

Transformation et animation des dégradés

Utilisation de gradientTransform

L'attribut gradientTransform vous permet d'appliquer des transformations au dégradé indépendamment de l'élément qui l'utilise :

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Dégradé étiré horizontalement -->
    <radialGradient id="stretchedGradient" cx="50%" cy="50%" r="50%"
                    gradientTransform="scale(1.5, 1)">
      <stop offset="0%" stop-color="#1abc9c" />
      <stop offset="100%" stop-color="#16a085" />
    </radialGradient>
    
    <!-- Dégradé avec rotation -->
    <radialGradient id="rotatedGradient" cx="30%" cy="30%" r="70%"
                    gradientTransform="rotate(45, 0.5, 0.5)">
      <stop offset="0%" stop-color="#e74c3c" />
      <stop offset="100%" stop-color="#c0392b" />
    </radialGradient>
  </defs>
  
  <ellipse cx="100" cy="100" rx="80" ry="60" fill="url(#stretchedGradient)" />
</svg>

Animation avec CSS et SMIL

Vous pouvez animer les dégradés radiaux pour créer des effets dynamiques captivants :

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="animatedGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#3498db">
        <animate attributeName="stop-color" 
                 values="#3498db;#e74c3c;#f1c40f;#3498db" 
                 dur="4s" repeatCount="indefinite" />
      </stop>
      <stop offset="100%" stop-color="#2c3e50">
        <animate attributeName="stop-color" 
                 values="#2c3e50;#c0392b;#d35400;#2c3e50" 
                 dur="4s" repeatCount="indefinite" />
      </stop>
      
      <!-- Animation du rayon -->
      <animate attributeName="r" 
               values="30%;50%;30%" 
               dur="2s" repeatCount="indefinite" />
    </radialGradient>
  </defs>
  
  <circle cx="100" cy="100" r="80" fill="url(#animatedGradient)" />
</svg>

Bonnes pratiques et optimisation

Réutilisation des dégradés

Une bonne pratique consiste à définir vos dégradés une seule fois dans la section et à les réutiliser sur plusieurs éléments :

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Un seul dégradé réutilisé -->
    <radialGradient id="believemyTheme" cx="30%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#667eea" />
      <stop offset="100%" stop-color="#764ba2" />
    </radialGradient>
  </defs>
  
  <!-- Réutilisation sur plusieurs éléments -->
  <circle cx="80" cy="100" r="60" fill="url(#believemyTheme)" />
  <circle cx="200" cy="100" r="40" fill="url(#believemyTheme)" />
  <circle cx="320" cy="100" r="50" fill="url(#believemyTheme)" />
</svg>

Performance et accessibilité

Pour optimiser les performances et l'accessibilité de vos SVG avec dégradés radiaux :

• Limitez le nombre de stops dans vos dégradés (3-5 stops suffisent généralement)
• Évitez les animations complexes sur mobile
• Utilisez objectBoundingBox pour des dégradés responsives
• Ajoutez des alternatives textuelles via l'attribut aria-label sur le SVG parent
• Testez le rendu sur différents navigateurs

Erreurs courantes à éviter

Voici les erreurs les plus fréquentes lors de l'utilisation de <radialGradient> :

• Oublier l'attribut id : Sans identifiant unique, le dégradé ne peut pas être référencé
• Placer le dégradé hors de defs : Le dégradé doit toujours être dans une balise
• Mauvaise syntaxe de référence : Utilisez fill="url(#id)" et non fill="#id"
• Confondre pourcentages et pixels : Avec objectBoundingBox, utilisez des valeurs entre 0 et 1 ou des pourcentages
• Point focal hors du cercle : Le point focal doit rester dans les limites du cercle extérieur pour un rendu prévisible

Comparaison avec linearGradient

SVG propose deux types de dégradés : <radialGradient> et . Voici un tableau comparatif pour vous aider à choisir :

Compatibilité navigateurs

La balise <radialGradient> bénéficie d'une excellente compatibilité avec tous les navigateurs modernes :

Vous pouvez donc utiliser les dégradés radiaux SVG en production sans crainte de problèmes de compatibilité sur les navigateurs actuels.

Questions fréquentes sur radialGradient

Les attributs cx et cy définissent le centre du cercle extérieur du dégradé, c'est-à-dire où se termine la transition de couleur. Les attributs fx et fy définissent le point focal, l'endroit d'où émane le dégradé. En décalant le point focal par rapport au centre, vous pouvez créer des effets de lumière réalistes, comme si une source lumineuse éclairait un objet depuis un angle particulier.

Oui, vous pouvez appliquer un dégradé radial au texte SVG en utilisant l'attribut fill sur l'élément <text>. Le dégradé sera appliqué comme remplissage des caractères, créant des effets typographiques intéressants. Vous pouvez également l'utiliser avec l'attribut stroke pour colorer uniquement le contour du texte.

Pour créer un dégradé radial responsive, utilisez gradientUnits="objectBoundingBox" (valeur par défaut) avec des valeurs en pourcentages ou des décimales entre 0 et 1. Ainsi, le dégradé s'adaptera automatiquement à la taille de l'élément qui l'utilise, quel que soit le dimensionnement du SVG.

Pour maîtriser HTML et CSS, y compris les techniques avancées comme les SVG et leurs dégradés, nous vous recommandons de suivre notre formation complète sur HTML. Cette formation vous guidera des bases jusqu'aux concepts avancés, avec des exercices pratiques pour consolider vos connaissances et créer des interfaces web modernes et professionnelles.