O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Applying SVG Animation to SVG Static Elements

Before you go on to look in detail at the animation elements in SVG, look at how an animation can be added to a simple SVG shape.

Typically, if you have a simple graphical shape with no content, you express it as an empty element:

<rect x="100" y="100" width="10px" height="100px" 
style="stroke:red; fill:rgb(0,0,0)"/> 

However, when you want to add an animation to it, you need to nest the SVG animation element between the start tag and end tag of the element representing the graphical shape, like this:

<rect x="100" y="100" width="10px" height="100px" 
style="stroke:red; 
fill:rgb(0,0,0)"> 
<!-- The animation element goes in here. --> 
</rect> 

If you want to have an animation that changes both the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required