Color-interpolation et color-interpolation-filters

color-interpolation

color-interpolation-filters

Résumé des caractéristiques de la propriété `color-interpolation`

Description rapide

Définit l'espace de couleurs à utiliser pour calculer les dégradés, les animations et les combinaisons avec la couche alpha.

Statut

Standard

Utilisable sur

SVG

Valeurs prédéfinies

sRGB | linearRGB | auto

Pourcentages

Ne s'appliquent pas.

Valeur initiale

sRGB

Héritée par défaut

Oui.

Type d'animation

Discrète : lors d'une animation, la propriété color-interpolation passe d'une valeur à l'autre sans transition.

Module W3C

Module filtres et effets

Références (W3C)

Filter Effects Module Level 1

Statut du document: WD (document de travail)

Schémas syntaxiques.

Schéma syntaxique de la propriété color-interpolation

Schéma syntaxique de la propriété color-interpolation-filters

Les liens des schémas donnent accès à plus de détails sur les valeurs.

Description.

Les propriétés color-interpolation et color-interpolation-filters sont assez comparables : elles définissent dans quel espace de couleurs doivent s'effectuer les interpolations de couleurs. Le calcul d'un dégradé par exemple suppose de calculer couleur situées entre deux limites.

La différence entre color-interpolation et color-interpolation-filters est que ces deux propriétés ne s'appliquent pas aux mêmes opérations graphiques :

Opération	Propriété concernée
Dégradés	`color-interpolation`
Animations	`color-interpolation`
Mélanges semi-transparents	`color-interpolation`
Filtres SVG	`color-interpolation-filters`

Ces propriétés sont opérationnelles sur des objets SVG, elle n'ont pas d'effet sur les fonctions de filtrage de CSS (blur(), hue-rotate(), etc.), ni sur les dégradés définis en CSS.

Qu'est ce que ça change ?

L'espace de couleurs sRGB est dit "non linéaire", c'est à dire que les couleurs ne sont pas réparties régulièrement en fonction de leur luminosité. Ceci a été fait pour correspondre au fonctionnement de notre œil, qui distingue mieux les écarts de luminosité dans les tons sombres que dans les tons clairs.

Cependant, cette non-linéarité complique beaucoup les choses lorsqu'il est nécessaire de calculer une couleur intermédiaire entre deux couleurs, comme pour construire un dégradé ou réaliser une animation, ou dans le cas d'un mélange de deux couleurs.

Les deux images ci-dessous comportent chacune un cercle dont les bords ont été floutés. Il est donc nécessaire de mélanger le vert et le rouge sur toute cette partie floue. Dans un espace non linéaire comme le sRGB (premier dessin), on constate que cela fait apparaître une zone plus sombre sur le pourtour du cercle. Inconvénient qui n'apparaît pas lorsque le calcul est fait dans un espace de couleurs linéaire.

Remarque : il s'agit ici d'une simulation, les navigateurs étant encore peu nombreux à traiter les espaces de couleurs linéaires.

Interpolation de couleurs dans un espace non linéaire

Espace de couleurs non linéaire

Interpolation de couleurs dans un espace linéaire

Espace de couleurs linéaire

Valeurs pour `color-interpolation` et `color-interpolation-filters`.

color-interpolation: auto; color-interpolation-filters: auto;

Le navigateur choisit lui-même l'espace de couleurs dans lequel les interpolations de couleurs seront réalisées.
color-interpolation: sRGB; color-interpolation-filters: sRGB;

Valeur par défaut pour color-interpolation.
Les interpolations de couleurs seront réalisées dans l'espace de couleurs sRGB.
color-interpolation: linearRGB; color-interpolation-filters: linearRGB;

Valeur par défaut pour color-interpolation-filters.
Les interpolations de couleurs seront réalisées dans l'espace de couleurs RGB linéaire.
color-interpolation: initial; (sRGB) color-interpolation: inherit; color-interpolation: revert; color-interpolation: revertLayer; color-interpolation: unset;

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple interactif.

Les blocs ci-dessous sont des éléments SVG sur lesquels on applique la valeur choisie pour chacune des propriétés color-interpolation et color-interpolation-filters. Le premier élément présente un dégradé de couleurs en arrière-plan, tandis que le deuxième utilise un filtre feDiffuseLighting

color-interpolation est appliquée sur la définition du dégradé, c'est à dire la balise linearGradient, et color-interpolation-filters est appliquée sur la définition du filtre : la balise filter du SVG.

L'effet des propriétés color-interpolation et color-interpolation-filters est plus ou moins visible suivant les navigateurs (voir le tableau des compatibilités ci-après). Curieusement, Firefox reconnaît mieux la propriété color-interpolation , alors que c'est l'inverse pour les autres navigateurs.

color-interpolation :

sRGB

linearRGB

auto

color-interpolation-filters :

linearrgb

srgb

auto

Compatibilité des navigateurs avec `color-interpolation`.

Colonne 1

Traitement correct par les navigateurs de la propriété color-interpolation qui choisit dans quel espace de couleurs se feront les calculs d'interpolation.

Colonne 2

Traitement correct par les navigateurs de la propriété color-interpolation-filters qui définit dans quel espace de couleurs se feront les calculs des filtres SVG.

Propriété
color-interpolateion

Propriété
color-interpolation-filters

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Chrome

Safari

Firefox

Safari sur IOS

Edge

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `color-interpolation`.

Module effets et filtres - Niveau 1

Première définition des propriétés color-interpolation et color-interpolation-filters.

25 Octobre 2012
Document de travail.

Voir aussi, au sujet des filtres graphiques.

Les filtres et effets graphiques divers sont décrits dans la spécification nommée "Module filtres et effets" en français, ou "Filter Effects Module" en anglais. Voici les termes décrits dans ce module de spécification :

Propriétés :

backdrop-filter

Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.

color-interpolation-filters

Définit dans quel espace de couleurs sont calculés les effets de filtrage. Par défaut cet espace est le linearRGB

filter

Applique un filtre graphique (flou, contraste, luminosité...) à un élément.

flood-color

Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.

flood-opacity

Définit l'opacité des remplissages et des ombrages dans le contexte de filtres SVG.

lighting-color

Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.

Fonctions :

blur()

blur() est un filtre graphique utilisable avec la propriété filter. La fonction applique un effet de flou sur l'élément.

brightness()

Ajuste la luminosité d'un élément (filtre graphique).

contrast()

Ajuste le contraste d'un élément (filtre graphique).

drop-shadow()

Définit l'ombre d'un élément : dimensions, flou, couleur (filtre graphique).

grayscale()

Convertit un élément en nuances de gris (filtre graphique) de façon plus moins complète. A l'extrême les couleurs peuvent être complètement supprimées.

hue-rotate()

Change les couleurs d'une image en effectuant une rotation des teintes (filtre graphique).

invert()

Inverse les couleurs d'un élément (filtre graphique).

opacity()

Détermine le degré de transparence d'un élément (filtre graphique).

saturate()

Définit la saturation des couleurs d'un élément (filtre graphique).

sepia()

Applique un effet sépia à un élément (filtre graphique).