SVG Colors, Patterns & Gradients

Chapter 14. Motion Pictures

SVG colors, gradients, and patterns may be collectively referred to as paint, but there is one important difference from oils or watercolors: SVG paint can move.

SVG within a web browser is dynamic. It can be animated, either on a continuous loop or in response to user interactions.

Animation complicates the discussion of SVG painting properties and paint servers in a few ways. This chapter sums up the major issues and approaches to address them. It starts with a review of the different ways in which SVG can be animated, using animated fill colors as an example. It then addresses the animation of paint servers under two situations: synchronized animations of many painted elements, or animation of a single element without affecting others.

Screenshots have been included for the animation examples, but a full appreciation will require running the code in a web browser.

A complete discussion of SVG animation is worth several books on its own, so this chapter does not attempt to exhaustively describe all the options and syntax. Instead, it focuses on the aspects that are unique to working with colors and paint servers. If you’re not already comfortable with CSS, SMIL, and JavaScript animations, you may need to consult other references to fully understand how the code creates the final effect.

Animation Options

There are three different methods you can use to animate SVG graphics:

• Including animation elements within the markup (<animate>, <set>, <animateTransform> ...