SVG feColorMatrix : recolorer sans changer les remplissages

Un filtre SVG feColorMatrix modifie les couleurs affichées par un moteur de rendu. Il ne réécrit pas les valeurs fill de tes tracés. Il est donc utile pour des effets visuels réversibles, mais un aperçu filtré et un SVG dont la palette a été modifiée constituent des livrables différents.

Pour un aperçu web, conserve le filtre et teste la page où il s’exécute. Si quelqu’un doit sélectionner une forme bleue et modifier son remplissage bleu, change les couleurs sources. Si la source est un PNG, ni un filtre ni une enveloppe SVG ne créent de formes vectorielles modifiables ; cela nécessite une étape de vectorisation distincte.

L’exemple ci-dessous utilise le même motif de deux feuilles pour les deux méthodes de recoloration. Tu peux enregistrer le code, examiner la source et retirer le filtre pour voir exactement ce qui a changé.

Choisis le résultat de recoloration nécessaire

Le guide de modification des couleurs SVG explique comment trouver les remplissages, les contours et les règles de style. Ici, la question plus précise porte sur ce qu’un filtre laisse dans le fichier. MDN décrit feColorMatrix comme une transformation des canaux de couleur des pixels, tandis que son guide des remplissages et des contours décrit les couleurs appliquées aux formes.

Un exemple bicolore que tu peux examiner

Enregistre ceci sous filtered-leaves.svg et ouvre-le dans un navigateur. La première feuille possède initialement un remplissage orange, #cc6633 ; la seconde possède un remplissage vert, #339966, à moitié opaque. La matrice échange les canaux rouge et bleu en conservant le vert et l’alpha.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 260 220" width="260" height="220">
  <defs>
    <filter id="swap-red-blue" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="
        0 0 1 0 0
        0 1 0 0 0
        1 0 0 0 0
        0 0 0 1 0" />
    </filter>
  </defs>
  <g filter="url(#swap-red-blue)">
    <path fill="#cc6633"
      d="M40 125 C25 35 105 15 150 35 C165 105 120 150 40 125Z" />
    <path fill="#339966" fill-opacity="0.5"
      d="M100 175 C90 90 180 65 225 90 C230 155 175 200 100 175Z" />
  </g>
</svg>

Nous avons affiché quatre versions de ce motif original dans le navigateur : couleurs d’origine, version filtrée, modification directe et copie dont le filtre a été retiré. La modification directe remplaçait le premier remplissage par #3366cc et le second par #669933, sans filtre. Les deux méthodes de recoloration produisaient un motif bleu et olive. L’examen du DOM de la version filtrée renvoyait encore les attributs de remplissage orange et vert d’origine. Retirer son filtre rétablissait la palette d’origine.

Il s’agit d’une petite démonstration dans un navigateur, pas d’un test de compatibilité de tous les éditeurs ou formats d’export. La vérification utile pour la livraison est simple : le fichier filtré dépend encore de la conservation et du rendu de cet effet. La version aux remplissages directement modifiés porte la nouvelle palette sur les formes elles-mêmes.

Pour répéter la vérification de la source, ouvre le SVG dans un éditeur de texte et recherche fill=. Puis retire uniquement filter="url(#swap-red-blue)" du groupe et actualise le navigateur. Garde le fichier non modifié à côté pour comparer le résultat.

Lis les quatre lignes sans mémoriser une matrice

Avec type="matrix", l’attribut values contient vingt nombres : quatre lignes de cinq. Chaque ligne calcule un canal de sortie. Les colonnes utilisent le rouge, le vert, le bleu et l’alpha d’entrée, ainsi qu’un décalage constant. La référence de la matrice sur MDN présente les équations et la matrice identité.

Dans notre exemple, la première ligne prend le bleu comme nouveau rouge. La deuxième conserve le vert. La troisième prend le rouge comme nouveau bleu. La quatrième conserve l’alpha :

0 0 0 1 0

Cette dernière ligne signifie « utiliser l’alpha existant, sans décalage ajouté ». La remplacer par des zéros rend le résultat transparent. Ajouter une constante dans la dernière colonne modifie la transparence même là où la source était transparente, ce qui peut créer un rectangle indésirable dans la région du filtre.

La matrice traite l’entrée rendue du filtre. Elle ne sait pas quels pixels proviennent d’une feuille, d’une lettre, d’un contour ou d’une photographie intégrée. Applique-la au groupe ou à l’objet que tu souhaites modifier. Si tu dois changer une seule partie sémantique du dessin, sélectionne cette partie et modifie plutôt sa couleur.

Définis sRGB si tes nombres viennent d’un échantillon RGB

Les primitives de filtre SVG utilisent linearRGB par défaut. Un échantillon comme rgb(128, 128, 128) est habituellement défini en sRGB : une constante de matrice de 0.5 dans l’espace de filtre par défaut ne correspond donc pas au même gris affiché qu’une valeur sRGB à mi-échelle. Utilise color-interpolation-filters="sRGB" si ta matrice doit agir sur ces valeurs de canaux sRGB. Cet attribut diffère de color-interpolation ; modifier cet autre attribut ne choisit pas l’espace colorimétrique du filtre. MDN décrit les valeurs par défaut et cette distinction.

Pour une silhouette unie #3366cc, les valeurs RGB normalisées sont 51/255, 102/255 et 204/255, soit 0.2, 0.4 et 0.8. Le filtre suivant ignore les valeurs RGB d’entrée et définit ces constantes tout en conservant l’alpha d’entrée :

<filter id="solid-blue" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="
    0 0 0 0 0.2
    0 0 0 0 0.4
    0 0 0 0 0.8
    0 0 0 1 0" />
</filter>

Référence ce filtre depuis l’objet avec filter="url(#solid-blue)". Il supprime volontairement les distinctions entre les couleurs sources opaques. Il convient à une silhouette, pas à la conservation des détails de tonalité d’une photographie. La spécification Filter Effects définit la transformation des canaux et le traitement des valeurs de couleur non prémultipliées.

Définir sRGB choisit l’espace de calcul ; cela ne garantit pas une couleur identique sur tous les écrans ou à l’impression. Pour un écart plus général à la livraison, consulte la liste de vérification des couleurs à l’export SVG.

Vérifie le fichier livré, pas seulement l’aperçu

Une recoloration par filtre reste réversible tant que l’illustration d’origine et la définition du filtre sont intactes. Une capture d’écran ou un export matriciel enregistre le résultat visible sous forme de pixels. Aucune de ces opérations ne rend à elle seule la nouvelle palette disponible comme remplissages de tracés modifiables.

Avant de livrer un vecteur, vérifie la destination réelle :

1. Ouvre le SVG enregistré avec le même processus d’importation ou d’exportation que celui du destinataire.
2. Compare les couleurs et les bords translucides à l’aperçu du navigateur.
3. Sélectionne une forme et examine son remplissage. Contient-il la nouvelle valeur souhaitée ou la couleur d’origine sous un effet ?
4. Enregistre et rouvre une fois. Confirme que la définition du filtre et sa référence ont été conservées si l’effet est nécessaire.
5. Si le destinataire a besoin de couleurs unies ordinaires et modifiables, utilise la version aux remplissages directement modifiés et retire le filtre désormais inutile de cette copie de livraison.

Pour les dégradés, les contours, l’opacité ou les superpositions avec fusion, une matrice globale n’est pas un outil général de recherche et remplacement. Reconstruire l’apparence souhaitée avec des couleurs sources peut demander davantage que de modifier deux valeurs hexadécimales. Si un livrable matriciel convient, exporter l’apparence vérifiée en PNG est une autre possibilité. Conserve l’original vectoriel séparément.

Quand PerfectVector intervient dans ce processus

Si tu possèdes déjà ces deux tracés, modifie-les directement. Il n’y a aucune raison de les convertir en pixels puis de les vectoriser à nouveau pour supprimer un filtre de couleur.

PerfectVector devient utile lorsque ton illustration de départ est un PNG ou un JPG et que tu as besoin de régions modifiables. Utilise la conversion d’image en vecteur pour préparer un candidat vectoriel, puis examine les limites des formes et les petits détails avant de recolorer. Un filtre appliqué à une image matricielle peut changer son apparence, mais cette image reste composée de pixels. La vérification des images matricielles intégrées aide à distinguer ce cas de tracés sélectionnables et modifiables.

Pour des photographies où l’objectif est simplement une teinte, conserve un processus matriciel. Pour un logo dont l’original vectoriel est disponible, utilise cet original. La présentation de la vectorisation explique quand reconstruire la géométrie à partir de pixels constitue une étape utile.

FAQ

feColorMatrix modifie-t-il les valeurs fill de mon SVG ? Non. Il transforme les canaux de couleur affichés. Les attributs fill sources restent inchangés tant que tu ne les modifies pas séparément.

Pourquoi le gris choisi est-il plus clair que prévu ? Vérifie l’espace de calcul du filtre. Les primitives de filtre SVG utilisent linearRGB par défaut. Définis color-interpolation-filters sur sRGB lorsque les constantes de la matrice représentent des valeurs normalisées d’échantillons sRGB.

Comment conserver la transparence lors de la recoloration ? Garde la ligne alpha à 0 0 0 1 0. Elle conserve l’alpha d’entrée. Vérifie les bords translucides et évite d’ajouter un décalage alpha sauf si tu souhaites modifier la transparence.

Un PNG filtré peut-il devenir un vecteur modifiable ? Un filtre de couleur change l’apparence, pas la géométrie. Pour modifier les formes vectorielles individuelles, obtiens l’original vectoriel ou vectorise l’image matricielle et examine les tracés obtenus.

Sources

1. MDN : feColorMatrix — Définit les lignes de matrice, les canaux et les types de transformation disponibles.
2. MDN : color-interpolation-filters — Explique la valeur par défaut linearRGB et la sélection explicite de sRGB.
3. W3C : Filter Effects, feColorMatrix — Spécifie le comportement des transformations de couleur et d’alpha.
4. MDN : remplissages et contours — Décrit les couleurs sources utilisées par les formes SVG.

Si ton illustration existe uniquement en pixels et nécessite des couleurs modifiables séparément, convertis ton image en candidat vectoriel. Examine les tracés, modifie les couleurs sources et rouvre le fichier livré pour vérifier son apparence et ses possibilités de modification.