# Dégradés SVG : linéaires, radiaux, contours, texte, masques [Canonical HTML page](https://gradiently.design/fr/guide/svg-gradients) Le SVG a son propre système de dégradés, plus ancien que les dégradés CSS et capable de choses qu’ils ne savent pas faire : colorer un contour, remplir un mot, partager un dégradé entre plusieurs formes, et estomper n’importe quoi avec un masque. ## The short version - 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é. 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 `` ou `` dans ``, vous lui donnez des enfants `` 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. ```html ``` Un dégradé en diagonale sur un rectangle arrondi. x1, y1, x2 et y2 tracent la ligne du dégradé du coin supérieur gauche au coin inférieur droit. Le même fondu, en CSS: `linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)` Le SVG ci-dessus et ce dégradé CSS correspondent sur un carré. Sur un rectangle, la version SVG s’étire avec la forme ; voyez gradientUnits plus bas. ## linearGradient et ses arrêts `x1`, `y1`, `x2` et `y2` fixent le début et la fin de la ligne du dégradé. Chaque `` 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é | Les principaux attributs de linearGradient. radialGradient les partage tous sauf la première ligne. `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](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient) 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é. ```html ``` Un point focal en haut à gauche transforme un cercle plat en sphère brillante. Sphère éclairée, approchée en CSS: `radial-gradient(circle at 32% 28%, #e0f2fe, #0ea5e9 35%, #082f49 80%)` Le CSS peut déplacer le centre mais pas séparer centre et point focal : ce n’est donc qu’une approximation de la sphère SVG. Comparez avec [les dégradés radiaux en CSS](https://gradiently.design/fr/guide/css-radial-gradient). ## 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 > **La ligne droite invisible** Une `` horizontale a une boîte englobante de hauteur nulle, et les unités de boîte englobante ne peuvent pas se calculer à partir de zéro : un contour en dégradé par défaut n’y affiche donc rien. Réglez `gradientUnits="userSpaceOnUse"` et donnez de vraies coordonnées. ## 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 ``, `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. ```html ``` Un seul dégradé en unités du dessin, partagé par une courbe et un mot. Les deux vont du cyan au violet sur la même étendue horizontale. Pour du lettrage en dégradé en HTML plutôt qu’en SVG, [le texte en dégradé en CSS](https://gradiently.design/fr/guide/css-gradient-text) 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. - pad: `linear-gradient(90deg, #0f766e 30%, #fde68a 70%)` - reflect: `repeating-linear-gradient(90deg, #fde68a -10%, #0f766e 30%, #fde68a 70%)` - repeat: `repeating-linear-gradient(90deg, #0f766e 30%, #fde68a 70%)` Du bleu canard au sable avec les trois méthodes d’extension, reproduites en CSS pour les comparer côte à côte. ## 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 `` 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. ```html ``` La photo est entièrement visible en haut et s’estompe sur ses 60 % inférieurs. 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](https://gradiently.design/fr/guide/css-gradient-border) transparentes. ### À éviter - Réutiliser le même `id` de 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 - `userSpaceOnUse` pour les contours et les dégradés partagés - Ajouter du grain aux grands fondus, voyez [la texture de bruit en CSS](https://gradiently.design/fr/guide/css-noise-texture) ## FAQ ### Comment ajouter un dégradé à un SVG ? Définissez un `` ou un `` avec des enfants `` et un `id` dans ``, 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.