Couleur SVG – fill, stroke, opacité et codes couleur

La couleur SVG contrôle la façon dont formes, paths, lignes et texte sont peints. Vous pouvez définir des couleurs avec fill, stroke, des attributs d’opacité, des styles CSS, des noms de couleur, HEX, RGB, HSL, des dégradés et des motifs. Ce tutoriel présente les règles principales et montre comment les mêmes valeurs se comportent sur différents éléments SVG.

Réponse rapide : en SVG, utilisez fill pour l’intérieur des formes, paths et textes, stroke pour les contours et lignes, et opacity, fill-opacity ou stroke-opacity pour la transparence. Les couleurs peuvent être des noms, HEX, RGB/RGBA, HSL/HSLA ou des références url(#id) vers dégradés et motifs.

1<circle cx="50" cy="50" r="40" fill="#3498db" stroke="#1f4f72" stroke-width="4" />

Dans cet article, vous apprendrez à : définir les couleurs SVG avec fill et stroke, choisir les formats de couleur, colorer formes, paths et texte, et éviter les erreurs courantes.

Fonctionnement de la couleur en SVG

En SVG, colorer un élément revient à le peindre. Les propriétés de peinture contrôlent l’intérieur et le contour des formes, paths et textes.

SVG accepte deux façons courantes de définir les couleurs :

Attributs de présentation, comme fill="red" ou stroke="#00ff00", écrits sur l’élément.
Attribut style, par exemple style="fill:#ff0000; stroke:green; stroke-width:2", avec syntaxe CSS.

Les deux participent à la cascade CSS et à l’héritage, mais style en ligne a généralement priorité sur un attribut de présentation équivalent. Pour un guide plus complet sur les styles SVG en C#, consultez SVG CSS vs Inline Styles vs Presentation Attributes.

Fill et stroke

Propriété	Effet	Valeur par défaut
`fill`	Peint l’intérieur d’une forme ou d’un path fermé	`black`
`stroke`	Peint le contour d’une forme, ligne ou texte	Non rendu

Une forme peut utiliser l’un ou les deux. Une ligne (<line>) n’a pas d’intérieur : elle doit être rendue avec stroke.

Règles de valeurs de couleur SVG

Sans fill, une forme fermée devient noire.
fill="none" ou fill="transparent" rend l’intérieur transparent.
Sans stroke, aucun contour n’est dessiné, même si stroke-width existe.
fill et stroke acceptent noms, HEX, RGB/RGBA, HSL/HSLA, dégradés et motifs.

Codes couleur SVG – HEX, RGB, HSL et noms

Résumé rapide

HEX – compact pour icônes et illustrations statiques.
RGB/RGBA – pratique quand les valeurs viennent du code ou nécessitent un alpha.
HSL/HSLA – utile pour ajuster teinte, saturation et luminosité.

Format	Usage recommandé	Exemple
Nom	Exemples lisibles et prototypes	`fill="green"`
HEX	Couleurs compactes et stables	`fill="#00FF00"`
RGB	Valeurs issues des canaux rouge, vert, bleu	`fill="rgb(0,255,0)"`
RGBA	Couleur avec transparence	`fill="rgba(0,255,0,0.6)"`
HSL	Ajustements de design	`fill="hsl(120,100%,50%)"`
HSLA	HSL avec transparence	`fill="hsla(120,100%,50%,0.6)"`
`url(#id)`	Dégradés et motifs dans `<defs>`	`fill="url(#grad1)"`

Exemples de codes couleur SVG

1<circle cx="50" cy="50" r="40" fill="green" stroke="red" />
2<circle cx="50" cy="50" r="40" fill="#00FF00" stroke="#FF0000" />
3<circle cx="50" cy="50" r="40" fill="rgb(0,255,0)" stroke="rgb(255,0,0)" />
4<circle cx="50" cy="50" r="40" fill="rgba(0,255,0,0.6)" stroke="rgba(255,0,0,0.8)" />
5<circle cx="50" cy="50" r="40" fill="hsl(120,100%,50%)" stroke="hsl(0,100%,50%)" />

Comment définir une couleur SVG

Choisissez l’élément cible, par exemple <circle>, <path>, <line>, <polygon> ou <text>.
Utilisez fill pour l’intérieur des formes fermées, paths et textes.
Utilisez stroke et stroke-width pour contours et lignes.
Choisissez un format : nom, HEX, RGB/RGBA, HSL/HSLA ou url(#id).
Utilisez fill-opacity, stroke-opacity, RGBA ou HSLA pour la transparence.
Vérifiez les valeurs par défaut : fill absent devient noir, stroke absent rend le contour invisible.

Convertisseur de couleur SVG en ligne

Utilisez le convertisseur de couleur en ligne pour obtenir une valeur précise avant de la placer dans fill, stroke, style ou un stop de dégradé. Vous pouvez par exemple convertir une couleur de marque RGB en HEX pour un SVG compact, ou HEX en HSL pour ajuster plus facilement teinte et saturation. Le convertisseur ne modifie pas le fichier SVG; copiez la valeur dans l’attribut ou la déclaration CSS souhaitée.

Colorer des formes SVG

Couleur d'un cercle SVG

Un cercle est idéal pour démontrer fill et stroke.

1<svg height="200" width="700" xmlns="http://www.w3.org/2000/svg">
2  <circle cx="70"  cy="70" r="50" />
3  <circle cx="200" cy="70" r="50" fill="#79C99E" />
4  <circle cx="330" cy="70" r="50" fill="#79C99E" stroke="#508484" stroke-width="10" />
5  <circle cx="460" cy="70" r="50" fill="#79C99E" stroke-width="10" />
6  <circle cx="590" cy="70" r="50" fill="none" stroke="#508484" stroke-width="10" />
7</svg>

Cercles SVG montrant différentes combinaisons de fill et stroke

Le premier cercle utilise le fill noir par défaut; le quatrième a stroke-width mais pas de stroke, donc son contour reste invisible; le dernier supprime le remplissage et garde seulement le contour.

Couleur des lignes et polylignes SVG

Les lignes et polylignes ouvertes dépendent principalement de stroke. fill n’a pas d’effet sur <line>.

1<svg height="400" width="700" xmlns="http://www.w3.org/2000/svg">
2    <line x1="30" y1="30" x2="30" y2="300" style="stroke:#4387be; stroke-width:10" />
3    <line x1="55" y1="27" x2="130" y2="300" style="stroke:#c4456d; stroke-width:10" />
4    <polyline points="300,100 360,50 420,100 480,50 540,100 600,50 660,100" style="fill:none; stroke:#fb6796; stroke-width:5" />
5    <polyline points="300,200 360,150 420,200 480,150 540,200 600,150 660,200" style="fill:#c9d7e1; stroke:#fb6796; stroke-width:5" />
6</svg>

Lignes SVG et polylignes avec stroke, fill et comportements de couleur mixtes

Polyline et polygon

Une <polyline> est ouverte, alors qu’un <polygon> est toujours fermé. Avec les mêmes valeurs de fill et stroke, leur rendu diffère.

Polyline ouverte et polygon fermé avec fill et stroke identiques

Couleur des paths SVG

Les paths peuvent être ouverts ou fermés. Leur rendu dépend donc de la présence d’un intérieur à remplir et de la valeur de fill.

Deux paths SVG comparant fill none et un path rempli

Couleur du texte SVG

Le texte SVG peut utiliser fill, stroke et même un dégradé en remplissage. Sans fill, le texte s’affiche en noir par défaut.

Exemples de texte SVG avec fill par défaut, fill et stroke, texte en contour et dégradé

Consultez aussi Remplissages et contours en SVG et Dégradés SVG.

Opacité SVG et couleurs transparentes

La transparence peut être portée par la couleur (rgba(), hsla()) ou par des attributs dédiés comme fill-opacity et stroke-opacity. Utilisez opacity quand tout l’élément doit devenir transparent, y compris son contour et ses enfants.

Rectangles SVG montrant RGBA, HSLA et HEX avec fill-opacity

Erreurs courantes et corrections

Problème	Cause	Correction
Le contour est invisible	`stroke-width` existe mais `stroke` manque	Ajoutez `stroke="#d80539" stroke-width="4"`
La forme devient noire	`fill` est omis	Ajoutez `fill="none"` ou une couleur précise
La valeur de couleur est ignorée	Chaîne de couleur invalide	Utilisez nom, HEX, RGB/RGBA ou HSL/HSLA valide
L’opacité ne change rien	HEX ne contient pas de transparence	Utilisez RGBA, HSLA, `fill-opacity` ou `stroke-opacity`
Le CSS ne s’applique pas	Un style en ligne ou une règle plus spécifique le remplace	Inspectez les styles calculés

FAQ – couleur SVG

Quel format de couleur SVG choisir ?

Utilisez HEX pour des graphiques statiques compacts, RGB/RGBA lorsque les valeurs viennent du code ou nécessitent un alpha, et HSL/HSLA pour ajuster teinte, saturation ou luminosité.

Comment rendre une couleur SVG transparente ?

Utilisez rgba() ou hsla(), ou gardez la couleur séparée et ajoutez fill-opacity ou stroke-opacity.

Pourquoi fill ne change-t-il pas la couleur d'une ligne SVG ?

<line> n’a pas d’intérieur. Utilisez stroke pour les lignes, polylignes, contours et paths ouverts.

SVG peut-il utiliser des dégradés comme couleurs ?

Oui. Utilisez fill="url(#gradient-id)" ou stroke="url(#gradient-id)" pour appliquer un dégradé défini dans <defs>.

Comment changer les couleurs SVG par programme ?

Chargez le document, sélectionnez l’élément, mettez à jour fill, stroke, style ou les stop-color, puis enregistrez. Consultez How to Change SVG Color et Changer les couleurs SVG en Python.

Spécification et ressources associées

La section painting définit peinture SVG, fill, stroke, opacité, dégradés, motifs et serveurs de peinture.
La liste SVG 1.1 des mots-clés de couleur est utile pour les couleurs nommées.
Utilisez Remplissages et contours en SVG pour stroke width, line caps, line joins et dash patterns.
Ouvrez Dégradés SVG pour appliquer des dégradés aux remplissages et contours.
Consultez SVG Styling, Fonts, and Gradients in C# pour les workflows de style avec Aspose.SVG for .NET.

Remplissages et contours en SVG Couleur d'arrière-plan SVG