Creando animaciones con path de SVG
El estándar SVG lleva con nosotros desde el año 1999, y aunque ya han pasado muchas primaveras desde su lanzamiento, actualmente sigue siendo uno de los formatos más utilizados debido a las funciones que nos aportan. Son muchas sus ventajas (aunque también hay algunas desventajas) respecto a trabajar con imágenes de mapa de bits, pero la que más nos interesa hoy es la posibilidad de poder crear animaciones para aplicar en nuestros proyectos web. En esta entrada nos centraremos en algunas de las animaciones que se pueden realizar utilizando el elemento <path> de SVG.
Entendiendo la propiedad <path>
Para entender el funcionamiento del elemento <path> de SVG, nos basta con mirar la definición que nos ofrece la MDN:
“El elemento <path> es un elemento SVG genérico con el que se puede definir una forma mediante un conjunto de puntos. Todas las formas básicas de SVG se pueden crear con un elemento path”.
Por lo tanto, podemos decir que el elemento <path> es un conjunto de puntos que, una vez unidos entre ellos, permiten crear cualquier forma básica de SVG y otras de más complejas. Eso quiere decir que podemos dibujar cualquier elemento básico de SVG (como por ejemplo un círculo) mediante un path. En el siguiente ejemplo podemos verlo aplicado:
Pese a que los dos elementos son visualmente idénticos, en el caso de dibujar el círculo con la etiqueta <path> ha sido necesario definir el conjunto de puntos que forman el dibujo. Este conjunto de puntos se define mediante el atributo ‘d’ que puede tomar diversos valores.
La capacidad de poder ‘dibujar’ los puntos del SVG nos permitirá construir dinámicamente el dibujo y, con ello, crear animaciones como las que veremos más adelante.
Preparación y Optimización de los SVG
Una de las condiciones más importantes antes de aplicar cualquier animación sobre un SVG es disponer del archivo correctamente exportado. Muchos de los editores más utilizados acostumbran a exportar los SVG de forma incorrecta para poder aplicarles una animación.
Es importante destacar que todos los dibujos que queramos animar deben estar compuestos de elementos de tipo <path>, ya que en caso contrario no podremos ‘dibujar’ dinámicamente los puntos de la forma.
En el caso de que exportemos nuestro dibujo con Illustrator, será necesario utilizar la función ‘Make Compound Path’ (CMD+8 en Mac, CTRL+8 en Windows) para transformar nuestro SVG en un conjunto de elementos <path>:
En el caso de trabajar con Sketch, utilizaremos la función ‘Convert to Outlines’ (Shift+CMD+O) que realizará la misma función que en el caso anterior:
También es muy recomendable, en Sketch, utilizar el plugin SVGO Compressor ya que con ello conseguiremos que los SVG’s exportados sean mucho más limpios y con un tamaño inferior. En el caso de utilizar cualquier otro software, también podemos utilizar la herramienta online SVGOMG para la ‘limpieza’ y optimización de los archivos.
Podemos comprobar si el archivo SVG se ha exportado correctamente abriéndolo con un editor de texto. En el código resultante deberemos comprobar que únicamente aparezcan elementos de tipo <path> tal y como puede verse en la siguiente imagen:
Pasando a la acción
En esta entrada, queremos enseñar tres sencillos ejemplos que, aún siendo sencillos y fáciles de implementar, pueden dar un toque de dinamismo cuando los incorporemos en nuestros proyectos.
Vivus
El primer ejemplo es mediante la utilización de la librería Vivus. Una de las características más relevantes de esta librería es que las animaciones se ejecutan en el momento en que el dibujo aparece por pantalla (viewport), por lo que no deberemos lanzar cada animación de forma manual ni controlar su ejecución.
Para animar los SVG con Vivus, únicamente debemos importar la librería en nuestro documento HTML y utilizarla tal y como se muestra en el siguiente ejemplo:
Si queremos indagar entre todas las opciones que nos proporciona la librería, podemos utilizar la herramienta Vivus Instant que nos permitirá configurar nuestra animación. Únicamente necesitaremos subir nuestro SVG a la plataforma y una vez seleccionados los parámetros, se nos proporcionará el código para incrustarlo en nuestro site.
Animaciones ‘on scroll’
Otra de las formas interesantes de animar nuestro SVG es mediante el evento ‘scroll’. En esta entrada de CSS-TRICKS se explica detalladamente la técnica en cuestión, aunque a grandes rasgos consiste en calcular la longitud total del path, y dibujarlo de forma dinámica a medida que avanza la posición del scroll. Para conseguirlo, necesitamos mantener el elemento a animar siempre en posicionamiento ‘fixed’.
Utilizando animateMotion
Por último, otra forma simple de animar un SVG es utilizando la propiedad animateMotion con la que pondremos en movimiento un elemento SVG alrededor de un path. Únicamente deberemos situar la etiqueta <animateMotion> junto al path que queramos recorrer:
Tal y como hemos podido ver, existen diferentes formas de animar SVG’s de forma sencilla. En esta entrada hemos querido destacar tres que nos pueden ayudar a dar un toque animado en alguna parte de nuestro site sin dedicarle mucho tiempo. Aún así, cabe destacar que existen herramientas mucho más potentes y complejas como GSAP o Mo.js con las que se consiguen unos resultados espectaculares.
