Building Web Applications with SVG - Cdn.oreilly.com

example 3: Simple Animation (Just 38 Lines of Markup
and No Script)
This example, visible at http://srufaculty.sru.edu/david.dailey/svg/ovaling.svg, has been cited by others
for the richness it achieves even with such simplicity. The example uses SMIL animation to simultaneously
vary 4 different attributes of 26 different objects. At the SVG Open 2010 conference in Paris,
one of Microsoft’s demonstrations showed that this particular example could be animated using one
of several SMIL emulators for SVG, although as of this writing, most browsers can run the animation
without additional assistance. Creating such a rich animation with other technologies, such as the
HTML5 tag or Java Applets, would take much more code, thought, experimentation, and
time to develop.
Here’s how it’s done:
■■ Drawing one petal of the flower An ellipse is drawn with a given centroid and differing
radii in the x and y directions. It is made slightly more transparent than opaque (the opacity
is set to 0.4). It is then filled with a gradient (in this case, a linear gradient moving from red to
blue and then through green to yellow).
■
■ Replicating the petal SVG allows considerable reuse of code. In this case, the initial petal is
reused four times through a series of elements, each of which applies a different rotation
to the petal. This creates a petal cluster, which itself is then grouped and reused 5 more
times, for a total of 25 petals being drawn with only 9 lines of markup.
CHAPTER 1 SVG Basics 9