SVG: Animation

By Xah Lee. Date: . Last updated: .

SVG can be animated by:

CSS Animation

[see CSS: Animation]

CSS Transition

[see CSS: Transition]

Web Animation

Web Animation

SVG Animation

Note: there's also animateColor, but is deprecated. Just use animate

repeatCount

Google Chrome depricate smil https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5o0yiO440LM%5B1-25%5D

StackOverflow pure svg smil https://stackoverflow.com/questions/40995387/what-is-pure-svg-and-what-is-smil

Reference

Animation – SVG 1.1 (Second Edition)

SVG Topics

  1. SVG: Basic Examples
  2. SVG Path Tutorial
  3. SVG Path: Elliptical Arc
  4. SVG: Specifying Styles
  5. SVG: Basic Shape Styles
  6. SVG: Viewport
  7. SVG: viewBox, User Coordinate
  8. SVG: Coordinate Transformation
  9. SVG: Text Element Tutorial
  10. SVG: Structure Elements
  11. JS: Scripting SVG, Basic Example
  12. JS: SVG Clock
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon