SVG feColorMatrix: ricolora senza cambiare i fill

Un filtro SVG feColorMatrix cambia i colori mostrati da un renderer. Non riscrive i valori fill dei tracciati. Questo lo rende utile per effetti visivi reversibili, ma un'anteprima filtrata e un SVG con una nuova palette modificata sono due consegne diverse.

Se ti serve un'anteprima web, mantieni il filtro e prova la pagina in cui viene eseguito. Se qualcuno deve selezionare una forma blu e modificarne il riempimento blu, cambia i colori nella sorgente. Se la sorgente è un PNG, né un filtro né un contenitore SVG creano forme vettoriali modificabili; serve un passaggio separato di vettorializzazione.

L'esempio qui sotto usa lo stesso motivo a due foglie per entrambi i metodi di ricolorazione. Puoi salvare il codice, esaminare la sorgente e rimuovere il filtro per vedere esattamente cosa è cambiato.

Scegli il risultato di ricolorazione che ti serve

La guida alla modifica dei colori SVG spiega come trovare riempimenti, tratti e regole di stile. Qui la domanda più specifica è cosa lascia un filtro nel file. MDN descrive feColorMatrix come una trasformazione dei canali di colore dei pixel, mentre la sua guida a riempimenti e tratti descrive i colori applicati alle forme.

Un esempio bicolore che puoi esaminare

Salva questo come filtered-leaves.svg e aprilo in un browser. La prima foglia parte con un riempimento arancione, #cc6633; la seconda ha un riempimento verde, #339966, a metà opacità. La matrice scambia i canali rosso e blu mantenendo verde e alfa.

<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>

Abbiamo renderizzato nel browser quattro versioni di questo motivo originale: i colori originali, la versione filtrata, una modifica diretta e una copia con il filtro rimosso. La modifica diretta ha cambiato il primo riempimento in #3366cc e il secondo in #669933, senza filtro. Entrambi i metodi di ricolorazione hanno prodotto un motivo blu e oliva. Esaminando il DOM della versione filtrata, gli attributi di riempimento restituivano ancora l'arancione e il verde originali. Rimuovere il filtro ha ripristinato la palette originale.

È una piccola dimostrazione nel browser, non un test di compatibilità di ogni editor o formato di esportazione. Il suo controllo utile per la consegna è semplice: il file filtrato dipende ancora dalla conservazione e dal rendering di quell'effetto. La versione con riempimenti diretti porta la nuova palette sulle forme stesse.

Per ripetere il controllo della sorgente, apri l'SVG in un editor di testo e cerca fill=. Poi rimuovi soltanto filter="url(#swap-red-blue)" dal gruppo e aggiorna il browser. Mantieni il file non modificato accanto, per confrontare il risultato.

Leggi le quattro righe senza memorizzare una matrice

Per type="matrix", l'attributo values contiene venti numeri: quattro righe di cinque. Ogni riga calcola un canale di output. Le colonne usano rosso, verde, blu e alfa in input, più un offset costante. Il riferimento MDN della matrice mostra le equazioni e la matrice identità.

Nel nostro esempio, la prima riga prende il blu come nuovo rosso. La seconda mantiene il verde. La terza prende il rosso come nuovo blu. La quarta mantiene l'alfa:

0 0 0 1 0

Quest'ultima riga significa “usa l'alfa esistente, senza offset aggiunto”. Sostituirla con soli zeri rende il risultato trasparente. Aggiungere una costante nell'ultima colonna cambia la trasparenza anche dove la sorgente era trasparente, e può creare un rettangolo indesiderato nella regione del filtro.

La matrice elabora l'input renderizzato del filtro. Non sa quali pixel provengono da una foglia, una lettera, un tratto o una fotografia incorporata. Applicala al gruppo o all'oggetto che intendi modificare. Se devi cambiare soltanto una parte semantica di un disegno, seleziona quella parte e modificane invece il colore.

Imposta sRGB quando i numeri provengono da un campione RGB

Le primitive dei filtri SVG usano linearRGB per impostazione predefinita. Un campione come rgb(128, 128, 128) viene normalmente specificato in sRGB, quindi una costante di matrice 0.5 nello spazio predefinito del filtro non corrisponde allo stesso grigio visualizzato di un valore sRGB a metà scala. Usa color-interpolation-filters="sRGB" quando la matrice deve operare su quei valori di canale sRGB. È diverso da color-interpolation; cambiare quell'altro attributo non seleziona lo spazio di colore del filtro. MDN documenta i valori predefiniti e la distinzione.

Per una sagoma uniforme #3366cc, i valori RGB normalizzati sono 51/255, 102/255 e 204/255, ovvero 0.2, 0.4 e 0.8. Il filtro seguente scarta i valori RGB in input e imposta quelle costanti mantenendo l'alfa in input:

<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>

Richiama questo filtro dall'oggetto con filter="url(#solid-blue)". Elimina intenzionalmente le distinzioni tra i colori opachi della sorgente. È adatto a una sagoma, non a conservare il dettaglio tonale di una fotografia. La specifica Filter Effects definisce la trasformazione dei canali e la gestione dei valori di colore non premoltiplicati.

Impostare sRGB è una scelta dello spazio di calcolo, non una garanzia di colore identico su ogni schermo o in stampa. Per discrepanze più generali nella consegna, usa la lista di controllo dei colori nell'esportazione SVG.

Controlla il file consegnato, non solo l'anteprima

Una ricolorazione basata su filtro rimane reversibile finché la grafica originale e la definizione del filtro restano intatte. Uno screenshot o un'esportazione raster registra il risultato visibile come pixel. Nessuna delle due operazioni, da sola, rende disponibile la nuova palette come riempimenti modificabili dei tracciati.

Prima di consegnare un vettore, controlla la destinazione effettiva:

1. Apri l'SVG salvato attraverso lo stesso percorso di importazione o esportazione che userà il destinatario.
2. Confronta colori e bordi traslucidi con l'anteprima nel browser.
3. Seleziona una forma e controllane il riempimento. Contiene il nuovo valore desiderato o il colore originale sotto un effetto?
4. Salva e riapri una volta. Conferma che la definizione del filtro e il suo riferimento siano sopravvissuti se l'effetto è necessario.
5. Se il destinatario richiede normali colori piatti modificabili, usa la versione con riempimenti diretti e rimuovi il filtro ormai inutile da quella copia di consegna.

Per sfumature, tratti, opacità o sovrapposizioni con fusione, una matrice globale non è uno strumento generico di ricerca e sostituzione. Ricostruire l'aspetto desiderato come colori sorgente può richiedere più della modifica di due valori esadecimali. Se una consegna raster è accettabile, esportare in PNG l'aspetto verificato è un'altra opzione. Mantieni separatamente l'originale vettoriale.

Quando PerfectVector entra in questo flusso

Se hai già questi due tracciati, modificali direttamente. Non c'è motivo di rasterizzarli e ricalcarli per rimuovere un filtro di colore.

PerfectVector diventa utile quando la grafica iniziale è un PNG o JPG e ti servono regioni modificabili. Usa la conversione da immagine a vettore per preparare un candidato vettoriale, poi esamina confini delle forme e piccoli dettagli prima di ricolorare. Un filtro applicato a una bitmap può cambiarne l'aspetto, ma la bitmap rimane contenuto di pixel. Il controllo del raster incorporato aiuta a distinguere quel caso dai tracciati che puoi selezionare e modificare.

Per le fotografie in cui l'obiettivo è semplicemente una tinta, mantieni un flusso raster. Per un logo con un originale vettoriale disponibile, usa l'originale. La panoramica sulla vettorializzazione spiega quando recuperare la geometria dai pixel è il passaggio utile.

FAQ

feColorMatrix cambia i valori fill nel mio SVG? No. Trasforma i canali di colore renderizzati. Gli attributi fill della sorgente rimangono invariati se non li modifichi separatamente.

Perché il grigio scelto è più chiaro del previsto? Controlla lo spazio di calcolo del filtro. Le primitive dei filtri SVG usano linearRGB per impostazione predefinita. Imposta color-interpolation-filters su sRGB quando le costanti della matrice rappresentano valori normalizzati di campioni sRGB.

Come mantengo la trasparenza durante la ricolorazione? Mantieni la riga alfa come 0 0 0 1 0. Conserva l'alfa in input. Controlla i bordi traslucidi ed evita di aggiungere un offset alfa se non vuoi cambiare la trasparenza.

Un PNG filtrato può diventare un vettore modificabile? Un filtro di colore cambia l'aspetto, non la geometria. Per modificare singole forme vettoriali, ottieni l'originale vettoriale o vettorializza il raster ed esamina i tracciati risultanti.

Fonti

1. MDN: feColorMatrix — Definisce righe della matrice, canali e tipi di trasformazione disponibili.
2. MDN: color-interpolation-filters — Spiega il valore predefinito linearRGB e la selezione esplicita di sRGB.
3. W3C: Filter Effects, feColorMatrix — Specifica il comportamento della trasformazione di colore e alfa.
4. MDN: Riempimenti e tratti — Descrive i colori sorgente usati dalle forme SVG.

Se la tua grafica esiste soltanto come pixel e richiede colori separati modificabili, converti l'immagine in un candidato vettoriale. Esamina i tracciati, modifica i colori sorgente e riapri il file consegnato per controllarne sia l'aspetto sia la modificabilità.