⇪

w3.unpocodetodo.info

facebook-svg gplus-svg twitter-svg

Los filtros en CSS3 tienen su origen en SVG. En 2008 Robert O'Callahan ( Mozilla ) vio un gran potencial en aplicar filtros SVG a los elementos HTML mediante CSS. Para aplicar un filtro SVG a una imagen utilizamos esta sintaxis:

.imagen{ filter: url(#hueRotate180);}

donde #hueRotate180 representa el id del filtro SVG aplicado.

<svg id="filtro-svg">
    <filter id="hueRotate180">
    	<feColorMatrix type="hueRotate" in="SourceGraphic" values="180"/>
    </filter>
</svg>

Sin embargo esto parece no funcionar en algunas versiones de Firefox.

Filtros SVG como data:uri

Otra manera de utilizar los filtros SVG es convertirlos a data:uri, y esto sí que parece funcionar.
Una propuesta que se puede ver por ahí es utilizar el código SVG no codificado ( unencoded ) así:

.data-uri-uncoded{ background-image:
    url('data:image/svg+xml;utf8,<svg xmlns = "http://www.w3.org/2000/svg"> . . . </svg>');
}

De hecho esta es una imagen de fondo pero podemos hacer lo mismo con los filtros SVG. En el siguiente ejemplo escribimos el filtro para una escala de grises.

.grayscale{
	-webkit-filter:grayscale(1);/* Filtro para los navegadores -webkit- */
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix in=\'SourceGraphic\'  type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.4+ */
}

Y si, tiene razón. Esto no hay quien lo entienda. Así que mirémoslo detenidamente. La primera parte no tiene misterio. Es el filtro para navegadores -webkit-.

.grayscale{-webkit-filter:grayscale(1);. . . .

A continuación viene la parte importante: el filter:url() compatible con otros navegadores ( Firefox 34+ ). Lo destacado en rojo indica al navegador que lo que viene a continuación es un data:uri, ( data: ) y que se trata de una imagen SVG.

filter: url("data:image/svg+xml;utf8,<svg. . .


Normalmente cuando utilizamos SVG en HTML5 no utilizamos espacios de nombres ( namespace ), pero en este caso es importante utilizarlos. No olvidemos que, al fin y al cabo, los data:URI son el equivalente a una referencia hacia una fuente externa.

<svg xmlns='http://www.w3.org/2000/svg'>

Como funcionan los filtros SVG

Cuando creamos un filtro lo ponemos dentro de un contenedor: el elemento <filter>. Es importante que el elemento <filter> tenga una identificación ( el atributo id ) para poder referenciarlo más tarde.

<svg xmlns='http://www.w3.org/2000/svg'>
      <filter id="grayscale">
         <!--los filtros primitivos van aqui -->
      </filter>
</svg>

En este caso el filtro utilizado es <feColorMatrix> que se utiliza normalmente para ajustar la matriz del color de un elemento SVG.

El atributo in de <feColorMatrix> identifica el objeto al cual se le aplica el filtro. En este ejemplo utilizamos in="SourceGraphic" porque aplicamos el filtro al grafico de origen ( source graphic ). 

<svg xmlns='http://www.w3.org/2000/svg'>
      <filter id="grayscale">
        <feColorMatrix in='SourceGraphic' type='matrix' . . . 
      </filter>
</svg>

Si el valor del atributo type="matrix", tenemos que proporcionar una lista de 4 x 5 = 20 números ( entre 0 y 1 ). Estos números aparecen, separados por un espacio en blanco o por una coma, como valor del atributo values.

<svg xmlns='http://www.w3.org/2000/svg'>
      <filter id="grayscale">
        <feColorMatrix in='SourceGraphic' type='matrix'
        values='0.3333 0.3333 0.3333 0 0
                0.3333 0.3333 0.3333 0 0
                0.3333 0.3333 0.3333 0 0
                0 0 0 1 0'/> 
      </filter>
</svg>

Para claridad acostumbramos a separar esta lista en 4 grupos de 5 números. Cada grupo representa uno de los tres colores primarios ( RGB ) o el canal alfa del imagen.
Por ejemplo: esta es la lista de valores que deja sin cambiar el color original:

           values ="1 0 0 0 0 // rojo
                    0 1 0 0 0 // verde
                    0 0 1 0 0 // azul
                    0 0 0 1 0"// alfa

Si por de otra parte queremos invertir los colores, con tal de que el rojo se convierta en azul, y el azul en rojo, tenemos que utilizar esta otra lista de valores: 

           values ="0 0 1 0 0 // rojo
                    0 1 0 0 0 // verde
                    1 0 0 0 0 // azul
                    0 0 0 1 0"// alfa

El valor del canal alfa queda sin cambiar en el caso que deseamos una imagen opaca.

Para una imagen en escala de grises, en este caso utilizamos una matriz, que pone al mismo nivel ( 0.3333 ) los tres colores primares:

values='0.3333 0.3333 0.3333 0 0
        0.3333 0.3333 0.3333 0 0
        0.3333 0.3333 0.3333 0 0
        0      0      0      1 0'

Ahora lo que queda es ponerlo todo en una sola línea y escapar con una barra invertida las comillas. Al final hay que referenciar el filtro SVG

.grayscale{
	-webkit-filter:grayscale(1);/* Filtro para los navegadores -webkit- */
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix in=\'SourceGraphic\'  type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
}

Otros filtros URL

enfeinada

imagen original

enfeinada

grayscale

enfeinada

saturate

enfeinada

hueRotate

enfeinada

sepia

enfeinada

blur



enfeinada
imagen original


enfeinada
grayscale


enfeinada
saturate


enfeinada
hueRotate


enfeinada
sepia



enfeinada
blur
saturate
.saturate{
    -webkit-filter:saturate(10);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'saturate\'><feColorMatrix in=\'SourceGraphic\' type=\'saturate\' values=\'10\'/></filter></svg>#saturate"); /* Firefox 3.4+ */
}
hueRotate
.hueRotate{
    -webkit-filter:hue-rotate(270deg);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'TestHueRotate\'><feColorMatrix in=\'SourceGraphic\' type=\'hueRotate\' values=\'270\'/></filter></svg>#TestHueRotate"); /* Firefox 3.4+ */
}
sepia
.sepia{
    -webkit-filter:sepia(1);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'sepia\'><feColorMatrix in=\'SourceGraphic\' type=\'matrix\' values=\'.343 .669 .119 0 0 .249 .626 .130 0 0 .172 .334 .111 0 0 .000 .000 .000 1 0\'/></filter></svg>#sepia"); /* Firefox 3.4+ */
}
blur
.blur{
    -webkit-filter:blur(5px);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur\'><feGaussianBlur in=\'SourceGraphic\' type=\'saturate\' stdDeviation= \'5\'/></filter></svg>#blur"); /* Firefox 3.4+ */
}

Vea una demonstración en Codepen