(click anywhere to close)

[SVG] Scripting & Animation

category: Website | course: SVG | difficulty:

Finally, the last chapter will fulfil the promise of dynamic graphics I made at the beginning. Because SVG seamlessly integrates with HTML and CSS, we can just use JavaScript to attach any sort of script to elements. Even better, we can change/animate all attributes by means of the regular JavaScript notation for accessing attributes. For simple animations and transitions, we can use CSS as well – but, when things get complex, we’ll need to rely on some special SVG animation elements.


If you don’t know JavaScript, or have forgotten how it works, here’s a quick reminder.

By using document.getElementById(someID) we can access elements by their id attribute, which is what we’ve been using every time to assign names to elements.

Then, we can use the setAttribute(name, newValue) attribute on that element to set an attribute’s value, and getAttribute(name) to get the current value of a certain attribute.

var obj = document.getElementById("circly"); //Gets element with id "circly", which is a circle
obj.setAttribute(r,50); //Changes the circle's radius to 50

SVG Animation

CSS can do a lot for you in terms of animation, but its support for animations and transitions has to stop at some point, and that is when a few SVG-specific elements can step in. These are a bit more complex than simple CSS animations, but you get much more customizability in return. The four SVG animation elements are: <set>, <animate>, <animateTransform> and <animateMotion>.

There’s one thing these all have in common: they need to be placed within the element they have an effect on. So, for example, if you want to animate a circle shape, you place one of these animation elements as a child element within the circle element.

The set Element

Let’s start simple. To set the value of an attribute after a certain amount of time – which I like to call delayed attribute assignment – use this:

<set attributeType=”XML” attributeName=”someAttribute” to=”newValue” begin=”time” />

The first argument is required for all animations of SVG attributes, because they are based on XML (as I briefly discussed at the start of the course).

This element changes someAttribute to newValue, and does so after waiting time amount of time.

    <circle cx="40" cy="40" r="20">
        <!-- Wait for 5 seconds to see this change! -->
        <set attributeType="XML" attributeName="r" to="40" begin="5s" />

Time Units

SVG knows four units for time:











Regular Animations

We can extend this concept of changing attributes after a certain time, and instead gradually change an attribute over time. For this, the syntax is:

<animate attributeName=”attr” attributeType=”XML” from=”startVal” to=”targetVal” begin=”time” dur=”duration” repeatCount=”number”/>

This changes the attribute attr from startVal to targetVal, over the course of duration time. If you want, you can delay the start using the begin attribute. The repeatCount attribute determines how often the animation is repeated; a value of indefinite keeps the animation looping forever.

Additionally, the fill=”value attribute sets what to do when the animation is completed. The default value is fill, which resets the shape. The other value is freeze, which doesn’t do anything on completion.

    <circle cx="40" cy="40" r="20">
        <animate attributeType="XML" attributeName="cx" from="0" to="100" begin="0s" dur="10s" repeatCount="indefinite" />

Transform Animations

For some reason, to animate transforms we need another element. The syntax for this is:

<animateTransform attributeName=”transform” type=”transform” from=”startVals” to=”targetVals” begin=”time” dur=”duration” repeatCount=”number” />

The possible values for type are what you expect from CSS transforms: translate, rotate and scale. Because these need multiple values as input, you can separate values by whitespace in the from and to attribute.

    <rect x="40" y="40" width="20" height="20">
        <animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0 60 70" to="360 60 70" begin="0s" dur="5s" repeatCount="indefinite" />

Animations along Paths

To create an animation along a path, you’ll need

<animateMotion begin=”time” dur=”duration” repeatCount=”number” > <mpath xlink:href=”#thePath” /> </animateMotion>

Because these animations automatically influence the x and y position, you don’t need to set an attribute. They also automatically start at the beginning of the path, and finish at the end of the path.

Additionally, you can set an extra rotate=”auto” attribute to automatically rotate the shape to be oriented in the same direction as its current position on the motion path. You can also set this attribute to a specific value, to set the shape to a fixed amount of degrees.

	<path d="M20,40 L60,20 L120,80" id="somePath" stroke="green" fill="transparent"/>
    <rect x="0" y="0" width="20" height="20">
        <animateMotion begin="0s" dur="5s" repeatCount="indefinite">
            <mpath xlink:href="#somePath" />

Combining & Chaining Animations

To combine animations, which means executing them at the same time, you just need to include multiple animation elements within the same shape. With <animateTransform> elements, however, multiple animations cancel each other out. To prevent this, add an additive=”sum” attribute to all of those elements.

To chain animations, however, we need to know when a certain animation stops. To do so, we first assign a name to an animation with the id attribute (like we’re used to). Then, we use name.begin to get the time a certain animation begins, or name.end to get when the referenced animation ends. These just return values, which means we can also perform calculations with them to obtain the specific effect we want.

    <rect x="0" y="0" width="30" height="15">
        <animate id="one"
                 attributeName="x" attributeType="XML"
                 from="0" to="50"
                 begin="0s" dur="3s" fill="freeze"
                attributeName="y" attributeType="XML"
                from="0" to="50"
                begin="one.end" dur="3s" fill="freeze"
[SVG] Filters IIINo next post :(
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk