Designing SVG Web Graphics

Basic Animations

One of the most visually attractive aspects of SVG is its potential for animation. Most parts of an SVG image can be animated—position onscreen, width, height, color, opacity, stop colors in a gradient, attributes of SVG filters. The visual effects are potentially legion. But before you get carried away or overwhelmed by the potential, look at how SVG animation is done.

SVG images can be animated by two methods: the use of declarative SVG elements (mostly using elements borrowed from SMIL Animation) or the use of ECMAScript (JavaScript) or another scripting language to manipulate the Document Object Model (DOM) of an SVG image. The two methods can be combined into one image.

This chapter focuses on declarative animation.

In ...