Summary

---

 Download CD Content

Overview

The concepts in this chapter extend the knowledge that you gained in the previous chapter, so if you are unfamiliar with the SVG DOM, now would be a good time to read (or at least skim) the contents of the previous chapter. At this point, you have seen many examples of defining SVG 'primitives' and techniques for combining them in order to produce interesting and colorful graphics images. Hopefully, you feel comfortable with the built-in animation techniques available in SVG that allow you to manipulate various attributes (e.g., width, height, radius, etc). However, attributes of some SVG elements, such as the points attribute of the SVG path element, are more easily modified via ECMAScript functions. The examples in the first part of this chapter will demonstrate how to make such modifications. Once you get a reference to an SVG element, it's easy to change the attributes of that element.

One very important aspect of SVG, particularly with regard to animation, is the ability to dynamically create new SVG elements. Creating such elements on the fly is actually quite straightforward; however, the dynamic generation of tens of thousands of SVG elements will obviously affect both memory and performance. Although the concepts and techniques in this chapter might seem simple (or perhaps even trivial), they provide you with a knowledge base for developing more sophisticated SVG animation that can be handled via ECMAScript functions. As you'll see in Chapter 14, ECMAScript functions allow you not only to compute values of trigonometric functions (e.g., sine, cosine, tangent, and combinations thereof) and mathematical functions, but also give you the ability to make recursive function calls. All code and images for this chapter can be found on the companion CD-ROM in the Chapter 12 folder.

---