> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Dégradé SVG sur un chemin : vérifier la couleur au virage
> Compare un dégradé de coordonnées SVG à des bandes de couleur choisies sur un ruban courbe. Examine la source, teste deux tailles et évalue le compromis géométrique.
Source: https://perfectvector.com/fr/blog/svg-gradient-curved-stroke
Language: fr
Author: Irene Kim
Published: 2026-10-05T08:00:00+09:00
Updated: 2026-10-05T08:00:00+09:00
Un `linearGradient` SVG ordinaire ne mesure pas la progression le long d’un chemin courbe. Il peint selon un vecteur de dégradé dans un système de coordonnées. Si un ruban revient sur lui-même, deux points à la même position le long de ce vecteur peuvent recevoir la même couleur, même s’ils sont très éloignés sur le ruban.
Pour un dessin statique dont la couleur doit progresser autour d’un virage, tu peux créer des sections colorées séparées. Tu contrôles ainsi la séquence, mais tu ajoutes de la géométrie et des limites de couleur visibles. Notre exemple original compare un dégradé horizontal à huit bandes choisies sur le même parcours créé par nos soins. Les deux fichiers contiennent des chemins et aucune image intégrée.
## Vérifie où la couleur se répète
La [spécification des serveurs de peinture SVG2](https://www.w3.org/TR/SVG2/pservers.html) définit les dégradés linéaires par un vecteur et ses étapes de couleur. Elle décrit les dégradés radiaux par leur propre géométrie circulaire. Aucune de ces définitions ne transforme un chemin quelconque en axe de couleur fondé sur la distance parcourue.
Notre ruban commence en haut à gauche, va vers la droite, contourne un demi-cercle et revient en bas à gauche. Un dégradé horizontal rend les deux extrémités gauches orange et le virage droit violet. C’est un dégradé de coordonnées valide ; il répond simplement à une autre question de conception que « changer de couleur du début à la fin de ce parcours ».
Le [tutoriel de dégradés de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) explique le modèle d’extrémités et d’étapes. Ajouter des étapes change cette séquence de couleur fondée sur les coordonnées. Cela ne fait pas suivre la courbe à la peinture.
**Couleur de coordonnées et bandes créées**
*Illustration : un dégradé de coordonnées peut répéter une couleur sur un parcours qui revient, tandis que des bandes séparées peuvent attribuer une autre séquence du début à la fin. Les décomptes sources réels et les échantillons de navigateur ci-dessous proviennent de fichiers SVG créés indépendamment.*
## Garde un dégradé ordinaire comme contrôle
Enregistre ce fichier complet sous `coordinate.svg`. Le chemin utilise un trait de 24 unités dans un viewBox de `200×160`. Ses portions droites et son demi-cercle droit forment une seule ligne centrale modifiable.
```svg
```
Nous utilisons `gradientUnits="userSpaceOnUse"` pour rendre les extrémités du dégradé explicites dans le système de coordonnées source. Passer à des coordonnées de boîte englobante changerait la façon d’exprimer ces extrémités ; cela n’introduirait pas une peinture fondée sur la distance du chemin. Consulte la [référence de gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) et notre [guide des coordonnées de dégradé](https://perfectvector.com/fr/blog/svg-gradient-units).
Le parcours complet est un élément `path`. Garde cette version simple comme maître géométrique, même si tu choisis de livrer un traitement de couleur plus élaboré.
## Crée une séquence par paliers autour du virage
Enregistre ce qui suit sous `bands.svg`. Il divise la portion droite supérieure en deux morceaux, le demi-cercle en quatre arcs et la portion droite de retour en deux morceaux. Les couleurs sont attribuées dans l’ordre du parcours, de l’orange au départ supérieur au violet à l’arrivée inférieure.
```svg
```
Ce sont huit bandes choisies manuellement avec des segments de longueurs inégales. Elles ne calculent pas des incréments de couleur uniformes par unité de longueur du chemin et ne créent pas d’ombrage continu. Les extrémités décimales arrondies des arcs approchent le parcours original ; cet exemple ne revendique pas un contour identique au pixel près.
La [référence de `path`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) documente l’élément et ses données de chemin. Chaque section reste ici une ligne centrale avec un trait, plutôt qu’une forme remplie fermée issue de la conversion du contour. Si une destination exige des formes fermées, prépare et examine cette géométrie séparément au lieu de traiter ces morceaux de trait comme des contours de coupe.
Nous utilisons [`stroke-linecap="butt"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) pour que les morceaux adjacents ne dépassent pas leurs extrémités. Des terminaisons rondes sur chaque section interne recouvriraient les couleurs voisines. Les transitions de droite à arc nécessitent aussi des directions concordantes ; notre [guide des raccords lisses](https://perfectvector.com/fr/blog/svg-bezier-smooth-joins) traite séparément de la continuité géométrique.
## Compare deux tailles et deux positions
Nous avons rendu les deux fichiers originaux dans Chrome à `200×160` et `400×320` pixels CSS. Le navigateur décodait chaque SVG, puis le peignait dans un canevas dont les dimensions du tampon correspondaient aux dimensions de test. Le rapport de pixels de l’appareil du navigateur était de 2 ; ces échantillons enregistrés proviennent du tampon du canevas, pas d’un comptage des pixels d’appareil sur une capture.
Aux coordonnées sources `(60,30)` et `(60,130)`, les points se trouvent sur des portions droites différentes du parcours. Ils partagent la même coordonnée horizontale : le dégradé horizontal leur donne donc la même couleur échantillonnée.
| Fichier | Échantillon supérieur à x=60 | Échantillon inférieur à x=60 | Chemins | Images intégrées |
| ----------------------- | ---------------------------- | ---------------------------- | ------- | ---------------- |
| Dégradé de coordonnées | RGB 202,100,71 | RGB 202,100,71 | 1 | 0 |
| Bandes créées | RGB 227,107,44 | RGB 112,75,170 | 8 | 0 |
| Maître géométrique plat | RGB 184,94,57 | RGB 184,94,57 | 1 | 0 |
Les paires d’échantillons étaient identiques aux deux tailles testées, avec un alpha de 255 dans les parties peintes. La zone ouverte à la coordonnée source `(100,80)` avait un alpha nul dans les six cas. Cela vérifie ces fichiers créés dans ce navigateur ; cela ne certifie pas tous les moteurs de rendu ni tous les pixels de limite.
Le rendu en bandes garde des changements de couleur discrets visibles aux deux tailles. Examine les raccords à la taille livrée, surtout après exportation ou intégration. Des morceaux séparés peuvent révéler des jointures à cause de l’anticrénelage, des arrondis ou de modifications ultérieures. Augmenter le nombre de sections peut réduire chaque saut de couleur, mais crée aussi davantage de chemins et de limites à maintenir.
## Choisis le traitement avant de décomposer le dessin
| Besoin de conception | Point de départ utile | Coût à examiner |
| ------------------------------------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| La couleur suit une direction de la page | Un dégradé de coordonnées | Positions des extrémités et limites source |
| Progression statique autour de ce parcours | Sections colorées choisies | Couleurs des sections, raccords tangents et jointures |
| Progression lisse le long d’une courbe quelconque | Approximation conçue séparément ou autre méthode de livraison | Échantillonnage, intersections, géométrie modifiable et rendu de destination |
Faire pivoter un dégradé linéaire change sa direction. Le répéter change la façon dont ses couleurs se prolongent. Aucune de ces opérations ne le fait tourner continuellement avec cette ligne centrale qui revient. Un dégradé radial peut convenir à une composition circulaire, mais il utilise sa propre géométrie de peinture plutôt qu’une solution générale fondée sur la distance du parcours.
Si tu ajustes la courbe plus tard, révise les sections ensemble. Garde un maître plat pour comparer le parcours voulu et conserve la copie du traitement de couleur séparément. Notre [guide des chemins relatifs](https://perfectvector.com/fr/blog/svg-relative-path-commands) peut aider à lire ou déplacer les commandes de chemin sous-jacentes.
Si ton dessin de départ est un PNG ou JPG et que tu as besoin de contours modifiables, [convertis la source avec PerfectVector](https://perfectvector.com/fr/image-to-vector), examine la forme et les zones ouvertes récupérées, puis garde un maître SVG propre. Choisis ou reconstruis le traitement de couleur après cette vérification géométrique. La vectorisation ne garantit pas la récupération exacte d’un ombrage continu et n’invente pas de fonction native de dégradé le long d’un chemin. Un SVG propre existant nécessite directement une modification de peinture et de géométrie ; le [guide de vectorisation d’images](https://perfectvector.com/fr/blog/what-is-image-vectorization) explique quand une conversion matricielle aide.
## Questions fréquentes
**Puis-je faire suivre n’importe quel trait courbe à un linearGradient ?**
La définition ordinaire de linearGradient ne fournit pas de réglage de distance du chemin. Son vecteur de coordonnées contrôle la peinture. L’exemple par paliers attribue des couleurs séparées à des sections séparées du parcours.
**Davantage d’étapes de dégradé corrigeront-elles les couleurs répétées au retour ?**
Davantage d’étapes peuvent affiner les transitions de couleur le long du vecteur du dégradé. Les points à la même position sur ce vecteur partagent toujours la même peinture fondée sur les coordonnées.
**Le fichier à bandes contient-il une image matricielle ?**
Non. Notre exemple créé contient huit éléments path et aucun élément image. Il présente aussi des paliers de couleur visibles plutôt qu’un dégradé continu fondé sur la distance du chemin.
**Faut-il remplacer chaque dégradé par des chemins séparés ?**
Utilise le dégradé de coordonnées plus simple lorsqu’il convient au dessin. Des sections séparées sont utiles lorsque leur progression et leur coût de modification sont acceptables ; examine les jointures et le rendu de destination avant livraison.
## Sources
1. [W3C — Serveurs de peinture SVG2](https://www.w3.org/TR/SVG2/pservers.html) — Vecteurs de dégradé, étapes et peinture fondée sur les coordonnées.
2. [MDN — Dégradés en SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) — Construction des dégradés linéaires et radiaux.
3. [MDN — gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Systèmes de coordonnées en espace utilisateur et de boîte englobante.
4. [MDN — path](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) — Éléments de chemin et données de chemin inspectables.
5. [MDN — stroke-linecap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) — Comportement des extrémités de trait plates et rondes.
## Explore
- [Read the HTML article](https://perfectvector.com/fr/blog/svg-gradient-curved-stroke)
- [Arrondir les coins SVG en modifiant la forme remplie](https://perfectvector.com/fr/blog/round-svg-path-corners.md)
- [Retour à la ligne SVG : créer des lignes mesurées avec tspan](https://perfectvector.com/fr/blog/svg-text-wrap-tspan.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)