Filtros SVG sobre imágenes. Herramienta online de Jorge Aznar 7.4.15
Artículo de Jorge Aznar para KsesoCss sobre los filtros SVG aplicados a imágenes y presentación - explicación de uso de su herramienta online para hacerlo de forma sencilla y con un click.
Filtros SVG sobre imágenes. Herramienta online de Jorge Aznar
Artículo original de Jorge Aznar (englobado en la iniciativa El autor y su obra
) en la que comparte y explica su herramienta en línea para aplicar distintos filtros SVG (hasta 29) a una imagen. Imagen que puedes ser la que tú elijas gracias al Drag&Drop
con el que cuenta la aplicación.
Si has utilizado filtros con Photoshop o con CSS como es mi caso y luego has experimentado con los filtros de SVG el cambio es tedioso, aburrido y muchas veces es hasta frustrante. La especificación es tan amplia y rica que todo esto la hace demasiado complicada.
No voy a entrar en especificar que hace cada filtro para eso ya tenemos un artículo en este blog hablando de varios filtros. También en el capítulo 7 de SCALABLE entro a explicar cada una de las propiedades y atributos que tiene cada filtro.
Has de ser paciente ya que cada filtro hace una cosa y cada uno de ellos tiene una serie de atributos que no tienen nada que ver con el anterior.
Como siempre digo, la mejor manera de aprender y de crear interés es visualizar que hace cada cosa. Para el caso que nos ocupa (filtros SVG aplicados a imágenes) he creado una pequeña herramienta con SVG HTML5 y jQuery para visualizar los efectos de varios filtros SVG sobre un archivo de imagen, ya sea en formato SVG JPEG PNG o GIF.
La herramienta trae por defecto una imagen sobre la que ver el resultado de cada uno de los filtros, pero también he añadido un apartado donde gracias al drag&drop
podéis subir vuestro archivo en los formatos ya mencionados y experimentar los filtros sobre vuestro archivo.
Hasta el momento he creado 29 efectos con varios filtros. No están todos los filtros SVG que tenemos a nuestra disposición pero si los más vistosos.
Con el siguiente enlace podréis acceder a la herramienta online para jugar aplicando los diferentes Filtros SVG a vuestra imágen:
SVG Filter Effects · drag&drop
El código de todos los filtros esta incluido en la parte inferior de la herramienta. Así que en el caso de que os guste el efecto de un filtro en particular lo podáis aplicar a vuestros archivos.
Si queréis jugar con los valores de una serie de filtros la gente de Microsoft (que por ahora no da soporte a los filtros a través de CSS y solo da soporte a los filtros SVG a partir de IE10) tiene una herramienta donde podemos modificar los valores de los filtros. La propia herramienta nos genera el código del filtro para luego poder usarlo sobre nuestros archivos:
Mucho cuidado al copiar el código que genera esta herramienta ya que en la etiqueta de cierre de </filter> coloca la barra al final cuando debe de ir al inicio. Y ojo 2 que si aplicamos los filtros SVG a través de CSS, estos no van a funcionar en Internet Explorer.
Por último un tip o truco: Cuando no os quede claro lo que hace un atributo de un filtro siempre podéis recurrir a SMIL para animar ese atributo y ver como actúa sobre un archivo. En este mismo blog escribí un artículo sobre Animación de SVG con SMIL. Para animar el filtro solo tenemos que añadir entre las etiquetas de filter el elemento <animate> y en su attribute='' añadir el atributo que queremos animar. Luego en values='' le pasamos los valores que queremos animar y simplemente nos queda visualizar la animación sobre el archivo.
Como ejemplo de lo anterior este caso en el que no me quedaba claro que demonios hacia baseFrequency
así que lo anime para ver qué efecto aplicaba sobre una fotografía:
<filter id='turbulence' x='0' y='0'>
<feTurbulence type='fractal' baseFrequency='0.3' result='lsd' numOctaves='10' seed='10' stitchTiles='stitch'>
<animate attributeName='baseFrequency' values='0.1; 0.2; 0.3; 0.5; 0.7; 0.8; 0.6; 0.4; 0.2; 0' dur='10s' begin='0' fill='freeze'/>
</feTurbulence>
</filter/>
Y en este pen podéis ver el resultado del código del ejemplo anterior. Recarga el pen para verlo en funcionamiento:
See the Pen QwRxPO by Kseso (@Kseso) on CodePen.
El autor
@Jorge Aznar
Diseñador gráfico/web.
Colaboro con los hangouts de #vectoresIO una iniciativa de desarrolloWeb.
En mi web [jorgeatgu.com] puedes ver diferentes trabajos, en mi blog lo que escribo y en CodePen mis experimentos con SVG + HTML5 * SMIL * CSS3. Y en twitter @jorgeATGU
Autor del libro sobre SVG llamado SCALABLE
Docente del curso en 42 lecciones en vídeo Descubre y domina SVG
Licencias de este artículo
Pese a que el blog está bajo una licencia Beerware, este artículo queda fuera de ella. Todos los derechos corresponden a su autor, y debes contactar con él para cualquier tema relacionado con él.
