---
title: "Timing Charts: A Blueprint For SMIL Animations — Smashing Magazine"
url: https://daily.dev/posts/timing-charts-a-blueprint-for-smil-animations-smashing-magazine-c7gua0crz
source_url: https://smashingmagazine.com/2026/08/timing-charts-blueprint-smil-animations
type: article
source: "Smashing Magazine"
published: 2026-08-20T16:42:06.042Z
updated: 2026-08-20T16:42:31.578Z
tags: ["css", "svg", "web-animation"]
reading_time: 15
upvotes: 1
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Timing Charts: A Blueprint For SMIL Animations — Smashing Magazine

**[Smashing Magazine](https://daily.dev/sources/smashing)** · 15 min read · 1 upvotes · 0 comments

## Summary

A deep dive into SMIL (Synchronized Multimedia Integration Language), an often-overlooked way to animate SVGs that works inside <img> tags without JavaScript. Introduces the concept of a 'timing chart' as a planning tool for organizing multi-part SMIL animations, showing how syncbase values (like colorChange.end - 300ms) can synchronize animation timing between elements. Walks through building a three-dot loading spinner step by step, covering image approach choices for prefers-reduced-motion support, SVG graphics setup in Inkscape, and progressively more complex timing arrangements using fade-in/fade-out and clip-path movement animations.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://smashingmagazine.com/2026/08/timing-charts-blueprint-smil-animations>

## Questions this post answers

### How can I animate an SVG loaded with an img tag since JavaScript won't run inside it?

SVGs loaded via an img tag ignore embedded JavaScript, but CSS animations and SMIL animations both still run. SMIL (Synchronized Multimedia Integration Language) can fully animate every part of an SVG, including attributes without CSS equivalents like viewBox, entirely without JavaScript, using tags like animate and set inside the SVG markup.

_Developers building SVG-based UI animations can track SVG platform techniques like this on daily.dev._

### How do I synchronize the start time of one SMIL animation to when another one ends?

Use a syncbase value: set the begin attribute to the other animation's ID followed by .end or .begin, optionally with a positive or negative offset, such as begin="colorChange.end - 300ms". This makes the relative timing between animations explicit and lets a whole group of animations be re-timed just by changing when one primary animation starts.

_Anyone orchestrating multi-step SVG animations can compare SMIL timing approaches on daily.dev._

### Why does my SVG SMIL animation markup get so bloated compared to CSS keyframes?

Each SMIL animate or set tag can only target one element and one property at a time, unlike CSS keyframes which can list multiple properties together and be reused across elements. This means a color and opacity change on a single element already requires two separate animate tags, and the markup grows quickly as more elements and properties are added.

_Teams weighing SMIL against CSS for SVG animation can follow tradeoff discussions like this on daily.dev._

---

Tags: [#css](https://daily.dev/tags/css), [#svg](https://daily.dev/tags/svg), [#web-animation](https://daily.dev/tags/web-animation)

[View this post on daily.dev](https://daily.dev/posts/timing-charts-a-blueprint-for-smil-animations-smashing-magazine-c7gua0crz)