A continuación, enlistamos algunas de las bibliotecas JavaScript para animar SVG con el objetivo de que los gráficos se vean en la pantalla con una buena calidad.
¿Qué es SVG?
SVG es un gráfico independiente de la resolución, lo que significa que se verá bien en cualquier tipo de pantalla sin perder calidad, además tiene la capacidad de que SVG pueda tener algunos efectos de animación.
En este texto, compartiremos algunas bibliotecas de JavaScript que ayudan a extender la animación SVG y llevarla al siguiente nivel.
Vivus
Vivus es una biblioteca de JavaScript que le da a SVG la apariencia de estar dibujado, funciona de inmediato sin necesidad de dependencias como jQuery. Tiene diversas animaciones disponibles, así como la opción de crear un script personalizado para dibujar el SVG de la forma deseada.
Para hacerlo hay que incluir el archivo.js en su HTML y designar el elemento SVG que se desea animar, junto con algunas opciones preestablecidas para comenzar el proceso.
Por ejemplo:
1
new Vivus( ‘svg-element’, { type: ‘oneByOne’, duration: 200 });
Con esto, animará el elemento SVG que tiene svg-elementID.
Velocity
Se trata de un motor de animación con la misma API que $ .animate () de jQuery, funciona con y sin jQuery. Es rápido y presenta animación en color, transformaciones, bucles, aceleraciones, compatibilidad con SVG y desplazamiento. Tiene buenas transiciones de jQuery y CSS combinadas.
Aunque Velocity funciona junto con jQuery, utiliza su propia pila de animación que ofrece rendimiento a través de dos principios: 1) sincronizar la pila DOM → interpolación para minimizar la alteración del diseño y 2) valores de caché para minimizar las consultas DOM.
Snap
La biblioteca de JavaScript Snap.svg hace que trabajar con los activos SVG sea tan fácil como jQuery trabaja con DOM.
Snap.svg está diseñado para navegadores modernos y, por lo tanto, admite las funciones SVG recientes, como enmascaramiento, recorte, patrones, degradados completos, grupos y más.
Está disponible bajo una licencia de Apache 2, lo que significa que es completamente de código abierto y completamente gratuito.
SVG.js
Es una biblioteca ligera para manipular y animar SVG. Una de sus ventajas es que no tiene dependencias y tiene como objetivo ser lo más pequeño posible al mismo tiempo que proporciona una cobertura casi completa de la especificación SVG.
SVG.js es rápido, no es tan rápido como vanilla js, pero muchas veces más rápido que la competencia, además también puede aplicar complementos adicionales para agregar funcionalidades.
Leíste: Bibliotecas JavaScript para animar SVG, te recomendamos: Bibliotecas de JavaScript para crear mapas interactivos
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode
