7 librerías de Javascript para animar SVG

Los SVG son gráficos de resolución independiente. Esto quiere decir que lucen bien en cualquier tipo de pantalla sin perder calidad alguna. Al margen de esto, puedes darles vida con ciertos efectos de animación. En esta ocasión te mostraremos unas cuantas librerías de Javascript con las cuales podrás crear auténticas maravillas animadas con tus SVG.

Vivus

Vivus es una librería de Javascript para crear animaciones con tus archivos SVG como si estuviesen dibujando en ese mismo instante en el que se muestran por pantalla. Vivus funciona out of the box sin necesitar dependencia alguna (como por ejemplo, jQuery). Simplemente tienes que incluir el archivo .js en tu HTML, y referenciar al elemento SVG que quieras animar. Por supuesto, la librería cuenta con unas cuantas opciones las cuales podrás configurar en la llamada.

Por ejemplo:

new Vivus( 'svg-element', { type: 'oneByOne', duration: 200 });

Este código animará mi gráfico SVG, cuyo ID es svg-element. La duración de la animación será de 200 milisegundos. Cada elemento de este SVG se dibujará uno tras otro dentro de ese marco de tiempo.

Bonsai

Bonsai es una potente librería de Javascript que te permite dibujar, transformar, así como animar elementos gráficos de tus páginas web. Soporta tanto los canvas de HTML5, como los elementos gráficos SVG. Con Bonsai, puedes crear desde un simple rectángulo o un círculo o si quieres, hasta un juego tan currado como el Pong o el Arkanoid. Puedes usar Orbit para ver cómo funciona Bonsai, o echar un vistazo a los impresionantes ejemplos que hay en su web oficial para inspirarte.

Velocity

Velocity es una librería de Javascript para crear animaciones de forma rápida y sencilla. La velocidad de renderizado de Velocity a la hora de crear animaciones es increíblemente rápida. Supera a jQuery e incluso a CSS, si las comparamos. La API de Velocity funciona de forma similar a las animaciones de jQuery, excepto por que utiliza la palabra clave $.velocity() en lugar de $.animate(). Aparte de eso, puedes utilizar la misma sintaxis a la hora de animar. Es decir, puedes utilizar fadeIn o fadeOut, por ejemplo...

Raphael

Rapahel es una librería que te permite dibujar y animar gráficos SVG en páginas web. Es compatible con una amplia gama de navegadores, lo que hace de Raphael la librería más fiable de esta temática. Con RaphaelJS puedes crear gráficos analíticos interactivos, mapas del mundo e interacciones y estadísticas de juegos como el LOL o el Counter Strike.

Snap

SnapSVG es otra librería de Javascript muy conocida para animar SVG creada por el desarrollador de Raphael, Dmitry Baranovskiy, junto al Adobe Web Platform Team desde cero. Sin embargo, a diferencia de Rapahel, SnapSVG solo funciona con los navegadores más modernos. Eso hace que la librería sea infinitesimalmente más pequeña que Raphael y que soporte funciones con los SVG como el recorte o el enmascaramiento.

Lazy Line Painter

Lazy Line Painter es un plugin de jQuery para animar SVG del rollo a Vivus. Es decir, para que parezca que se está dibujando en el mismo momento en que se muestra el elemento gráfico. Lo malo es que este plugin solo hace simplemente eso. Por lo tanto, al importar elementos SVG desde aplicaciones como Illustrator o Inkscape, asegúrate de que el SVG no cuenta con colores de relleno, solo las rutas.

SVG.js

SVG.js es una librería muy ligera para manipular y animar SVG. Con esta librería, podrás animar el tamaño, la posición o el color de tus elementos SVG. Pero es que no solo anima, también cuenta con plugins para agregar funcionalidades específicas. Este ejemplo utiliza el plugin svg.filter.js para aplicar filtros a la imagen como el desenfoque gaussiano, contraste, sepia, etc.

Fuente: hongkiat.com