WEB Signal 405
SMIL timing charts plan SVG animations that work inside img tags without JavaScript
Smashing Magazine outlines how timing charts can manage SMIL SVG animations, which work inside <img> tags without JavaScript but bloat quickly because each tag targets only one element and one property at a time.
SMIL remains one of the few ways to fully animate SVGs loaded via <img> tags, where JavaScript is blocked and some attributes like viewBox lack CSS equivalents. The timing-chart approach and syncbase synchronization help manage SMIL's verbosity, making complex multi-element animations more tractable.
Written by elseif from the cluster below · every claim links back to a sourceThe three things worth knowing
SMIL animations run inside <img> tags and can animate SVG properties that lack CSS counterparts, unlike JavaScript which is blocked in that context.
Each SMIL tag targets a single element and a single property, so multi-element animations grow verbose quickly compared to CSS equivalents.
Timing charts visualize start and end times of component animations, and syncbase values let one animation begin relative to another's .begin or .end with an optional offset.
THE CLUSTER