MSDN España

Noticias, avisos, reflexiones... del equipo que hay detrás de MSDN en España... también tendremos alguna que otra firma invitada :)

Efectos de Filtro SVG en IE10

Efectos de Filtro SVG en IE10

Rate This
  • Comments 1

Scalable Vector Graphics (SVG) es, para los desarrolladores, un lenguaje declarativo basado en markup que permite crear contenidos interactivos avanzados dentro de sus sitios Web. Con los Efectos de Filtro de SVG, soportados en IE10 dentro de la versión Preliminar de Desarrollo de Windows, disponen además de una colección de efectos de imagen potentes que se pueden aplicar a todos los elementos SVG. Al igual que sucede con todos los contenidos de las páginas Web en IE9, los efectos de Filtro SVG en IE10 se benefician de la aceleración por hardware, con un rendimiento asombroso que abre las puertas a nuevas oportunidades a la hora de crear contenidos de usuario real.

clip_image002Demo de Filtros SVG en el sitio Web IE Test Drive

Introducción a los filtros SVG

Los Efectos de Filtro de SVG extienden las capacidades gráficas de la web. Un Filtro SVG define una operación sobre una entrada gráfica. Igual que sucede con otros elementos de HTML, los filtros son de naturaleza declarativa y disponen de un DOM de apoyo para su manipulación dinámica. Un filtro se aplica a un elemento SVG por medio del atributo “filter” bajo la sintaxis filter="url(#filterId)", o también se aplican como propiedad CSS: filter:url(#filterId). Cada filtro se compone de una o más primitivas de filtro, que son los bloques básicos de que disponemos para crear efectos de complejidad creciente. Cada uno aplica un efecto básico a un gráfico. Para generar efectos completos, podemos encadenar juntas varias primitivas de filtro de manera que la salida de una sirve de entrada para la siguiente. Cuando un filtro se aplica a un elemento SVG, dicho elemento se utiliza como gráfico de fuente para el filtro en la primera acción de filtrado en cadena.

clip_image003 clip_image004
Una imagen de un cerdito hecho en SVG antes (imagen de la izquierda) de aplicar un filtro SVG y después (derecha) de aplicarlo

Disponemos de 16 primitivas de filtro distintas. Nos permiten incorporar efectos que van desde aplicar fuentes de luz a transformaciones matriciales o difuminados de tipo Gaussiano y otros muchos más. Los Filtros SVG nos permiten aplicar y manipular efectos fácilmente, muy al estilo de Photoshop. En la misma línea que el resto de SVG, los resultados son escalables, manteniendo una calidad alta en cualquier resolución. La definición del filtro se refleja totalmente en el DOM igual que el elemento original SVG. Los efectos se pueden retirar fácilmente eliminando el atributo del filtro. La imagen original, sin filtro, puede recuperarse de esta forma. Las primitivas de filtro varían enormemente para cubrir una gama muy amplia de posibilidades, pero existen algunos rasgos comunes entre todas ellas. La mayoría de las primitivas tienen uno o dos parámetros de entrada y normalmente hacen referencia al elemento origen, el canal alfa del elemento origen o la salida de otra primitiva de filtro. Al disponer de una serie de parámetros de entrada, aumenta la cantidad de efectos posibles.

Todas las primitivas de filtro nos permiten indicar un identificador para su salida de modo que dicha salida pueda ser referenciada en un momento posterior. Aunque las primitivas de filtro utilizan la salida de la primitiva de filtro previa por defecto, las cadenas de filtro no tienen que ser necesariamente lineales. De hecho, las cadenas de filtro más complejas, sobre todo las que utilizan primitivas con múltiples valores de entrada, suelen ser no lineales.

Aquí tenemos una primitiva de filtro sencilla en acción:

La primitiva de filtro feColorMatrix aplica una matriz de transformación sorbe los valores RGBA de cada pixel en la entrada. Podemos definir una matriz personalizada o utilizar una palabra clave. Con este filtro podemos aplicar fácilmente una escala de grises a los elementos SVG, o modificar sus colores de cualquier manera. A continuación muestro un ejemplo del uso de la palabra clave hueRotate y vemos cómo desplaza los tonos de cada pixel 180 grados en el lado opuesto de la rueda de color.

<filterid="myHueRotate">

  <feColorMatrixtype="hueRotate"values="180"/>

</filter>

<g id="myPig" filter="url(#myHueRotate)">

<!-- ... -->

</g>

clip_image003[1] clip_image005
La imagen SVG del cerdito antes (izquierda) y después (derecha) de aplicar un filtro feColorMatrix

Ejemplos de primitivas de Filtro SVG

El siguiente es un ejemplo de iluminación de una figura. Tenemos dos primitivas de filtro de iluminación a elegir: feDiffuseLighting y feSpecularLighting. Hay otros tres filtros de luz disponibles: feDistantLight, fePointLight, y feSpotlight.

<filterid="lighting_filter">

  <feDiffuseLighting>     

      <feSpotLightx="0"y="0"z="50"pointsAtX="300"pointsAtY="300"pointsAtZ="0"

       limitingConeAngle="20"specularExponent="5"/>

   </feDiffuseLighting>

</filter>

<gid="myPig"filter="url(#lighting_filter)">

<!-- ... -->

</g>

clip_image006 clip_image007
Figura del cerdito SVG antes (izquierda) y después (derecha) de aplicar un filtro de iluminación

Como podemos ver, el filtro de iluminación por sí solo genera una imagen en escala de grises de un mapa de luz. En la esquina superior izquierda, en la coordenada (0,0,50) hay un filtro de punto de luz que despliega un haz de luz en dirección a la esquina inferior derecha, creando la forma gris en el rectángulo negro. El filtro de luz es bastante más útil si se usa en combinación con otro filtro.

<filterid="lighting_filter">

   <feDiffuseLightingresult="result1">

       <feSpotLightx="0"y="0"z="50"pointsAtX="300"pointsAtY="300"pointsAtZ="0"

        limitingConeAngle="20"specularExponent="5"/>

   </feDiffuseLighting>

   <feCompositeoperator="arithmetic"k1="1"k2="0"k3="0"k4="0"

   in="SourceGraphic"in2="result1"/>

</filter>

Hemos añadido al final de la cadena de filtros una primitiva feComposite que, como puedes ver, tiene dos parámetros de entrada: SourceGraphic, que es la imagen original del cerdito a la cual se aplicará el filtro, y el resultado del filtro de iluminación. La primitiva feComposite realiza una operación de composición de las dos entradas. Es muy interesante a la hora de combinar múltiples salidas de otras primitivas, ya que es capaz de generar un mapa de iluminación más complejo a partir de varias fuentes de luz. En este caso el resultado del filtro de iluminación se multiplica por el gráfico del cerdito, y el valor resultante es el dibujo que se muestra aquí: el haz de luz sobre la cara del personaje.

clip_image008 clip_image009
La imagen del cerdito SVG después de aplicar el filtro de iluminación y multiplicarlo por la imagen original. A la izquierda, con fondo transparente. A la derecha: el filtro se aplica al cerdito SVG y a un objeto <rect> en blanco, detrás de él.

Con la ayuda del filtro feComposite podemos llevar a cabo fácilmente una operación de “sobre-composición”, esto es, integrar los resultados de varias primitivas de filtro unas sobre otras para generar una imagen compuesta. El elemento <feMerge> es una primitiva de filtro muy importante, ya que consigue precisamente esto: combinar los resultados de varias primitivas de filtro unas sobre otras. <feMerge> simplifica el proceso gracias a sus elementos hijos <feMergeNode>, lo que nos permite combinar más de dos resultados de primitivas de filtro con la operación “over” de una sola vez.

Otra primitiva de filtro que interesa destacar es la feImage, que nos permite añadir imágenes adicionales dentro del filtro. Se puede utilizar para referenciar una imagen externa u otros elementos SVG. La imagen puede utilizarse después como entrada para otra primitiva de filtro.

clip_image010El cerdito SVG después de aplicar un filtro que multiplica la imagen con una foto de un paisaje

Estos son solo unos pocos ejemplos de primitivas de filtro SVG. La lista completa se puede consultar en la Especificación de Efectos de Filtro SVG.

Cuándo debemos utilizar los filtros SVG

Lo primero, los filtros SVG se pueden utilizar dentro de herramientas de edición de imágenes y diseño para dar un aspecto más interesante a los elementos SVG. Pueden añadir sensación de profundidad o crear apariencias que de otra manera no serían posibles con SVG. También se pueden utilizar para conseguir una gran variedad de resultados, aparte de lo que aportan las herramientas de edición.

Un efecto muy demandado en la web ese el efecto de sombreado de textos CSS. Aunque el sombreado de textos no se aplica a los textos SVG, el efecto se puede conseguir también utilizando filtros SVG.

<filterid="myShadowFilter">

   <feOffsetdx="5"dy="5"/>

   <feGaussianBlurstdDeviation="3"/>

   <feColorMatrixtype="matrix"values="0 0 0 0 .2, 0 0 0 0 1, 0 0 0 0 .75, 0 0 0 1 0"

    result="shadow"/>

   <feMerge>

     <feMergeNodein="shadow"/>

     <feMergeNodein="SourceGraphic"/>

   </feMerge>

</filter>

Este filtro genera un efecto de sombra cogiendo la figura del cerdito, desplazando 5 unidades de distancia en ambos ejes de coordenadas, luego le aplica un desenfoque Gaussiano, cambia el color a un verde azulado y finalmente combina la imagen original del cerdito con la sombra. Como ves, crear un efecto de sombreado para textos o imágenes SVG no es especialmente difícil.

clip_image011El cerdito SVG después de aplicar un efecto de sombreado a la figura y al texto

Además de añadir volumen a las figuras SVG (que por definición son planas), los efectos de filtro se aplican también a imágenes de mapa de bits insertando dichos bitmaps dentro de un elemento <svg> utilizando el elemento <image>. Esto es especialmente interesante para lograr efectos de imagen dinámicos en el navegador. La sustitución de la imagen por cualquier otra es una operación sencilla, y también eliminar, intensificar o variar el efecto de un filtro mediante el DOM..

clip_image012El cerdito SVG después de aplicarle un filtro SVG generado con Inkscape

Si tu navegador soporta filtros SVG, puedes visitar esta página para ver cómo cambia la luz en nuestro cerdito de ejemplo simplemente variando un atributo:

light1.setAttribute("elevation", currentValue);

El atributo filter es un atributo de presentación, es decir, puede aplicarse a los elementos mediante CSS y tiene todas las ventajas de la aplicación de estilos mediante CSS, incluyendo la posibilidad de aplicar efectos asociados a la pseudo-clase “hover”.

Vamos a probarlos

En IE10 seguimos mejorando la implementación de los Filtros SVG. Por ejemplo, sabemos que hay un problema con los filtros cuando se aplican a textos dentro de elementos <tspan> o <textPath>, que no funcionan en la Preliminar de Desarrollo de Windows 8. Es una incidencia que estará resuelta en las siguientes pre-versiones. Puedes probar ya los Filtros SVG en IE10 y en la Preliminar de Desarrollo de Windows, y darnos tu opinión en Connect.

También puedes probar la demo de Efectos de Filtro SVG en el sitio web IE Test Drive para hacerte una idea de cómo funcionan y en la Guía de Desarrollo de IE10 encontrarás más información sobre ellos. Puedes también desarrollar tu propia pila de primitivas de filtro para crear efectos personalizados. El desarrollo de filtros complejos puede ser una tarea bastante complicada. Los programadores expertos en temas de gráficos o con una buena base matemática pueden disfrutar mucho manejando estos filtros. A otros seguramente les gustarán más ciertas aplicaciones como Inkscape, que incluyen filtros SVG preconfigurados listos para utilizar y parametrizar a nuestro gusto. Con la combinación adecuada de filtros podemos conseguir mil y un efectos para nuestras páginas. ¡Esperamos ver pronto vuestras creaciones!

FUENTE: Jennifer Yu - http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

 

Saludos,

El equipo de MSDN España

Leave a Comment
  • Please add 6 and 5 and type the answer here:
  • Post
  • esta pagina es la honda contiene lo justo y lo que nesesitaba

Page 1 of 1 (1 items)