SVG feColorMatrix: recolora sem mudar preenchimentos

Um filtro SVG feColorMatrix muda as cores que um renderizador exibe. Ele não reescreve os valores fill dos seus traçados. Isso o torna útil para efeitos visuais reversíveis, mas uma prévia filtrada e um SVG com uma paleta recém-editada são entregas diferentes.

Se você precisa de uma prévia web, mantenha o filtro e teste a página em que ele será executado. Se alguém precisa selecionar uma forma azul e editar seu preenchimento azul, altere as pinturas de origem. Se a origem é um PNG, nem um filtro nem um invólucro SVG cria formas vetoriais editáveis; isso exige uma etapa separada de vetorização.

O exemplo abaixo usa o mesmo motivo de duas folhas para os dois caminhos de recoloração. Você pode salvar o código, inspecionar a origem e remover o filtro para ver exatamente o que mudou.

Escolha o resultado de recoloração necessário

O guia de edição de cores SVG aborda como encontrar preenchimentos, traços e regras de estilo. Aqui a questão mais específica é o que um filtro deixa no arquivo. O MDN descreve feColorMatrix como uma transformação dos canais de cor dos pixels, enquanto seu guia de preenchimentos e traços descreve as pinturas aplicadas às formas.

Um exemplo de duas cores que você pode inspecionar

Salve isto como filtered-leaves.svg e abra-o em um navegador. A primeira folha começa com um preenchimento laranja, #cc6633; a segunda tem um preenchimento verde, #339966, com metade da opacidade. A matriz troca os canais vermelho e azul, mantendo 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>

Renderizamos quatro versões deste motivo original no navegador: as pinturas originais, a versão filtrada, uma edição direta e uma cópia com o filtro removido. A edição direta mudou o primeiro preenchimento para #3366cc e o segundo para #669933, sem filtro. Ambos os caminhos de recoloração produziram um motivo azul e verde-oliva. Inspecionar o DOM da versão filtrada ainda retornou os atributos fill originais laranja e verde. Remover seu filtro restaurou a paleta original.

Esta é uma pequena demonstração no navegador, não um teste de compatibilidade de todos os editores ou formatos de exportação. Sua verificação útil de entrega é simples: o arquivo filtrado ainda depende de que esse efeito seja preservado e renderizado. A versão com fill direto carrega a nova paleta nas próprias formas.

Para repetir a verificação da origem, abra o SVG em um editor de texto e procure fill=. Depois remova apenas filter="url(#swap-red-blue)" do grupo e atualize o navegador. Mantenha o arquivo sem alterações ao lado para comparar o resultado.

Leia as quatro linhas sem decorar uma matriz

Para type="matrix", o atributo values contém vinte números: quatro linhas de cinco. Cada linha calcula um canal de saída. As colunas usam vermelho, verde, azul e alfa de entrada, além de um deslocamento constante. A referência de matriz do MDN mostra as equações e a matriz de identidade.

Em nosso exemplo, a primeira linha usa o azul como novo vermelho. A segunda mantém o verde. A terceira usa o vermelho como novo azul. A quarta mantém o alfa:

0 0 0 1 0

Essa última linha significa “use o alfa existente, sem deslocamento adicional”. Substituí-la por zeros torna o resultado transparente. Adicionar uma constante na última coluna muda a transparência mesmo onde a origem era transparente, o que pode criar um retângulo indesejado dentro da região do filtro.

A matriz processa a entrada renderizada do filtro. Ela não sabe quais pixels vieram de uma folha, uma letra, um traço ou uma fotografia incorporada. Aplique-a ao grupo ou objeto que você pretende afetar. Se precisar mudar apenas uma parte semântica de um design, selecione essa parte e edite sua pintura.

Defina sRGB quando seus números vierem de uma amostra RGB

As primitivas de filtro SVG usam linearRGB por padrão. Uma amostra como rgb(128, 128, 128) normalmente é especificada em sRGB, portanto uma constante de matriz 0.5 no espaço padrão do filtro não significa o mesmo cinza exibido que metade da escala sRGB. Use color-interpolation-filters="sRGB" quando a matriz precisar operar nesses valores de canais sRGB. Isso é diferente de color-interpolation; mudar esse outro atributo não seleciona o espaço de cor do filtro. O MDN documenta os padrões e essa distinção.

Para uma silhueta sólida #3366cc, os valores RGB normalizados são 51/255, 102/255 e 204/255, ou 0.2, 0.4 e 0.8. O filtro a seguir descarta os valores RGB de entrada e define essas constantes, mantendo o alfa de entrada:

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

Referencie esse filtro no objeto com filter="url(#solid-blue)". Ele remove intencionalmente as diferenças entre as cores opacas da origem. É adequado para uma silhueta, não para preservar os detalhes tonais de uma fotografia. A especificação Filter Effects define a transformação dos canais e seu tratamento dos valores de cor não pré-multiplicados.

Definir sRGB é uma escolha do espaço de cálculo, não uma garantia de cor idêntica em todas as telas ou na impressão. Para uma divergência de entrega mais ampla, use a lista de verificação de cores na exportação SVG.

Verifique o arquivo entregue, não apenas a prévia

Uma recoloração por filtro permanece reversível enquanto a arte original e a definição do filtro permanecem intactas. Uma captura de tela ou exportação raster registra o resultado visível como pixels. Nenhuma das operações, sozinha, torna a nova paleta disponível como preenchimentos editáveis de traçados.

Antes de entregar um vetor, confira o destino real:

1. Abra o SVG salvo pelo mesmo fluxo de importação ou exportação que o destinatário usará.
2. Compare as cores e as bordas translúcidas com a prévia no navegador.
3. Selecione uma forma e inspecione seu preenchimento. Ele contém o novo valor pretendido ou a pintura original sob um efeito?
4. Salve e reabra uma vez. Confirme que a definição do filtro e sua referência sobreviveram se o efeito for necessário.
5. Se o destinatário precisar de cores planas editáveis comuns, use a versão com fill direto e remova o filtro, agora desnecessário, dessa cópia de entrega.

Para gradientes, traços, opacidade ou sobreposições com mesclagem, uma matriz global não é uma ferramenta geral de localizar e substituir. Reconstruir a aparência pretendida como pinturas de origem pode exigir editar mais do que um par de valores hexadecimais. Se uma entrega raster for aceitável, exportar a aparência verificada em PNG é outra opção. Guarde o original vetorial separadamente.

Quando o PerfectVector faz parte deste fluxo

Se você já tem esses dois traçados, edite-os diretamente. Não há motivo para rasterizá-los e traçá-los novamente para remover um filtro de cor.

O PerfectVector se torna relevante quando sua arte inicial é um PNG ou JPG e você precisa de regiões editáveis. Use a conversão de imagem para vetor para preparar um candidato vetorial e inspecione os limites das formas e os pequenos detalhes antes de recolorir. Um filtro aplicado a um bitmap pode mudar sua aparência, mas o bitmap continua sendo conteúdo em pixels. A verificação de raster incorporado ajuda a distinguir esse caso de traçados que você pode selecionar e editar.

Para fotografias em que o objetivo é apenas uma tonalização, mantenha um fluxo raster. Para um logo com original vetorial disponível, use o original. A visão geral da vetorização explica quando recuperar geometria a partir de pixels é a etapa útil.

Perguntas frequentes

feColorMatrix muda os valores de fill no meu SVG? Não. Ele transforma canais de cor renderizados. Os atributos fill de origem permanecem iguais, a menos que você os edite separadamente.

Por que o cinza escolhido está mais claro do que eu esperava? Confira o espaço de cálculo do filtro. As primitivas de filtro SVG usam linearRGB por padrão. Defina color-interpolation-filters como sRGB quando as constantes da matriz representarem valores normalizados de amostras sRGB.

Como mantenho a transparência ao recolorir? Mantenha a linha alfa como 0 0 0 1 0. Isso preserva o alfa de entrada. Confira bordas translúcidas e evite adicionar um deslocamento alfa, a menos que pretenda mudar a transparência.

Um PNG filtrado pode se tornar um vetor editável? Um filtro de cor muda a aparência, não a geometria. Para editar formas vetoriais individuais, obtenha o original vetorial ou vetorize o raster e inspecione os traçados resultantes.

Fontes

1. MDN: feColorMatrix — Define linhas da matriz, canais e tipos de transformação disponíveis.
2. MDN: color-interpolation-filters — Explica o padrão linearRGB e a seleção explícita de sRGB.
3. W3C: Filter Effects, feColorMatrix — Especifica o comportamento de transformação de cor e alfa.
4. MDN: Preenchimentos e traços — Descreve as pinturas de origem usadas pelas formas SVG.

Se sua arte existe apenas como pixels e precisa de cores editáveis separadas, converta a imagem em um candidato vetorial. Inspecione os traçados, recolora as pinturas de origem e reabra o arquivo entregue para conferir sua aparência e sua editabilidade.