feColorMatrix en SVG: cambia colores sin modificar los rellenos

Un filtro SVG feColorMatrix cambia los colores que muestra un renderizador. No reescribe los valores fill de tus trazados. Por eso resulta útil para efectos visuales reversibles, pero una vista previa filtrada y un SVG con una paleta editada son entregas distintas.

Si necesitas una vista previa web, conserva el filtro y prueba la página donde se ejecuta. Si alguien necesita seleccionar una forma azul y editar su relleno azul, cambia las pinturas del original. Si el original es un PNG, ni un filtro ni un contenedor SVG crean formas vectoriales editables; eso requiere un paso separado de vectorización.

El ejemplo siguiente utiliza el mismo motivo de dos hojas para ambos métodos de cambio de color. Puedes guardar el código, inspeccionar el original y quitar el filtro para ver exactamente qué cambió.

Elige el resultado de cambio de color que necesitas

La guía de edición de colores SVG explica cómo localizar rellenos, trazos y reglas de estilo. Aquí la pregunta más concreta es qué deja un filtro en el archivo. MDN describe feColorMatrix como una transformación de canales de color de píxeles, mientras que su guía de relleno y trazo describe las pinturas aplicadas a las formas.

Un ejemplo de dos colores que puedes inspeccionar

Guarda esto como filtered-leaves.svg y ábrelo en un navegador. La primera hoja empieza con un relleno naranja, #cc6633; la segunda tiene un relleno verde, #339966, con la mitad de opacidad. La matriz intercambia los canales rojo y azul mientras conserva verde y 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 cuatro versiones de este motivo original en el navegador: las pinturas originales, la versión filtrada, una edición directa y una copia sin el filtro. La edición directa cambió el primer relleno a #3366cc y el segundo a #669933, sin filtro. Ambos métodos produjeron un motivo azul y verde oliva. Inspeccionar el DOM de la versión filtrada seguía devolviendo los atributos de relleno naranja y verde originales. Quitar su filtro devolvió la paleta original.

Esta es una pequeña demostración en navegador, no una prueba de compatibilidad de todos los editores o formatos de exportación. Su comprobación útil de entrega es sencilla: el archivo filtrado sigue dependiendo de que ese efecto se conserve y renderice. La versión con rellenos directos lleva la nueva paleta en las propias formas.

Para repetir la comprobación del código, abre el SVG en un editor de texto y busca fill=. Después elimina únicamente filter="url(#swap-red-blue)" del grupo y actualiza el navegador. Conserva el archivo sin modificar a su lado para comparar el resultado.

Lee las cuatro filas sin memorizar una matriz

Para type="matrix", el atributo values contiene veinte números: cuatro filas de cinco. Cada fila calcula un canal de salida. Las columnas utilizan rojo, verde, azul y alfa de entrada, y un desplazamiento constante. La referencia de matriz de MDN muestra las ecuaciones y la matriz identidad.

En nuestro ejemplo, la fila uno toma el azul como nuevo rojo. La fila dos conserva el verde. La fila tres toma el rojo como nuevo azul. La fila cuatro conserva alfa:

0 0 0 1 0

Esa última fila significa «utilizar el alfa existente sin desplazamiento añadido». Sustituirla por todo ceros vuelve transparente el resultado. Añadir una constante en la última columna cambia la transparencia incluso donde el original era transparente, lo que puede crear un rectángulo no deseado dentro de la región del filtro.

La matriz procesa la entrada renderizada del filtro. No sabe qué píxeles proceden de una hoja, una letra, un trazo o una fotografía incrustada. Aplícala al grupo u objeto que pretendas afectar. Si necesitas cambiar solo una parte significativa de un diseño, selecciona esa parte y edita su pintura.

Establece sRGB cuando tus números procedan de una muestra RGB

Las primitivas de filtro SVG utilizan linearRGB de forma predeterminada. Una muestra como rgb(128, 128, 128) suele especificarse en sRGB, así que una constante de matriz de 0.5 en el espacio de filtro predeterminado no significa el mismo gris visible que sRGB a media escala. Usa color-interpolation-filters="sRGB" cuando tu matriz deba operar sobre esos valores de canales sRGB. Es distinto de color-interpolation; cambiar ese otro atributo no selecciona el espacio de color del filtro. MDN documenta los valores predeterminados y la diferencia.

Para una silueta sólida #3366cc, los valores RGB normalizados son 51/255, 102/255 y 204/255, o 0.2, 0.4 y 0.8. El filtro siguiente descarta los valores RGB de entrada y establece esas constantes mientras conserva el 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>

Referencia este filtro desde el objeto con filter="url(#solid-blue)". Elimina intencionadamente las diferencias entre los colores opacos del original. Es adecuado para una silueta, no para conservar el detalle tonal de una fotografía. La especificación de efectos de filtro define la transformación de canales y su tratamiento de valores de color no premultiplicados.

Establecer sRGB es elegir un espacio de cálculo, no garantizar un color idéntico en todas las pantallas o en impresión. Para una discrepancia de entrega más amplia, usa la lista de comprobación de colores de exportación SVG.

Comprueba el archivo entregado, no solo la vista previa

Un cambio de color basado en filtro sigue siendo reversible mientras la ilustración original y la definición del filtro permanezcan intactas. Una captura o exportación ráster registra el resultado visible como píxeles. Ninguna operación por sí sola hace que la nueva paleta esté disponible como rellenos de trazado editables.

Antes de entregar un vector, comprueba el destino real:

1. Abre el SVG guardado mediante el mismo método de importación o exportación que utilizará el destinatario.
2. Compara los colores y los bordes translúcidos con la vista previa del navegador.
3. Selecciona una forma e inspecciona su relleno. ¿Contiene el nuevo valor previsto o la pintura original debajo de un efecto?
4. Guarda y vuelve a abrir una vez. Confirma que la definición del filtro y su referencia se hayan conservado si se requiere el efecto.
5. Si el destinatario necesita colores planos editables normales, utiliza la versión de rellenos directos y elimina de esa copia de entrega el filtro que ya no se necesita.

Para degradados, trazos, opacidad o superposiciones mezcladas, una matriz global no es una herramienta general de buscar y reemplazar. Reconstruir la apariencia prevista como pinturas del original puede requerir editar más que un par de valores hexadecimales. Si una entrega ráster es aceptable, exportar a PNG la apariencia verificada es otra opción. Conserva por separado el maestro vectorial.

Cuándo corresponde PerfectVector en este flujo

Si ya tienes estos dos trazados, edítalos directamente. No hay motivo para rasterizarlos y volver a vectorizarlos para eliminar un filtro de color.

PerfectVector resulta pertinente cuando tu ilustración inicial es un PNG o JPG y necesitas regiones editables. Utiliza la conversión de imagen a vector para preparar un vector candidato e inspecciona después los límites de sus formas y sus detalles pequeños antes de recolorear. Un filtro aplicado a un mapa de bits puede cambiar su apariencia, pero el mapa de bits sigue siendo contenido de píxeles. La comprobación de ráster incrustado ayuda a distinguir ese caso de trazados que puedes seleccionar y editar.

Para fotografías cuyo objetivo sea simplemente un tinte, mantén un flujo ráster. Para un logotipo con un maestro vectorial disponible, utiliza el maestro. La introducción a la vectorización explica cuándo recuperar geometría de píxeles es el paso útil.

Preguntas frecuentes

¿feColorMatrix cambia los valores fill de mi SVG? No. Transforma los canales de color renderizados. Los atributos fill originales permanecen intactos salvo que los edites por separado.

¿Por qué el gris que elegí es más claro de lo esperado? Comprueba el espacio de cálculo del filtro. Las primitivas de filtro SVG utilizan linearRGB por defecto. Establece color-interpolation-filters en sRGB cuando las constantes de la matriz representen valores normalizados de muestras sRGB.

¿Cómo conservo la transparencia al recolorear? Mantén la fila alfa como 0 0 0 1 0. Así conservas el alfa de entrada. Comprueba los bordes translúcidos y evita añadir un desplazamiento alfa salvo que pretendas cambiar la transparencia.

¿Un PNG filtrado puede convertirse en un vector editable? Un filtro de color cambia la apariencia, no la geometría. Para editar formas vectoriales individuales, consigue el original vectorial o vectoriza el ráster e inspecciona los trazados resultantes.

Fuentes

1. MDN: feColorMatrix — Define filas de matriz, canales y tipos de transformación disponibles.
2. MDN: color-interpolation-filters — Explica el valor predeterminado linearRGB y la selección explícita de sRGB.
3. W3C: efectos de filtro, feColorMatrix — Especifica el comportamiento de transformación de color y alfa.
4. MDN: rellenos y trazos — Describe las pinturas originales utilizadas por las formas SVG.

Si tu ilustración solo existe como píxeles y necesita colores editables separados, convierte tu imagen en un vector candidato. Inspecciona los trazados, recolorea las pinturas del original y vuelve a abrir el archivo entregado para comprobar tanto su apariencia como su capacidad de edición.