Motion Pictures

Chapter 14 gives some examples of animated paint servers and discusses the benefits and limitations of the different animation methods available in SVG.

The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab. Alternatively, you can download the entire collection as a zip archive or fork it as a GitHub repository. Be sure to read the O’Reilly Media policy on the use of example code.

• Example 14-1 & Figure 14-1 (using <animate> to change fill colors):
  • SVG file (will not animate in Internet Explorer/Edge)
  • screenshot
• Example 14-2 (using CSS animation to change fill colors):
  • SVG file (will not animate in Internet Explorer; may soon be supported in Edge)
• Example 14-3 & Figure 14-2 (CSS-animated gradient stop colors):
  • SVG file (again, no Internet Explorer/Edge support yet)
  • screenshot
• Example 14-4 (SMIL-animated gradient vector attributes):
  • SVG file (very poor browser support; currently works as intended in Blink)
• Example 14-5 & Figure 14-2 (interactive SMIL checkbox-like animations):
  • HTML file (very poor browser support; currently works as intended in Firefox, but see the book for other limitations)
  • screenshot
• Example 14-6 (scripted interactive checkbox animations):
  • HTML file (works everywhere JavaScript runs!)

Return to the main table of contents.