Los diseños web están de moda en estos días y no hay límite para las animaciones con SVG y CSS. Conocer conceptos básicos de animación te ayudará a desarrollar diseños más complejos.
El formato SVG es excelente para la animación en la web porque sus imágenes son escalables y no dependen de la resolución, a diferencia de lo que ocurre con JPG y PNG. También son fáciles de diseñar porque puedes usar CSS, filtros e interactividad para mejorar el SVG. Veamos como puedes crear animaciones con SVG y CSS para tu sitio web.
Conceptos básicos de SVG
SVG (Scalable Vector Graphics) es un formato basado en XML para describir cómo debería aparecer la imagen. Si abres un archivo SVG con un editor de código, verás que lo único que hay es un archivo de texto con código XML dentro. La razón por la cual los archivos SVG se pueden escalar a diferentes tamaños sin perder calidad es porque el texto se utiliza para describir el gráfico.
La información visual en un archivo SVG se calcula y representa en el navegador. No son archivos tan complejos como los JPG u otros formatos de archivo de imagen, lo que te permite diseñarlos y editarlos manualmente en un editor de texto. Se pueden modificar y diseñar con CSS, lo que los hace estupendos para el diseño web.
Cómo crear un gráfico SVG
Adobe Illustrator es el programa que suelo utilizar para crear archivos SVG (cuando he tenido que hacerlo). En realidad, puedes crear un SVG desde cero ya que es todo XML, pero probablemente sea más fácil usar un programa de diseño (especialmente para SVG’s más complejos).
Consejos al diseñar en Adobe Illustrator
Al igual que con cualquier otro proyecto de Adobe Illustrator, el cuadro delimitador es donde se crea la ilustración, por lo que es importante que te asegures de que todo esté dentro de él. La mejor forma de hacerlo es seleccionando la ilustración que deseas tener en el SVG y luego ir a Objeto > Mesas de trabajo > Encajar en límites de ilustración.
Si no realizas este paso, la imagen se verá muy pequeña en la web debido al espacio en blanco adicional.
Puede que no sea lo más divertido cuando realizas un diseño, pero ser consciente y coherente con el nombre de las capas te ayudará cuando realices trabajos de animación. Nombres como «Capa 1», «Capa 2»,… dificultarán que recuerdes qué capas contenían qué parte del gráfico. Debes saber que Illustrator utilizará estos nombres para generar los identificadores en el código SVG.
También es importante que estructures todo por grupos de capas, ya que se utilizan para crear grupos en archivos SVG. Cuando trabajes con grupos de capas, te recomiendo que te asegures de que contengan solo formas relacionadas, para mantener el archivo limpio y fácil de editar.
Ejecutar el archivo SVG a través de un optimizador CSS es útil. Hay una gran posibilidad de reducir el tamaño del archivo haciendo esto. Para ello te recomiendo herramientas como SVG Optimizer o SVG OMG.
Exportar un SVG con Adobe Illustrator
Ahora que tienes tu imagen SVG, necesitas exportarla para utilizarla en la web. Para ello, diríjete a Archivo > Guardar como > SVG. También puedes ir a Archivo > Exportar > SVG, dependiendo de la versión de Illustrator que estés utilizando.
Una vez que hagas esto, encontrarás un cuadro de diálogo con algunas opciones (si no las ves todas, dale a «Más opciones»):
- Perfil: SVG 1.1
- Texto: Controla cómo quieres manejar cualquier fuente en el diseño e incorporarlas como SVG.
- Subconjunto: Permite que el archivo SVG muestre fuentes que pueden no estar instaladas en el sistema del usuario.
- Ubicación de la imagen: Controla la información que se puede almacenar para los datos de imagen rasterizada dentro del archivo SVG como una URI de datos con la opción «Incrustar».
- Propiedades CSS: Los atributos de presentación permiten que los estilos CSS se coloquen directamente en el SVG si es necesario. Dependiendo de cada caso de uso, esto puede ser o no ser óptimo. Los atributos de presentación generalmente son más fáciles de sobrescribir en CSS.
- Más opciones: Este grupo de casillas de verificación te permite cambiar una variedad de configuraciones, incluyendo la cantidad de lugares decimales a los que va en los distintos números. Las opciones avanzadas son principalmente necesarias si hay mucho texto involucrado en el archivo. La opción de generar menos elementos TSPAN puede reducir drásticamente el tamaño del SVG.
Existen más opciones, pero te animo a que vayas experimentando por ti mismo y vayas descubriendo qué hace cada una de ellas.
Cómo crear animaciones con SVG y CSS
Por fin llegamos al meollo del artículo. Ahora que ya tienes un SVG con el que trabajar, puedes crear una animación simple para ver cómo funciona todo esto. Animar con CSS es increíble porque no hay plugins o bibliotecas que deban instalarse. Todo lo que necesitas es HTML y, como no, CSS.
Los archivos SVG se pueden animar de la misma manera que los elementos HTML, mediante el uso de fotogramas clave CSS y propiedades de animación o mediante el uso de transiciones CSS. Las animaciones más complejas generalmente tienen algún tipo de transformación aplicada: una traducción, rotación, escalado o sesgo.
Animación básica
La siguiente animación es muy simple. Lo que hace es que al pasar el ratón por encima de la pantalla, la rueda aumente de tamaño:
See the Pen Extended Wheel by Juan Manuel Civico Cabrera (@juanmacivico87) on CodePen.
Rueda girando
Aquí es donde el arduo trabajo en Adobe Illustrator vale la pena. El esfuerzo de nombrar de forma efectiva las capas del SVG tendrá un buen uso. Con los grupos de capas externas e internas, la animación se puede controlar y personalizar, lo que supone una gran ventaja.
La rueda SVG funcionará como un gráfico de carga de giro. La rueda irá girando, mientras que a su vez, la parte del neumático va cambiando de color.
Los elementos SVG son bastante predecibles, en su mayor parte, aunque hay algunas cosas que al intentar cuadrarlas se pueden volver un poco más complicadas. Una cosa a tener en cuenta es que no siguen el modelo de cajas, es decir, margen, borde, relleno, etc. Esto hace que posicionar y transformar estos elementos sea un poco más difícil.
Primero, debes configurar los keyframes de rotación (en este caso @keyframes spin y @keyframes FadeIn). Como se trata de un gráfico giratorio, es necesario realizar una rotación completa. También se aplicará un efecto de fundido de entrada también.
A continuación, es importante crear un contenedor SVG (.svg-container).
Se crearán estilos SVG generales y aquí es donde se especifica el origen de la transformación (etiqueta SVG).
Aquí es donde el nombre de la capa se vuelve útil. La animación de giro se aplica a todo el gráfico SVG porque se especificó en #wheel, pero el neumático tiene un efecto de desvanecimiento que solo está destinado a esa parte del gráfico. Al orientar solo a #tyre, se aplica el fundido en la animación.
See the Pen Spinning Wheel by Juan Manuel Civico Cabrera (@juanmacivico87) on CodePen.
Espero que esto te sirva como introducción a los SVG y las técnicas básicas de animación con CSS. A medida que los uses más, estas ideas básicas te ayudarán a crear animaciones más complejas.
Para ampliar más información acerca de CSS, te recomiendo que leas los siguientes artículos del blog: