SVG for Web Developers

Timing an Animation

It is said that timing is everything, but so far, all of the animations we've seen have had simple timing and have used only the begin and dur attributes to control timing. SVG has other timing attributes that are common to all animation elements. In this section, we'll take a look at some interesting things you can do with them.

SVG measures time in a variety of ways, according to what is specified. So far, values such as 6s (6 seconds) have been used to set time values. This is one way of calculating time, called timecount values. Timecount values use abbreviations to set time so that:

• 4.3h = 4.3 hours

• 30min = 30 minutes

• 6s = 6 seconds

• 4ms = 4 milliseconds

Theoretically, to make an animation last 2 hours, set it to 2h.

SVG ...