Un bouton désactivé qui doit soudain apparaître en gris, une photo de profil qu'on veut teinter en sépia pour une page d'accueil, une icône qu'il faut inverser au survol : ce sont des retouches de couleur, et en SVG elles passent toutes par une seule primitive de filtre.
<feColorMatrix> fait ce travail directement dans le navigateur, sans passer par un logiciel de retouche ni générer une seconde version de l'image : une seule balise recalcule la couleur de chaque pixel selon la formule choisie.
Définition
<feColorMatrix> est une primitive de filtre SVG qui recombine les quatre canaux rouge, vert, bleu et alpha de chaque pixel à travers une opération mathématique. Elle se place toujours à l'intérieur d'un élément <filter> identifié par un id, filtre que l'on applique ensuite à une forme ou à un groupe avec l'attribut filter="url(#monId)".
L'attribut type choisit l'opération à appliquer : matrix pour une transformation libre à vingt valeurs, ou l'un des trois raccourcis saturate, hueRotate et luminanceToAlpha, chacun réglé par l'attribut values.
Attributs principaux
Quatre attributs suffisent à couvrir la quasi-totalité des usages courants.
| Valeur de type | Effet | Attribut values |
|---|---|---|
matrix | Transformation libre des quatre canaux | 20 nombres |
saturate | Réduit ou augmente la saturation | Un nombre entre 0 et 1 |
hueRotate | Fait pivoter les teintes sur le cercle chromatique | Un angle en degrés |
luminanceToAlpha | Transforme la luminosité en transparence | Aucune valeur requise |
L'attribut in précise sur quelle source travailler ; laissé vide, il vaut SourceGraphic, c'est-à-dire la forme ou le groupe auquel le filtre est appliqué.
Exemple de rendu concret
L'exemple suivant affiche deux fois la même icône : la version d'origine à gauche, puis la même désaturée à droite grâce à type="saturate" réglé à zéro, l'équivalent visuel d'un bouton devenu inactif.
<svg viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="niveauxDeGris">
<feColorMatrix type="saturate" values="0" />
</filter>
</defs>
<g transform="translate(20,20)">
<rect width="80" height="80" rx="14" fill="#f97316" />
<circle cx="40" cy="40" r="22" fill="#0ea5e9" />
</g>
<g transform="translate(140,20)" filter="url(#niveauxDeGris)">
<rect width="80" height="80" rx="14" fill="#f97316" />
<circle cx="40" cy="40" r="22" fill="#0ea5e9" />
</g>
</svg>Le filtre ne modifie ni les tracés ni les positions : il ne touche qu'à la couleur, ce qui le rend réversible en changeant simplement la valeur de values.
Différence avec un élément SVG proche
<feBlend> et <feColorMatrix> sont souvent confondus parce que tous deux figurent dans un <filter>, mais leur rôle diffère : <feColorMatrix> retravaille les canaux d'une seule source, alors que <feBlend> mélange deux sources entre elles, comme deux calques en mode superposition dans un logiciel de retouche.
Autre confusion fréquente : <feColorMatrix> n'est pas un remplaçant du filtre CSS filter: grayscale(). Il est plus verbeux, mais il permet des combinaisons qu'aucune propriété CSS ne propose, comme une rotation de teinte couplée à une désaturation partielle dans la même primitive.
Piège classique
Par défaut, le filtrage SVG s'effectue dans l'espace de couleur linéaire (linearRGB) et non dans le sRGB utilisé par le reste de la page. Résultat : les mêmes valeurs de type="saturate" peuvent paraître plus ternes ou plus vives que prévu selon le navigateur. Pour retrouver l'aspect attendu, ajoutez color-interpolation-filters="sRGB" sur l'élément <filter> ou directement sur <feColorMatrix>.
Ce réglage reste invisible tant qu'on ne compare pas deux rendus côte à côte, ce qui explique qu'il surprenne même des personnes déjà habituées aux filtres CSS.
Cas d'usage réel
Dans une interface d'apprentissage comme celle de Believemy, <feColorMatrix> sert typiquement à désaturer une icône de leçon verrouillée, à teinter en sépia une capture d'écran importée via <image> pour un module d'histoire du web, ou à inverser des couleurs pour prévisualiser un thème sombre avant de le coder en CSS.
- Icônes désactivées dans un menu ou un badge non débloqué
- Filtre sépia ou noir et blanc sur une photo importée
- Prévisualisation rapide d'une palette de couleurs inversée
Questions fréquentes
feColorMatrix dans un même filtre ?Oui, il suffit d'empiler plusieurs primitives dans le même élément filter, chacune reprenant la sortie de la précédente grâce à l'attribut in, ce qui permet par exemple de désaturer une image puis de la teinter en deux étapes distinctes.
feColorMatrix fonctionne-t-il sur du texte ou seulement sur des images ?Il agit sur tout ce que le SVG sait dessiner, texte, formes vectorielles ou images bitmap importées, puisqu'il recolore chaque pixel après le rendu, sans se soucier de la nature du contenu d'origine.
La propriété CSS filter propose des raccourcis comme grayscale() ou hue-rotate(), mais ils s'appuient en coulisses sur les mêmes primitives SVG et n'offrent jamais la souplesse d'une matrice personnalisée à vingt valeurs.