Guide des dégradés SVG – exemples linéaires et radiaux

Les dégradés SVG créent des transitions de couleur douces pour remplir ou tracer formes, texte et paths. Ce tutoriel explique comment <linearGradient>, <radialGradient>, <stop>, fill="url(#id)" et stroke="url(#id)" fonctionnent ensemble.

Réponse rapide : définissez un dégradé dans <defs>, donnez-lui un id, ajoutez des éléments <stop> avec offset et stop-color, puis référencez-le depuis une forme ou un texte avec fill="url(#id)" ou stroke="url(#id)".

<svg width="220" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="brand-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="steelblue" />
      <stop offset="100%" stop-color="gold" />
    </linearGradient>
  </defs>
  <rect x="20" y="20" width="180" height="80" fill="url(#brand-gradient)" />
</svg>

Dans cet article, vous apprendrez à créer des définitions réutilisables dans <defs>, appliquer des dégradés à fill et stroke, contrôler direction, point focal et stops, et éviter les erreurs avec id, url(#id), offset et gradientUnits.

Dégradés SVG

Un dégradé est une transition progressive entre couleurs. SVG prend en charge <linearGradient> et <radialGradient>. Ces éléments sont des paint servers : ils sont définis une fois, puis référencés par les éléments visibles.

Comment créer des dégradés SVG

1. Ajoutez un bloc <defs> pour les définitions réutilisables.
2. Choisissez <linearGradient> pour une transition droite ou <radialGradient> pour une transition depuis un centre.
3. Définissez un id unique.
4. Ajoutez des <stop> avec des offset croissants et des stop-color.
5. Appliquez le dégradé avec fill="url(#id)" ou stroke="url(#id)".
6. Ajustez x1, y1, x2, y2, cx, cy, r, fx, fy ou gradientUnits si le rendu n’est pas celui attendu.

Dégradé linéaire SVG

Un dégradé linéaire change de couleur le long d’un vecteur défini par x1, y1, x2 et y2. Avec gradientUnits="objectBoundingBox", les valeurs sont souvent des pourcentages; avec userSpaceOnUse, elles utilisent le système de coordonnées SVG courant.

<svg height="250" width="700" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="10%" style="stop-color:LIGHTSALMON" />
			<stop offset="50%" style="stop-color:TEAL" />
			<stop offset="90%" style="stop-color:LIGHTPINK" />
		</linearGradient>
	</defs>
    <ellipse cx="300" cy="170" rx="165" ry="55" fill="url(#grad1)" />
    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="90" fill="url(#grad1)" >Linear Gradient</text>
</svg>

Le texte et l’ellipse partagent fill="url(#grad1)", donc la même définition de dégradé.

Dégradé radial SVG

Un dégradé radial se propage depuis un centre ou un point focal. cx, cy et r définissent le cercle final; fx et fy définissent le point focal.

<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="myRG" cx="0.5" cy="0.5" r="0.9" fx="0.5" fy="0.5" spreadMethod="pad">
            <stop offset="0%" stop-color="BISQUE" />
            <stop offset="60%" stop-color="CADETBLUE" />
        </radialGradient>
    </defs>
    <ellipse cx="300" cy="170" rx="165" ry="55" fill="url(#myRG)" />
    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="85" fill="url(#myRG)" >Radial Gradient</text>
</svg>

Déplacer fx et fy, par exemple vers 25%, décale la zone lumineuse vers un côté de la forme.

Erreurs courantes et corrections

Problème	Cause	Correction
Le dégradé n’est pas visible	id absent, référence incorrecte ou élément cible sans fill / stroke	Donnez un id unique et référencez url(#id)
Le dégradé ne s’applique pas	Référence fill ou stroke incorrecte	Vérifiez que l’id correspond exactement
Direction inattendue	Mauvais x1, y1, x2, y2	Ajustez le vecteur de dégradé
Le radial ne couvre pas la zone attendue	r, centre, point focal ou gradientUnits inadaptés	Ajustez r, cx, cy, fx, fy ou utilisez userSpaceOnUse
Les stops se mélangent mal	offset manquants ou dans le mauvais ordre	Vérifiez l’ordre de 0% à 100%

FAQ – dégradés SVG

Comment appliquer un dégradé SVG à une forme ?

Définissez le dégradé dans <defs>, donnez-lui un id, puis mettez fill ou stroke à url(#id) sur l’élément cible.

Quelle est la différence entre linearGradient et radialGradient ?

<linearGradient> crée une transition le long d’une ligne. <radialGradient> diffuse la couleur depuis un centre ou un point focal.

Peut-on utiliser un dégradé pour stroke ?

Oui. Définissez le dégradé dans <defs> et utilisez stroke="url(#id)" avec un stroke-width suffisant.

Puis-je modifier des couleurs de dégradé par programme ?

Oui. En Python via .NET, chargez le SVG et modifiez les attributs stop-color des éléments <stop>. Consultez Changer les couleurs SVG en Python.

Ressources associées

• La spécification SVG 2 Paint Servers définit dégradés, stops et paint servers.
• Dégradés SVG en C# montre comment créer des dégradés avec Aspose.SVG for .NET.
• Couleur SVG explique les valeurs de couleur et l’opacité utilisées par les dégradés.
• Filtres SVG explique les effets visuels qui peuvent se combiner avec des formes dégradées.