Animando tu web con SVG
En cada diseño, intentamos mostrar elementos diferenciadores y que llamen la atención del visitante en algún apartado del sitio creado.
Los SVG (gráficos vectoriales escalables) son una opción muy interesante que además de mejorar visualmente nuestro diseño, lo hacen con un impacto mínimo sobre los navegadores.
La pega es que no son tan sencillos de crear ni manejar a la hora del diseño, como pueden ser los tradicionales formatos de imagen.
Personalmente, he tenido que googlear mucho, para acabar comenzando a aprender gracias a un par de artículos y algunas webs que he ido encontrando por la experiencia.
Tendremos que acostumbrarnos a sus etiquetas (están basados en XML), a su propiedad viewbox donde añadir la ubicación y a su path, donde no sólo se “dibuja” nuestro diseño, sino donde podemos modificar aspectos como el color a través de las propiedades fill o stroke.
No voy a ahondar mucho en esa parte, pues todavía soy muy novato en ello (esto no pretende ser una biblia del SVG 😅), pero quiero mostraros sitios donde poder aprender a jugar con ellos, familiarizarnos con su sintaxis y luego aprender sobre sus animaciones.
Familiarízate con los SVG
El primer sitio que creo que deberías visitar es smooth donde puedes crear atractivas olas para incorporar a tus diseños y comprobar sus propiedades en el svg resultante.
Cuando tengas eso un poco claro, puedes dar un paso más en getwaves y en blobmaker donde creas formas de lo más diversas mientras sigues aprendiendo.
Os recomiendo visitarlos y probar cosas en ellos, porque estoy seguro, que lo acabaréis usando en vuestros proyectos.
Animando nuestros SVG
Ahora que ya vamos asimilando las bases de los SVG, pasamos a la animación.
La mayor parte de las animaciones que hagamos con nuestros SVG van a ser sencillas, por lo que en muchos casos, nos bastará con conocer las animaciones básicas en CSS a través de animate y sus propiedades:
Para animaciones más complejas como variaciones en las formas, CSS se queda bastante corto hasta donde he podido aprender, con herramientas descontinuadas y pasos adelante y atrás por parte de los navegadores por intentar adaptarse a ello, de los que seguro habréis leído bastante hasta la fecha.
Por tanto, si queremos dar un paso más, tenemos a nuestro infatigable JavaScript y varios frameworks que nos ayudarán:
Animejs es uno de ellos con muchos ejemplos y documentación más que decente. Para mí, son una referencia al respecto y por eso una imagen de su web, presenta este artículo.
Otra, es vivus donde podemos crear animaciones a modo de dibujo, muy atractivas y que en cuanto lo visitéis, os mantendrá haciendo pruebas un buen rato seguro.
Por último, tengo “deberes” con Snap Snapsvg, del que he leído muy buenos artículos y comentarios, pero acaba siendo de esas cosas que quedan en el cajón (quizás vosotros ya tengáis experiencia con este sitio y podáis darme más feedback).
Para acabar, quería dejaros una web con algunos de los ejemplos más chulos y que seguro habéis visto en más de un sitio web. Es la web de Javi Niguez y su artículo sobre animaciones en SVG.
Seguro os gustará.
Como siempre, espero que este artículo pueda servir de ayuda y apoyo para muchos de vosotros y, por supuesto, si tenéis otras fuentes o sitios de donde aprender a manejarnos con los SVG, estaré encantado de leeros!.
