Techniques de couleur SVG : remplissage, contour et dégradés

SVG (Scalable Vector Graphics) dispose de son propre système de couleurs qui coexiste avec HTML/CSS tout en restant distinct. Comprendre la gestion des couleurs en SVG permet de créer des icônes indépendantes de la résolution, des illustrations animées et des effets de dégradé qui s'adaptent parfaitement à toutes les tailles d'écran. Ce guide couvre toutes les principales techniques de couleur SVG, du remplissage et contour de base jusqu'aux dégradés complexes, avec des exemples pratiques tout au long.

L'attribut fill en SVG

L'attribut fill contrôle la couleur à l'intérieur d'une forme. C'est l'équivalent SVG de background-color pour les éléments HTML. Chaque forme SVG — <rect>, <circle>, <path>, <polygon>, <ellipse> — accepte un fill.

Valeurs fill de base

Fill accepte tous les mêmes formats de couleur que CSS :

<!-- Couleurs hexadécimales -->
<circle cx="50" cy="50" r="40" fill="#3B82F6" />

<!-- Couleurs nommées -->
<rect width="100" height="60" fill="tomato" />

<!-- RGB -->
<polygon points="50,10 90,90 10,90" fill="rgb(34, 197, 94)" />

<!-- HSL -->
<ellipse cx="60" cy="40" rx="50" ry="30" fill="hsl(220, 80%, 55%)" />

<!-- Fill transparent -->
<circle cx="50" cy="50" r="40" fill="none" stroke="#EF4444" stroke-width="3" />

Un fill="none" supprime entièrement le remplissage, ne laissant visible que le contour — un motif courant pour les icônes en trait.

Opacité du fill

L'attribut fill-opacity contrôle la transparence indépendamment de la couleur :

<!-- Superposition semi-transparente -->
<rect width="200" height="120" fill="#1E3A8A" fill-opacity="0.3" />

<!-- Ou utiliser rgba() directement -->
<rect width="200" height="120" fill="rgba(30, 58, 138, 0.3)" />

<!-- Ou utiliser l'hex à 8 chiffres -->
<rect width="200" height="120" fill="#1E3A8A4D" />

Ces trois exemples produisent le même résultat. L'attribut fill-opacity est légèrement mieux pris en charge par les anciens rendus SVG, tandis que rgba() et l'hex à 8 chiffres nécessitent des versions récentes des navigateurs. Pour tout ce qui cible les navigateurs modernes, les trois sont équivalents.

Règle de remplissage

Lorsqu'un chemin se croise lui-même, l'attribut fill-rule détermine quelles zones sont considérées comme étant à l'intérieur :

<!-- evenodd : zones alternées remplies et vides (pour les formes en beignet, les étoiles) -->
<path d="M50,10 L61,35 L90,35 L68,57 L79,82 L50,65 L21,82 L32,57 L10,35 L39,35 Z"
      fill="#F59E0B"
      fill-rule="evenodd" />

<!-- nonzero (par défaut) : la plupart des zones sont remplies -->
<path d="..." fill="#3B82F6" fill-rule="nonzero" />

La règle evenodd est particulièrement utile pour les formes en étoile et les designs de chemins creux. Sans elle, une étoile à cinq branches dessinée comme un chemin unique remplit le centre — evenodd rend le centre creux.

Les propriétés de contour SVG

Le contour (stroke) dessine une ligne le long du chemin ou du contour de la forme. Contrairement à la border HTML, les contours SVG sont centrés par défaut sur la limite du chemin, s'étendant également à l'intérieur et à l'extérieur de la forme.

Attributs de base du contour

<!-- Couleur et largeur du contour -->
<circle cx="60" cy="60" r="40"
        fill="none"
        stroke="#0EA5E9"
        stroke-width="4" />

<!-- Contour sur une forme remplie -->
<rect width="120" height="80" rx="8"
      fill="#DBEAFE"
      stroke="#2563EB"
      stroke-width="2" />

Motifs de tirets du contour

Les attributs stroke-dasharray et stroke-dashoffset créent des lignes en tirets et des effets d'animation de dessin :

<!-- Tirets simples : 10px de tiret, 5px d'espace -->
<line x1="10" y1="50" x2="290" y2="50"
      stroke="#64748B"
      stroke-width="2"
      stroke-dasharray="10 5" />

<!-- Points : tiret très court, espace plus large -->
<line x1="10" y1="50" x2="290" y2="50"
      stroke="#EF4444"
      stroke-width="3"
      stroke-dasharray="1 8"
      stroke-linecap="round" />

<!-- Motif irrégulier -->
<path d="M10,50 Q150,10 290,50"
      fill="none"
      stroke="#8B5CF6"
      stroke-width="2"
      stroke-dasharray="15 5 3 5" />

L'animation de dessin SVG classique utilise stroke-dashoffset :

/* Animation CSS : le chemin se "dessine" au chargement de la page */
.animated-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease-in-out forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

Extrémités et jonctions de contour

stroke-linecap contrôle l'apparence des extrémités de ligne. stroke-linejoin contrôle la façon dont les coins des chemins se rejoignent :

<!-- Extrémité butt (par défaut) : extrémités coupées à ras -->
<line x1="20" y1="20" x2="180" y2="20"
      stroke="#1A1A2E" stroke-width="12"
      stroke-linecap="butt" />

<!-- Extrémité ronde : les extrémités ont des demi-cercles -->
<line x1="20" y1="50" x2="180" y2="50"
      stroke="#3B82F6" stroke-width="12"
      stroke-linecap="round" />

<!-- Extrémité carrée : les extrémités s'étendent au-delà du point final -->
<line x1="20" y1="80" x2="180" y2="80"
      stroke="#22C55E" stroke-width="12"
      stroke-linecap="square" />

stroke-linecap="round" est le choix standard pour les contours d'icônes — il donne une apparence lisse et agréable qui fonctionne bien à toutes les tailles.

Opacité du contour

Comme fill-opacity, stroke-opacity contrôle la transparence du contour :

<circle cx="60" cy="60" r="40"
        fill="none"
        stroke="#EF4444"
        stroke-width="6"
        stroke-opacity="0.5" />

Les dégradés linéaires en SVG

SVG définit les dégradés dans des blocs <defs> et les référence par ID. Cette séparation entre définition et utilisation permet d'appliquer une seule définition de dégradé à plusieurs formes.

Définir un dégradé linéaire

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#3B82F6" />
      <stop offset="100%" stop-color="#1E3A8A" />
    </linearGradient>
  </defs>

  <rect width="300" height="200" fill="url(#blueGradient)" />
</svg>

Les attributs x1/y1/x2/y2 définissent la direction du dégradé comme un vecteur dans la boîte de délimitation de la forme :

Plusieurs points d'arrêt de couleur

<defs>
  <linearGradient id="sunsetGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%"   stop-color="#FF6B6B" />
    <stop offset="50%"  stop-color="#FFC300" />
    <stop offset="100%" stop-color="#FF3C00" />
  </linearGradient>
</defs>

Cela produit un dégradé de coucher de soleil de #FF6B6B à travers #FFC300 jusqu'à #FF3C00.

Unités du dégradé

Par défaut (gradientUnits="objectBoundingBox"), les coordonnées du dégradé sont des pourcentages de la boîte de délimitation de la forme. Avec gradientUnits="userSpaceOnUse", les coordonnées sont dans l'espace de pixels du canvas SVG :

<defs>
  <!-- Coordonnées absolues en pixels SVG -->
  <linearGradient id="absGradient"
                  x1="0" y1="0" x2="300" y2="0"
                  gradientUnits="userSpaceOnUse">
    <stop offset="0%"   stop-color="#667EEA" />
    <stop offset="100%" stop-color="#764BA2" />
  </linearGradient>
</defs>

userSpaceOnUse est utile lorsque plusieurs formes partagent un seul grand dégradé couvrant tout le canvas SVG.

Animer les points d'arrêt de dégradé

SVG supporte l'animation SMIL native dans les définitions de dégradé :

<linearGradient id="animGradient" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" stop-color="#3B82F6">
    <animate attributeName="stop-color"
             values="#3B82F6; #8B5CF6; #EC4899; #3B82F6"
             dur="4s"
             repeatCount="indefinite" />
  </stop>
  <stop offset="100%" stop-color="#1E3A8A">
    <animate attributeName="stop-color"
             values="#1E3A8A; #5B21B6; #9D174D; #1E3A8A"
             dur="4s"
             repeatCount="indefinite" />
  </stop>
</linearGradient>

Cela anime les couleurs du dégradé dans un cycle bleu → violet → rose → bleu. Les animations CSS ne peuvent pas directement animer les couleurs des points d'arrêt de dégradé (seules les propriétés CSS personnalisées via @property le peuvent), donc l'animation SMIL SVG est l'approche la plus directe pour cet effet.

Les dégradés radiaux en SVG

Les dégradés radiaux en SVG rayonnent vers l'extérieur depuis un point central (le point focal) vers un cercle extérieur. Ils prennent en charge deux centres indépendants : le centre du dégradé (cx/cy) et le point focal (fx/fy).

Dégradé radial de base

<defs>
  <radialGradient id="glowGradient" cx="50%" cy="50%" r="50%">
    <stop offset="0%"   stop-color="#FFF176" />
    <stop offset="100%" stop-color="#F57F17" />
  </radialGradient>
</defs>

<circle cx="150" cy="100" r="80" fill="url(#glowGradient)" />

Cela crée un éclat semblable au soleil : jaune vif #FFF176 au centre, s'approfondissant vers l'ambre #F57F17 sur les bords.

Point focal décentré

Définir fx/fy séparément de cx/cy crée un effet de perspective — comme une sphère éclairée d'un côté :

<defs>
  <radialGradient id="sphereGradient"
                  cx="50%" cy="50%" r="50%"
                  fx="35%" fy="35%">
    <stop offset="0%"   stop-color="#A8E6CF" stop-opacity="1" />
    <stop offset="60%"  stop-color="#2D6A4F" stop-opacity="1" />
    <stop offset="100%" stop-color="#1B4332" stop-opacity="1" />
  </radialGradient>
</defs>

<circle cx="150" cy="150" r="120" fill="url(#sphereGradient)" />

Le point lumineux à 35%, 35% (en haut à gauche) donne au cercle une apparence sphérique tridimensionnelle.

Point d'arrêt transparent pour des effets de lueur

L'utilisation de points d'arrêt transparents crée des superpositions lumineuses :

<defs>
  <radialGradient id="glowOverlay" cx="50%" cy="50%" r="50%">
    <stop offset="0%"   stop-color="#60A5FA" stop-opacity="0.8" />
    <stop offset="100%" stop-color="#60A5FA" stop-opacity="0" />
  </radialGradient>
</defs>

<!-- Arrière-plan sombre -->
<rect width="300" height="200" fill="#0F172A" />
<!-- Superposition lumineuse -->
<rect width="300" height="200" fill="url(#glowOverlay)" />

Utilisez le Générateur de dégradés pour expérimenter des combinaisons de couleurs avant de vous engager dans du code de dégradé SVG. Définissez vos couleurs de début et de fin visuellement et copiez les valeurs hexadécimales pour vos attributs stop-color.

Le mot-clé currentColor

currentColor est l'une des techniques de couleur SVG les plus puissantes. Il permet à un élément SVG d'hériter sa couleur de la propriété CSS color de son élément HTML parent, permettant ainsi à CSS de contrôler les couleurs SVG sans toucher au balisage SVG.

Comment fonctionne currentColor

<!-- HTML : la propriété CSS color se cascade dans le SVG -->
<button class="icon-button" style="color: #3B82F6;">
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2L2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5" />
  </svg>
  Exporter
</button>

.icon-button {
  color: #3B82F6;      /* L'icône se remplit de bleu */
}

.icon-button:hover {
  color: #1D4ED8;      /* L'icône se remplit de bleu foncé au survol */
}

.icon-button:disabled {
  color: #9CA3AF;      /* L'icône se remplit de gris lorsque désactivée */
}

Aucune règle spécifique SVG supplémentaire n'est nécessaire — une déclaration color pilote tous les états.

currentColor dans les contours

Le mot-clé fonctionne tout aussi bien pour les contours :

<svg viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
     stroke-width="2"
     stroke-linecap="round">
  <circle cx="12" cy="12" r="10" />
  <polyline points="12 6 12 12 16 14" />
</svg>

Cette icône d'horloge hérite de la couleur de son contour à partir de la valeur CSS color du parent — une seule propriété CSS change à la fois la couleur de l'icône et tout texte adjacent.

Mélanger currentColor et des couleurs fixes

Vous pouvez combiner currentColor avec des couleurs fixes dans un seul SVG pour des icônes multi-couleurs :

<svg viewBox="0 0 24 24">
  <!-- Corps : hérite de currentColor -->
  <path fill="currentColor"
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
  <!-- Badge : couleur d'accent fixe -->
  <circle cx="18" cy="6" r="4" fill="#EF4444" />
</svg>

Ce motif est courant pour les badges de notification : la couleur principale de l'icône suit la couleur de texte du parent, mais le badge reste rouge quel que soit le contexte.

Stylisation CSS des SVG

Lorsque le SVG est intégré en HTML (pas dans une balise <img>), le CSS standard peut le styler directement. Cela permet d'utiliser les propriétés CSS personnalisées, les pseudo-classes, les transitions et les animations — bien plus flexible que les attributs SVG seuls.

Le CSS remplace les attributs de présentation SVG

Le CSS a une spécificité plus élevée que les attributs de présentation SVG (les attributs fill="" et stroke="" directement dans le balisage SVG). Cela signifie que vous pouvez remplacer n'importe quel attribut avec du CSS :

/* Remplacer tout attribut fill inline */
.icon-danger path {
  fill: #EF4444;
}

/* Remplacer le contour pour une variante spécifique */
.icon-outline circle,
.icon-outline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

Propriétés CSS personnalisées dans SVG

Les propriétés personnalisées se cascade dans les éléments SVG intégrés, permettant une thématisation dynamique :

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"
          fill="var(--chart-primary, #3B82F6)"
          stroke="var(--chart-border, #1E3A8A)"
          stroke-width="2" />
</svg>

:root {
  --chart-primary: #3B82F6;
  --chart-border:  #1E3A8A;
}

[data-theme="dark"] {
  --chart-primary: #60A5FA;
  --chart-border:  #93C5FD;
}

L'élément SVG récupère automatiquement les couleurs du mode sombre lorsque le thème change — sans aucun JavaScript.

Transitions CSS sur SVG

Les transitions CSS fonctionnent sur les propriétés de couleur SVG :

.icon path {
  fill: #6B7280;
  transition: fill 200ms ease;
}

.icon:hover path {
  fill: #3B82F6;
}

Cela produit une transition de couleur fluide lors du survol de l'icône — impossible avec les seuls attributs SVG.

Découpe et masquage pour des effets de couleur

Pour les effets avancés, le clip-path CSS et les masques SVG peuvent révéler des dégradés à travers des formes complexes :

<!-- Texte en dégradé utilisant SVG -->
<svg viewBox="0 0 400 100">
  <defs>
    <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#667EEA" />
      <stop offset="100%" stop-color="#764BA2" />
    </linearGradient>
  </defs>
  <text x="10" y="80" font-size="72" font-weight="bold"
        fill="url(#textGrad)">ColorFYI</text>
</svg>

Le Générateur de dégradés peut vous aider à concevoir des paires de couleurs de dégradé. Utilisez le Convertisseur de couleurs pour traduire toute couleur TSL ou RVB en valeurs hexadécimales nécessaires aux attributs stop-color SVG.

Compatibilité des formats de couleur

Les attributs de couleur SVG acceptent les mêmes formats que CSS, mais il y a quelques notes de compatibilité à connaître :

Pour une compatibilité maximale dans les fills SVG, utilisez des codes hexadécimaux à 6 chiffres. Pour la transparence, préférez fill-opacity plutôt que l'hex à 8 chiffres ou rgba() si vous devez prendre en charge d'anciens rendus SVG (comme les SVG utilisés dans les pipelines d'export PDF).

Points clés à retenir

• SVG utilise les attributs fill et stroke pour colorer respectivement les formes et les chemins. Les deux acceptent tous les formats de couleur CSS standard, y compris hexadécimal, RVB, TSL et les couleurs nommées.
• fill-opacity et stroke-opacity contrôlent la transparence indépendamment de la couleur, avec une compatibilité légèrement meilleure dans les anciens environnements SVG que l'hex à 8 chiffres ou rgba().
• Les dégradés SVG sont définis dans des blocs <defs> avec un id unique, puis appliqués via fill="url(#id)". Les dégradés linéaires utilisent des coordonnées vectorielles pour la direction ; les dégradés radiaux prennent en charge un point focal indépendant (fx/fy) pour les effets de perspective.
• Le mot-clé currentColor est la technique de couleur SVG la plus importante pour les systèmes d'icônes — il hérite de la propriété CSS color, permettant à une seule règle CSS de contrôler la couleur des icônes dans tous les états (survol, désactivé, actif).
• Le SVG intégré peut être stylé avec du CSS standard, y compris les propriétés personnalisées, les sélecteurs de pseudo-classes et les transitions — rendant la thématisation dynamique et les animations interactives simples.
• Utilisez le Générateur de dégradés pour concevoir visuellement des paires de couleurs de dégradé et le Convertisseur de couleurs pour traduire les couleurs entre les formats nécessaires aux attributs SVG.