Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 01/11/2012

SVG Filters: Uso de feColorMatrix (Matrices de Color)

La primitiva feColorMatrix permite la redefinición de colores dentro de una imagen, basandose en la capacidad de multiplicar los niveles de cada píxel RGB y alfa por coeficientes numéricos. En una situación muy compleja, un usuario podría especificar una matriz entera de veinte coeficientes (es decir, de 4 por 5), que debe de multiplicarse por el vector de uno a cuatro compuesto por los valores R G B A que representan el valor de color y opacidad de un píxel determinado.

Las filas de la matriz representan respectivamente los tonos R, G, B, y el Alfa, al igual que el vector de uno a cuatro antes comentado.

El elemento feColorMatrix cuenta con unas matrices predefinidas que se han asociado a efectos comunes como son saturate, hueRotate o luminanceToAlpha.

Tipo: 

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="feColorMatrix">
            <feColorMatrix values="1 0 0 0 0   0 1 0 0 0   0 0 1 0 0   0 0 0 1 0" type="matrix" />
        </filter>
    </defs>
    <image x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/paisajes3d.jpg" filter="url(#feColorMatrix)" />
</svg>

TypeDefinición

Matrix

Utiliza la matriz pasada a través del atributo values compuesta de 20 valores separados por espacios y que se interpretan como 4 vectores de 5 elementos cada uno. El primer vector será para definir los rojos, el segundo definirá los verdes, el tercero los azules y el cuarto se utilizará como valor alfa.

Saturate

Sólo necesita de un número real comprendido entre 0 y 1 pasado a través del atributo values. El valor 0 se interpretará como desaturar y 1 como la imagen con el color original.

HueRotate

Sólo necesita un valor comprendido entre 0 y 360 pasado a través del atributo values. El valor de 0 no tendrá efecto en la imagen y el valor 180 será el equivalente a invertir los colores.

LuminanceToAlpha

Hace el efecto de Negativo. El atributo values no es aplicable.

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.