The issue of the SVG Comic Bifter contains some SMIL animation commands inside the SVG file.
If you view the comic via Chrome or Safari you’ll notice a frame-by-frame animation of a Mortal Kombat combatant.
If however, you’re using an alternative browser instead, then you’re missing out on this…
I’m now going to show you how this was achieved.
In this quick example we’ll be creating a three frame animation that will loop indefinitely. The following three shapes will be hidden and revealed at specific points in our timeline.
If we were to construct our SVG file without any animations, then each shape would stack on top of one another.
To achieve the frame-by-frame animation we use the
<animate> element, which can animate a single attribute or property over time. For our example it needs to be placed inside each one of our shapes.
<animate> element comes equipped with various attributes (which you can read more about in the SVG spec) but for our example we’re going to concentrate on just the following…
Our example requires us to hide and reveal each shape when necessary. To do this we need to instruct it to alter each shape’s respective
These are specific values related to the
displayproperty. In this instance we’re asking it to show the square at the beginning and then hide it again for the remainder of the animation. In contrast our circle (which has a value of
none;inline;none;none) will be hidden during the first frame, before appearing for frame two, only to disappear again for the remainder of the animation.
Apart from the
idattribute this is the only setting in our example that needs to differ for each shape.
This is a list of time values, which is used to control the pacing of the animation. I’ve split the values into intervals of 0.33 because I want a consistent time delay for each frame. Each time in the list corresponds to a value in the
valuesattribute list, and defines when the value should be used in the animation. There must be exactly as many values in the
keyTimeslist as in the
valueslist. Each time value must be specified as a floating point between 0 and 1 (inclusive).
In our example we need to state four values (even though we only have three frames of animation) because we want it to loop indefinitely (and thus any display value attributed to the
keyTimesvalue of 1 would be ignored by the
keyTimesvalue of 0 for the proceeding animation loop).
In effect the fourth value inside the
valuesattribute is redundant, and thus all three shapes have it set to
Here we can state how long our animation will last before looping.
This sets the start time of our animation.
States how many animation loops we require. This can be replaced with a number for a more specific loop count.
Below is our finished animation.
It’s worth noting that I could have gone about this process in other ways, as there are many more attributes available for the
<animate> element that I haven’t touched on yet. So if you’re interested in some further reading then I recommend going through the SVG spec.