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.
There are three different methods you can use to animate SVG graphics:
Including animation elements within the markup (