SVG es una excelente idea si lo que buscamos es crear gráficas interactivas que se escalen perfectamente a cualquier resolución sin perder calidad.
Con la aparición del diseño adaptable cada día surgen nuevos desafíos, uno de ellos es el de lograr compatibilizar un diseño con los distintos tamaños y resoluciones de pantalla, es ahí donde SVG se vuelve una solución que cobra especial importancia.
Una de las principales limitaciones a la hora de emplear un archivo SVG es la relacionada a la compatibilidad con los navegadores más antiguos, suerte para nosotros esto es cada vez menos frecuente, sin embargo y si nuestros visitantes llegan a nosotros utilizando navegadores obsoletos, debemos contemplar esta posibilidad, para ello existen algunos recursos interesantes que decidí agregar al listado para que puedan solucionar este inconveniente.
El listado que les propongo contiene bibliotecas JavaScript para poder crear animaciones, transformar, convertir y hasta exportar gráficas en formato SVG. Mediante su utilización podrán emplear este magnifico recurso en sus próximos proyectos sin ningún tipo de contratiempo.
1. Walkway. Una magnifica biblioteca escrita con JavaScript para animar gráficos SVG. La particularidad de este recurso es que permite generar animaciones del tipo “recorrido”, es decir, van descubriendo los distintos trazos de manera progresiva, logrando un muy bonito efecto.
Como principal ventaja de esta biblioteca podemos destacar su facilidad de uso. Apenas unas muy pocas lineas de código son necesarias para generar las animaciones.
2. AnimatedSVGIcons. Una pequeña biblioteca y tutorial para la creación de iconos SVG animados, este recurso en particular resulta de suma utilidad para aquellos que buscan crear sus propios iconos animados empleando archivos SVG.
3. jQuery SVG plugin. Un plugin jQuery para la creación y manipulación de elementos SVG. Funciona en todos los navegadores modernos, si hablamos de Internet Explorer, es compatible desde su versión 9.
Este plugin permite crear elementos SVG, animarlos, aplicarles clases CSS, etc. Además permite integrar otras bibliotecas para expandir sus funcionalidades.
4. svg.js. Una biblioteca JavaScript ultraliviana. Tiene varias ventajas importantes, por ejemplo: no tiene dependencias y se encuentra liberada bajo licencia MIT, garantizando su libre utilización en proyectos comerciales y personales.
A diferencia de otras alternativas para animar elementos SVG, esta en particular cuenta con una extensa y nutrida documentación, además de varios ejemplos lo que ayuda su perfecta compresión.
Otro aspecto importante es que cuenta con una serie de mecanismos para comprobar el soporte de elementos SVG por parte del navegador, un aspecto importante si nuestro proyecto es visitado por personas con navegadores antiguos.
5. svg-swap. Este plugin jQuery sirve para cuando el navegador no soporta elementos SVG, la solución propuesta es reemplazar el elemento SVG por una imagen. Especialmente útil cuando queremos solventar problemas con versiones obsoletas de Internet Explorer.
6. Snap.svg. Estupenda biblioteca para la creación y manipulación de contenido en formato SVG.
Esta biblioteca es, probablemente, la más completa en lo que refiere a manipular un elemento SVG, cuenta con un soporte extenso en lo que se refiere a compatibilidad con los distintos navegadores y funciona tanto con jQuery como Zepto.
Snap es 100% libre y 100% open source.
La documentación de este proyecto es fantástica, hasta tiene un simulador para aprender a emplearla sin demasiadas complicaciones.
Si deciden intentar emplear este proyecto les recomiendo la sección demo para encontrar varios ejemplos de uso, además de disfrutar las muy buenas animaciones desarrolladas por el equipo detrás de este proyecto.
7. svg.filter.js. Agrega filtros a tus elementos SVG de la forma más rápida y sencilla. Este plugin jQuery hace eso, brinda la funcionalidad de filtros creativos a nuestros elementos en formato SVG.
Los efectos para nuestras imágenes abundan, pueden encontrar: desenfoque, contraste, saturación, desenfoque horizontal, rotaciones, invertir, oscurecer y muchos efectos visuales más.
8. svgToPdf.js. Si necesitamos convertir un SVG a PDF, esta es la opción indicada.
La capacidad de este proyecto permite convertir texto, lineas, rectángulos, elipses y principalmente grupos de estos elementos.
Su uso es sencillo y apenas tiene dos dependencias: jQuery y jsPDF.
9. climacons. Una serie de 75 iconos distintos del clima. Esto que si bien es solamente un recurso temático puede ayudarnos a comprender como funcionan los iconos animados en formato SVG.
10. Export-svg. Un Script para Adobe Illustrator para exportar nuestros .AI en formato SVG. En mi caso siempre utilice InkScape para trabajar con archivos SVG, sin embargo estoy seguro que Illustrator es uno de los programas preferidos por muchísimos diseñadores por lo que tener una herramienta para exportar sus documentos en formato SVG resultará de suma utilidad.
¿Falta alguno? 😀
