Hasta ahora la mayor parte de las animaciones en las interfaces web se realizaban en sobre fondos modificando su tamaño o color e intercambios de color ante la interacción del mouse, entre las que el uso de hover suele ser la más común. A medida que se avanza en los experimentos podemos tener acceso a otras posibilidades como por ejemplo en este caso en el que el formato .svg es sometido a modificaciones que se asemejan mucho a las interpolaciones que hace varios años solo podían realizarse en Flash.
Es así como llegamos a esta librería JavaScript denominada Snap.svg que nos ofrece grandes posibilidades y un resultado sumamente atractivo que abre nuevos caminos para la experimentación. La idea es que ante la interacción del usuario el icono responda de determinada manera cambiando su forma original por otra. Esto tiene, además de un atractivo extra, la potencialidad de ahorrar espacios que en otro momento deberían ocupar varios íconos sobretodo en componentes que requieren si o si la participación del visitante como puede ser un reproductor de audio o video.
Hay una guía en el sitio de la librería que paso a paso nos va mostrando como realizar estas animaciones y pueden visitarla en Getting Started. También en este sitio encontrarán toda la documentación necesaria para implementar sus propias ideas, algunas demos muy interesantes, y por último hay un excelente tutorial elaborado por Codrops en el que se puede ver no solo el proceso de creación con cada uno de los archivos, etiquetas, propiedades y scripts que intervienen sino también una demo en la que podrán previsualizar algunas opciones que ofrece esta poderosa herramienta, el proyecto se denomina Animated SVG Icons.
Todo esto se encuentra en fase inicial por lo que la compatibilidad con los exploradores más antiguos deberá ser analizada a partir de la plataforma que están queriendo implementar, aún así a partir de lo que se puede leer, tiene amplio soporte incluso en IE6, por lo que una vez que terminemos con todo lo que deseamos realizar, es posible que tengamos que repasar la visualización desde otros navegadores para constatarlo.
Como siempre digo, estas cosas que recién surgen, son ideales para aquellos que no solo realizan trabajos para ser vistos a través de Internet por el usuario común, sino para redes especializadas o muestras en instalaciones en las que puede tenerse mucho más control sobre los soportes. De una u otra forma, personalmente creo que es hora de comenzar a hacer uso intensivo del formato .svg que tiene mucho potencial por donde se lo mire.
Descargar Galería: Snap.svg
Ver Tutorial: Animated SVG Icons | Demo | Codrops
