Chuck's Academy

SVG in HTML5

Animaciones en SVG (SMIL y CSS)

En este capítulo, exploraremos cómo animar elementos en SVG. Las animaciones en SVG permiten crear efectos visuales dinámicos que hacen que los gráficos sean más interactivos y atractivos. Veremos dos métodos principales para animar SVG: SMIL (Synchronized Multimedia Integration Language) y CSS.

Introducción a las Animaciones en SVG

SVG soporta animaciones a través de SMIL, una especificación que permite agregar efectos de movimiento y transición directamente en el archivo SVG. Además, es posible aplicar animaciones CSS para animar elementos específicos de SVG, lo que hace que el proceso sea más flexible y compatible con las hojas de estilo.

Animación con SMIL en SVG

SMIL permite animar atributos SVG utilizando elementos como <animate>, <animateTransform>, y <animateMotion>. Estos elementos pueden integrarse en el SVG para animar propiedades específicas de los elementos.

Ejemplo Básico de Animación con <animate>

El siguiente ejemplo utiliza el elemento <animate> para cambiar el color de relleno de un círculo de azul a rojo de forma cíclica:

html
"En este ejemplo SVG, aplicamos el elemento animate a un círculo, cambiando el color de relleno de azul a rojo en un ciclo de dos segundos que se repite indefinidamente."

Aquí, el atributo attributeName="fill" indica que queremos animar el color de relleno del círculo. from="blue" y to="red" definen los colores inicial y final, dur="2s" establece la duración de la animación, y repeatCount="indefinite" hace que la animación se repita indefinidamente.

Uso de <animateTransform> para Transformaciones Animadas

El elemento <animateTransform> se utiliza para animar transformaciones, como translate, scale, rotate y skew.

html
"Este código usa animateTransform para rotar un rectángulo en SVG. La rotación completa 360 grados alrededor del punto central 35, 35 en un ciclo de tres segundos y se repite indefinidamente."

En este ejemplo, type="rotate" especifica que se trata de una rotación. La animación comienza en 0 grados y rota hasta 360 grados en torno al punto (35, 35), repitiéndose indefinidamente.

Movimiento con <animateMotion>

El elemento <animateMotion> permite mover elementos a lo largo de una ruta especificada.

html
"Este ejemplo usa animateMotion para mover un círculo a lo largo de un camino. El círculo sigue la ruta definida en el elemento path con un ciclo de cuatro segundos que se repite indefinidamente."

En este caso, el círculo sigue la trayectoria definida en el <path id="path1">. La animación se repite indefinidamente a lo largo del camino.

Animación de SVG con CSS

Otra forma de animar SVG es utilizando CSS. Esto permite aplicar transiciones y animaciones CSS a los elementos SVG, aunque algunas propiedades son limitadas en comparación con SMIL.

Ejemplo de Animación CSS con @keyframes

En este ejemplo, usaremos @keyframes para hacer que un círculo cambie de tamaño repetidamente:

html
"Aquí aplicamos una animación CSS a un círculo SVG usando la regla keyframes. La animación hace que el radio del círculo cambie entre 10 y 20 píxeles en un ciclo de dos segundos que se repite indefinidamente."

La clase .circle en CSS aplica la animación pulse, la cual modifica el radio del círculo para que aumente y disminuya en un bucle continuo.

Ventajas y Limitaciones de SMIL vs. CSS

  • SMIL: Ofrece una mayor gama de opciones de animación y es más flexible para animaciones complejas, como movimiento a lo largo de rutas o transformaciones detalladas.
  • CSS: Es más fácil de integrar con estilos existentes y ofrece animaciones simples, aunque tiene limitaciones en términos de propiedades animables en SVG.

Conclusión

Las animaciones en SVG ofrecen múltiples opciones para hacer gráficos más atractivos e interactivos. Con SMIL y CSS, podemos mover, transformar y cambiar atributos visuales de los elementos SVG, creando una variedad de efectos animados. En el próximo capítulo, aprenderemos a agregar interactividad a SVG con JavaScript, lo que nos permitirá controlar las animaciones en respuesta a las acciones del usuario.

¡Nos vemos en el próximo capítulo!


Ask me anything