L’essentiel en bref
- Un dégradé SVG se définit une fois comme élément linearGradient ou radialGradient avec des enfants stop, reçoit un id, et s’applique en réglant fill ou stroke sur url(#id).
- Par défaut, les coordonnées d’un dégradé SVG utilisent les unités objectBoundingBox, où 0 et 1 sont les bords de la forme peinte.
- gradientUnits="userSpaceOnUse" place le dégradé dans les coordonnées propres du dessin, ce qui permet à un seul dégradé de couvrir plusieurs formes et corrige les dégradés sur les lignes parfaitement droites.
- spreadMethod décide de ce qui se passe au-delà des extrémités du dégradé : pad prolonge les couleurs d’extrémité, reflect renvoie le fondu en miroir et repeat le recommence.
- Un masque SVG utilise la luminosité : un dégradé du blanc au noir dans un masque estompe tout ce à quoi il est appliqué.
Sur cette page
Un dégradé SVG est une peinture que vous définissez une fois et appliquez à n’importe quelle forme, ligne ou texte d’un SVG. Vous écrivez un élément <linearGradient> ou <radialGradient> dans <defs>, vous lui donnez des enfants <stop> pour ses couleurs et un id, puis vous réglez le fill ou le stroke d’une forme sur url(#id). Contrairement à un fond CSS, il peut colorer un contour ou un seul mot, et il s’adapte à l’échelle du dessin.
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="dusk" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#1e1b4b" />
<stop offset="0.55" stop-color="#7c3aed" />
<stop offset="1" stop-color="#f472b6" />
</linearGradient>
</defs>
<rect width="200" height="120" rx="16" fill="url(#dusk)" />
</svg>linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)linearGradient et ses arrêts
x1, y1, x2 et y2 fixent le début et la fin de la ligne du dégradé. Chaque <stop> prend un offset de 0 à 1 (ou de 0 % à 100 %), une stop-color et une stop-opacity facultative. stop-color est aussi une propriété CSS : vous pouvez donc thématiser vos dégradés depuis une feuille de style, par exemple stop { stop-color: var(--accent); }.
| Attribut | Valeur par défaut | Ce qu’il fait |
|---|---|---|
x1 y1 x2 y2 | 0 0 1 0, de gauche à droite | Points de début et de fin de la ligne du dégradé |
gradientUnits | objectBoundingBox | Indique si les coordonnées sont relatives à la forme ou au dessin |
spreadMethod | pad | Ce qui se passe au-delà des extrémités : pad, reflect ou repeat |
gradientTransform | aucune | Fait pivoter, met à l’échelle ou incline le dégradé, par exemple rotate(30) |
href | aucune | Hérite des arrêts et réglages d’un autre dégradé |
href évite les répétitions. Définissez vos arrêts une fois dans un dégradé de base, puis créez des variantes qui y renvoient et ne changent que la direction ou les unités. La référence linearGradient de MDN couvre chaque attribut.
radialGradient : centre, rayon et point focal
Un dégradé radial prend un centre (cx, cy) et un rayon (r), tous à 0,5 par défaut, de sorte qu’il remplit la forme depuis le milieu. Il a aussi quelque chose qui manque au CSS : un point focal distinct (fx, fy) où commence la première couleur. Décentrer le point focal donne l’impression qu’une sphère est éclairée d’un côté.
<radialGradient id="orb" cx="0.5" cy="0.5" r="0.5" fx="0.32" fy="0.28">
<stop offset="0" stop-color="#e0f2fe" />
<stop offset="0.45" stop-color="#0ea5e9" />
<stop offset="1" stop-color="#082f49" />
</radialGradient>
<circle cx="60" cy="60" r="50" fill="url(#orb)" />radial-gradient(circle at 32% 28%, #e0f2fe, #0ea5e9 35%, #082f49 80%)gradientUnits : objectBoundingBox ou userSpaceOnUse
Avec objectBoundingBox, la valeur par défaut, 0 et 1 désignent les bords de la forme peinte : chaque forme reçoit le dégradé entier, étiré pour s’adapter. Avec userSpaceOnUse, les coordonnées sont dans les unités propres du SVG : le dégradé reste en place et chaque forme révèle la partie qu’elle couvre. C’est ainsi qu’une rangée de barres peut partager un même dégradé continu.
objectBoundingBox
- Coordonnées de 0 à 1 sur chaque forme
- Chaque forme affiche le dégradé entier
- Le dégradé s’étire selon les proportions de la forme
- Échoue sur une ligne parfaitement horizontale ou verticale
userSpaceOnUse
- Coordonnées dans les unités propres du dessin
- Chaque forme révèle sa tranche d’un même dégradé
- Les angles restent justes quelle que soit la forme
- Fonctionne sur les lignes droites et les contours fins
Dégradés sur les contours et le texte
stroke="url(#id)" peint les contours : c’est ainsi que se dessinent les icônes en dégradé, les anneaux de progression et les courbes de graphiques. Sur <text>, fill="url(#id)" colore les lettres, et les mots restent sélectionnables et indexables. Ajoutez une couleur unie après l’URL, comme fill="url(#dusk) #7c3aed", et elle sera utilisée si le dégradé est introuvable.
<svg viewBox="0 0 320 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="line" gradientUnits="userSpaceOnUse" x1="20" y1="0" x2="300" y2="0">
<stop offset="0" stop-color="#22d3ee" />
<stop offset="1" stop-color="#a855f7" />
</linearGradient>
</defs>
<path d="M20 90 C 90 20, 160 110, 300 30" fill="none" stroke="url(#line)" stroke-width="6" stroke-linecap="round" />
<text x="20" y="115" font-size="20" font-weight="700" fill="url(#line) #7c3aed">Growth</text>
</svg>Pour du lettrage en dégradé en HTML plutôt qu’en SVG, le texte en dégradé en CSS est généralement plus simple. Passez au texte SVG quand les mots font partie d’une illustration ou d’un logo, ou doivent suivre un tracé.
spreadMethod : pad, reflect et repeat
Quand la ligne du dégradé est plus courte que la forme, spreadMethod décide de ce qui remplit le reste. pad prolonge les couleurs d’extrémité, reflect renvoie le fondu en miroir dans un sens puis dans l’autre, et repeat le recommence avec un bord net. Ici, chaque dégradé va de 30 % à 70 % de la largeur.
Estomper avec des masques SVG
Un masque utilise la luminosité : les zones blanches montrent ce qui est masqué, les zones noires le cachent, et les gris se situent entre les deux. Un dégradé du blanc au noir dans un <mask> estompe donc en douceur n’importe quelle forme ou image jusqu’à la faire disparaître : c’est ainsi que l’on adoucit le bord d’une photo ou que l’on fait s’estomper le début d’une courbe de graphique.
<defs>
<linearGradient id="fade" x1="0" y1="0" x2="0" y2="1">
<stop offset="0.4" stop-color="#fff" />
<stop offset="1" stop-color="#000" />
</linearGradient>
<mask id="soft-bottom">
<rect width="100%" height="100%" fill="url(#fade)" />
</mask>
</defs>
<image href="photo.jpg" width="100%" height="100%" mask="url(#soft-bottom)" />Pour les éléments HTML, la propriété CSS mask-image: linear-gradient(#000 40%, transparent) fait le même travail, en utilisant l’alpha plutôt que la luminosité. La technique du masque sert aussi aux bordures en dégradé CSS transparentes.
À éviter
- Réutiliser le même
idde dégradé dans deux SVG intégrés sur une même page - Masquer un sprite de définitions de dégradés avec
display: none - Les unités par défaut sur des lignes droites
- De très longs dégradés sombres et lisses sans texture
À faire
- Des id uniques, ou un seul sprite de définitions partagé
- Masquer plutôt les sprites avec une largeur et une hauteur nulles
userSpaceOnUsepour les contours et les dégradés partagés- Ajouter du grain aux grands fondus, voyez la texture de bruit en CSS
Les questions qu’on nous pose
Comment ajouter un dégradé à un SVG ?
Définissez un <linearGradient> ou un <radialGradient> avec des enfants <stop> et un id dans <defs>, puis réglez le fill ou le stroke d’une forme sur url(#id).
Pourquoi mon contour en dégradé SVG ne s’affiche-t-il pas sur une ligne ?
Une ligne droite horizontale ou verticale a une boîte englobante de taille nulle, et les unités objectBoundingBox par défaut échouent. Utilisez gradientUnits="userSpaceOnUse" avec de vraies coordonnées.
Comment faire pivoter un dégradé SVG ?
Modifiez x1, y1, x2 et y2, ou ajoutez gradientTransform="rotate(45 0.5 0.5)" pour le faire pivoter autour du centre de la boîte englobante.
Peut-on changer les couleurs d’un dégradé SVG en CSS ?
Oui. stop-color et stop-opacity sont des propriétés CSS : des règles comme stop { stop-color: var(--accent); } fonctionnent sur un SVG intégré.
Pourquoi mon dégradé SVG a-t-il disparu quand j’ai masqué le SVG ?
Les définitions d’un SVG en display: none peuvent ne pas être rendues. Masquez plutôt le sprite avec une largeur et une hauteur nulles, ou avec un positionnement absolu.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
