Remplissages et contours en SVG – attributs et exemples

Le remplissage et le contour sont les deux opérations de peinture essentielles en SVG. Les formes, paths et textes utilisent fill pour la peinture intérieure et stroke pour le contour. Ces valeurs peuvent être écrites comme attributs de présentation, par exemple fill="red", ou dans l’attribut CSS style.

Cet article explique comment fonctionnent fill et stroke, clarifie la différence entre propriétés et attributs, et montre comment contrôler couleur, opacité, épaisseur, extrémités de ligne, jonctions et motifs pointillés.

Dans cet article, vous apprendrez à :

Utiliser fill pour peindre l’intérieur de formes, paths et textes SVG.
Utiliser stroke et stroke-width pour dessiner des contours.
Contrôler extrémités, jonctions, pointillés et opacité du contour.
Choisir entre attributs de présentation et CSS en ligne.
Éviter les erreurs courantes comme le remplissage noir par défaut ou les contours invisibles.

Modèle de peinture SVG – fill et stroke

Lorsqu’une forme SVG est rendue, la peinture se fait en deux étapes :

Le fill peint d’abord l’intérieur de la forme.
Le stroke peint ensuite le contour, centré sur le path de la forme.

Si fill n’est pas indiqué, la forme est remplie en noir par défaut. Si stroke n’est pas indiqué, aucun contour n’est dessiné.

Propriétés et attributs en SVG

En SVG, fill et stroke sont des propriétés CSS, mais elles peuvent être appliquées de plusieurs façons.

Concept	Exemple
Propriété CSS	`fill`, `stroke`, `stroke-width`
Attribut de présentation	`fill="red" stroke="#00ff00" stroke-width="2"`
CSS en ligne	`style="fill:red; stroke:#00ff00; stroke-width:2"`

Utilisez les attributs de présentation pour un balisage simple et style lorsque plusieurs propriétés doivent rester ensemble sur le même élément.

Comment utiliser fill et stroke en SVG

Choisissez l’élément à peindre, comme <path>, <rect>, <circle>, <polyline> ou <text>.
Définissez fill pour l’intérieur ou fill="none" si seul le contour doit être visible.
Définissez stroke pour la couleur du contour.
Définissez stroke-width pour rendre le contour visible et contrôler son épaisseur.
Ajoutez stroke-linecap, stroke-linejoin ou stroke-dasharray si le contour doit avoir une forme ou un motif précis.
Utilisez fill-opacity et stroke-opacity pour gérer séparément la transparence du remplissage et du contour.

SVG Fill

La propriété fill définit la peinture intérieure d’une forme ou d’un texte. Elle s’applique à <rect>, <circle>, <path> et aux éléments de texte. Si fill n’est pas spécifié, la valeur par défaut est black.

Valeur	Description	Exemple
valeur de couleur	Remplit la forme avec une couleur unie	`fill="red"`
`none`	Désactive le remplissage	`fill="none"`
`url(#id)`	Utilise un serveur de peinture, dégradé ou motif	`fill="url(#gradient1)"`
`currentColor`	Utilise la couleur courante du texte	`fill="currentColor"`

L’exemple ci-dessous compare un path avec fill="none" et le même path sans remplissage explicite ( two-paths.svg) :

1<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
2    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
3    <path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" transform="translate(0 125)" />
4</svg>

Deux paths SVG comparant fill none et le remplissage noir par défaut

SVG Stroke

La propriété stroke définit la peinture du contour d’une forme. Contrairement à fill, stroke est désactivé par défaut. Le contour est centré sur le path et s’étend autant vers l’intérieur que vers l’extérieur.

Couleur et épaisseur du contour

Propriété	Description	Exemple
`stroke`	Définit la couleur du contour	`stroke="red"`
`stroke-width`	Contrôle son épaisseur	`stroke-width="5"`

Valeurs de `stroke-linecap`

stroke-linecap définit la forme des extrémités d’une ligne SVG :

Valeur	Apparence
`butt`	Bord plat qui s’arrête exactement au point final.
`square`	Bord plat qui dépasse d’une demi-épaisseur de trait.
`round`	Extrémité semi-circulaire.

L’effet est visible avec un stroke-width important ( lines.svg).

 1<svg height="200" width="800" xmlns="http://www.w3.org/2000/svg">
 2  <g stroke="grey">
 3    <path stroke-width="3" d="M 5 20 l 215 0" />
 4    <path stroke-width="15" d="M 5 60 l 215 0" />
 5    <path stroke-width="30" d="M 5 100 l 215 0" />
 6  </g>
 7 <g stroke="grey" stroke-width="30">
 8    <path stroke-linecap="butt" d="M 300 20 l 215 0" />
 9    <path stroke-linecap="round" d="M 300 60 l 215 0" />
10    <path stroke-linecap="square" d="M 300 100 l 215 0" />
11  </g>
12  <g stroke="orange" stroke-width="2">
13    <line x1="300" y1="20" x2="515" y2="20" />
14    <path d="M 300 60 l 215 0" />
15    <path d="M 300 100 l 215 0" />
16  </g>
17</svg>

Deux séries de lignes SVG avec différentes épaisseurs et propriétés stroke-linecap

Les lignes orange montrent les paths originaux; les traits gris montrent comment stroke-width et stroke-linecap modifient le rendu.

Valeurs de `stroke-linejoin`

stroke-linejoin contrôle la forme des coins où deux segments se rencontrent : miter, round ou bevel.

1<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
2    <g stroke-width="20" fill="none">
3        <polyline points="40 60 80 20 120 60 160 20 200 60 240 20" stroke="grey" stroke-linecap="butt"  stroke-linejoin="miter" />
4        <polyline points="40 140 80 100 120 140 160 100 200 140 240 100" stroke="#CD5C5C" stroke-linecap="round" stroke-linejoin="round" />
5        <polyline points="40 220 80 180 120 220 160 180 200 220 240 180" stroke="black"  stroke-linecap="square" stroke-linejoin="bevel" />
6    </g>
7</svg>

Trois polylignes avec différentes propriétés stroke-linejoin

Pointillés – `stroke-dasharray`

stroke-dasharray transforme un contour plein en motif alternant tirets et espaces. Les nombres définissent les longueurs en unités utilisateur.

1stroke-dasharray="10 5"   /* tiret 10, espace 5 */
2stroke-dasharray="20 10 5"/* la liste impaire est répétée */

1<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
2    <line x1="20" y1="30" x2="400" y2="30" style="stroke:rgb(112, 128, 144); fill:none; stroke-width:10; stroke-dasharray:10 5;" />
3    <line x1="20" y1="80" x2="400" y2="80" style="stroke:olive; fill:none; stroke-width: 20; stroke-dasharray: 20 10 5;" />
4    <path d="M 10 200 Q 50 100 150 200 T 230 200 T 300 200 T 390 200" stroke="#FF8C00" stroke-width="8" fill="none" stroke-linecap="round" stroke-dasharray="15 10 2 8" />
5</svg>

Trois paths avec différentes propriétés stroke-dasharray

Attributs de peinture supplémentaires

Attribut	Rôle	Exemple
`fill-opacity`	Transparence du remplissage de `0` à `1`	`fill-opacity="0.6"`
`fill-rule`	Règle de remplissage pour formes complexes, `nonzero` ou `evenodd`	`fill-rule="evenodd"`
`stroke-opacity`	Transparence du contour	`stroke-opacity="0.6"`
`stroke-miterlimit`	Limite la longueur d’une jonction miter	`stroke-miterlimit="4"`
`stroke-dashoffset`	Décale le motif de pointillés	`stroke-dashoffset="5"`

FAQ – fill et stroke en SVG

Comment afficher un path seulement en contour ?

Définissez fill="none", puis contrôlez le contour avec stroke et stroke-width.

Quelle est la différence entre fill et stroke en SVG ?

fill peint l’intérieur d’une forme, d’un path ou d’un texte. stroke peint le contour le long de la frontière ou du path.

Pourquoi stroke-dasharray semble irrégulier sur les courbes ?

Les longueurs de tirets sont mesurées le long du path. Les courbes peuvent donner une impression visuelle irrégulière; ajustez les longueurs ou utilisez stroke-dashoffset.

Les dégradés peuvent-ils être utilisés avec fill et stroke ?

Oui. Utilisez fill="url(#id)" ou stroke="url(#id)", où id référence une définition de dégradé ou de motif.

Erreurs courantes et corrections

Problème	Cause	Correction
La forme apparaît noire	`fill` est omis ou reste par défaut	Ajoutez `fill="none"` ou une couleur valide
Les pointillés manquent	Valeurs trop petites pour la longueur du path	Augmentez les longueurs ou utilisez `stroke-dashoffset`
Les extrémités semblent coupées	`stroke-linecap` non défini avec un trait épais	Utilisez `stroke-linecap="square"` ou `round`
Pics très longs aux jonctions	`stroke-linejoin="miter"` sur angles aigus	Réduisez `stroke-miterlimit` ou utilisez `round` / `bevel`
L’opacité affecte tout	`opacity` utilisé au lieu de `fill-opacity` ou `stroke-opacity`	Utilisez les attributs d’opacité spécifiques

Recettes rapides

Objectif	Code SVG
Désactiver le remplissage	`fill="none"`
Couleur de remplissage	`fill="orange"`
Remplissage semi-transparent	`fill-opacity="0.5"`
Activer un contour	`stroke="black"`
Contour plus épais	`stroke-width="4"`
Contour pointillé	`stroke-dasharray="10 5"`
Extrémités arrondies	`stroke-linecap="round"`

Spécification et ressources associées

La section SVG sur painting définit fill, stroke, serveurs de peinture, opacité, line caps, joins et dash properties.
La définition SVG 2 des attributs de présentation explique comment fill et stroke peuvent s’écrire comme attributs SVG.
La liste SVG 1.1 des mots-clés de couleur est utile pour des valeurs nommées comme red, orange ou DarkCyan.
Utilisez Couleur SVG pour les formats de couleur, l’opacité et la transparence.
Ouvrez Dégradés SVG pour appliquer des dégradés à fill et stroke.
Consultez Changer les couleurs SVG en Python pour modifier fill, stroke, styles en ligne et stops de dégradé avec Python via .NET.

Matrice de transformation SVG Couleur SVG