Aunque animar SVG con CSS puede ser más cómodo para la persona promedio de front-end, SVG tiene otra forma de hacer la animación incorporada en la sintaxis de SVG. Esto es exactamente lo que cubrimos brevemente en este video, pero si desea una guía de referencia completa, definitivamente consulte A Guide to SVG Animations (SMIL) de Sara Soueidan aquí en CSS-Tricks.
SMIL son las siglas de Synchronized Multimedia Integration Language. Según tengo entendido, eso es una "cosa" en sí misma que está integrada en SVG. Pero SVG tiene algunas de sus propias adiciones similares a SMIL. Me referiré a todo esto como SMIL aunque estoy seguro de que a veces soy técnicamente incorrecto.
Para animaciones muy simples, no importa mucho si lo haces en SMIL o CSS, hará lo mismo con aproximadamente el mismo nivel de dificultad. Algunas cosas pueden ser incluso más fáciles en CSS. Pero aquí hay algunas cosas en las que SMIL es el camino a seguir:
- Necesitas animar algo que CSS no pueda tocar. Como la forma de un polígono o un camino.
- Que desea utilizar eventos para afectar a la animación, como un
clickomouseovero algo así. - Quieres hacer animaciones aditivas, como, animar desde donde estés ahora otros x píxeles.
- Desea tener animaciones que se relacionen directamente con otras animaciones, por ejemplo, cuando esta animación termine, inicie la próxima animación (sin manipular manualmente las duraciones).
- Seguro que hay más.
La sintaxis se siente intimidante al principio, pero es realmente bastante fácil, lo prometo. Aquí tienes un ejemplo básico:
Vea el Pen jAipI de Chris Coyier (@chriscoyier) en CodePen.
La cuestión de la "transformación de forma" es realmente única con SMIL, así que aquí hay un ejemplo mejor que el extraño que hicimos en el video:
Vea el botón Morph Shape de la pluma de Chris Coyier (@chriscoyier) en CodePen.
En esa demostración, los eventos son manejados por JavaScript en lugar de SMIL. Es bueno saber que tú también puedes hacer eso. Los desencadenadores de eventos SMIL son geniales, pero lo que necesita hacer clic debe estar en ese SVG en lugar de en cualquier otro lugar del DOM.