Diseño

SMIL con timing charts: técnica para animar SVG sin JavaScript

SMIL es una alternativa frecuentemente ignorada frente a CSS y JavaScript para animar SVG, con una ventaja concreta: funciona en contextos donde el JS está bloqueado, como imágenes embebidas con la etiqueta img. La limitación principal es su verbosidad, cada etiqueta solo puede animar un atributo de un elemento, lo que hace que proyectos con múltiples propiedades animadas crezcan rápidamente en complejidad. El artículo propone los timing charts como herramienta de diseño previo: diagramas de segmentos que mapean cuándo empieza y termina cada animación componente, análogos a los timelines de software de animación. Los valores syncbase permiten encadenar animaciones usando referencias como colorChange.end - 300ms, haciendo el código más legible y resistente a cambios de duración. La técnica tiene soporte cruzado en navegadores para propiedades de geometría SVG desde 2024, y cubre atributos como viewBox que aún no tienen equivalente CSS.