color-interpolation

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS color-interpolation est utilisée dans SVG pour définir l'espace colorimétrique à utiliser pour les éléments SVG <linearGradient> et <radialGradient> de SVG.

Syntaxe

css

/* Valeurs avec un mot-clé */
color-interpolation: auto;
color-interpolation: sRGB;
color-interpolation: linearRGB;

Valeurs

auto: Indique que l'agent utilisateur peut choisir l'espace colorimétrique sRGB ou linearRGB pour l'interpolation des couleurs. Cette option signifie que l'auteur·ice ne demande pas que l'interpolation des couleurs se fasse dans un espace colorimétrique particulier.
sRGB: Indique que l'interpolation des couleurs doit se faire dans l'espace colorimétrique sRGB. C'est la valeur initiale par défaut si aucune propriété color-interpolation n'est définie.
linearRGB: Indique que l'interpolation des couleurs doit se faire dans l'espace colorimétrique RGB linéarisé tel que décrit dans la spécification sRGB ^(angl.).

Définition formelle

Valeur	`auto` \| `sRGB` \| `linearRGB`
Applicabilité	`<linearGradient>` et `<radialGradient>`
Valeur initiale	`auto`
Type d'animation	discrète

Syntaxe formelle

color-interpolation = 
  auto       |
  sRGB       |
  linearRGB

Dans le premier SVG, la propriété color-interpolation n'est pas incluse sur l'élément <linearGradient> et l'interpolation des couleurs utilise par défaut sRGB. Le second exemple montre l'interpolation des couleurs avec la valeur linearRGB.

html

<svg width="450" height="70">
  <title>Exemple d'utilisation de la propriété CSS color-interpolation</title>
  <defs>
    <linearGradient id="sRGB">
      <stop offset="0%" stop-color="white" />
      <stop offset="25%" stop-color="blue" />
      <stop offset="50%" stop-color="white" />
      <stop offset="75%" stop-color="red" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="400" height="40" fill="url(#sRGB)" stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    pas de color-interpolation (propriété CSS)
  </text>
</svg>

html

<svg width="450" height="70">
  <title>Exemple d'utilisation de la propriété CSS color-interpolation</title>
  <defs>
    <linearGradient id="linearRGB">
      <stop offset="0%" stop-color="white" />
      <stop offset="25%" stop-color="blue" />
      <stop offset="50%" stop-color="white" />
      <stop offset="75%" stop-color="red" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#linearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation: linearRGB; (propriété CSS)
  </text>
</svg>

css

svg {
  display: block;
}

#linearRGB {
  color-interpolation: linearRGB;
}

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # ColorInterpolationProperty

Compatibilité des navigateurs

Voir aussi

L'élément SVG <linearGradient>
L'élément SVG <radialGradient>
L'attribut SVG color-interpolation

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 1 févr. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content