SVG animation in HTML5

SVG animates an element to change an attribute or property over time. Some elements of Synchronized Multimedia Integration Language (SMIL) tags are embedded in the SVG specification.
The principle of animation is simple: Animation means changing attributes of SVG elements over time.
Definition: Animation is the time-based manipulation of an attribute of a target element.
Animation defines a beginning and a simple duration that can be repeated. Each animation defines an animation function that produces a value for the target attribute at any time in the simple duration.
The target attribute is the name of a characteristic of a target element. It can be either an XML attribute contained in the element or a CSS property applied to the element. By default, the target element of animation will be the parent of the animation element.
The attributes to identify a target attribute are:
Five animation elements are:

AnimateColor

AnimateColor is one way to change the color in a shape. Color changes can be done in a number of ways in SVG. What sets animateColor apart from what you might encounter with the "animate" element is the "to" and "from" attributes. The syntax is different between the two actions.
Browser Support
You must use a recent browser (issued 2011 or later), e.g. FireFox, Chrome, Opera or Safari. These examples will not work with Internet Explorer 9.
Generally, color can be chosen by using one of the following three codes:

Using a Color Name

This approach is used to type in the name of the color you want to use.
fill="blue" stroke="black"
This will add blue shade to the inside of the shape and a black line as a border.

Using an RGB value

The syntax gets slightly complicated if you would rather use a value for the color. The coding follows a similar pattern for RGB, such as:
style="fill:#0000ff;stroke:#000000"
The line starts with style. When using the style attributes, such as fill, divide the value from the name with a colon.
fill:rgb
Separate the various attributes with a semicolon.
fill:#0000ff;stroke

Using a Hexadecimal Values

Use the same syntax for hexadecimal values, as in:
style="fill:#0000FF; stroke=#000000"
AnimateColor Example
  1. <!DOCTYPE html>
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>SVG animateColor</title>
  6. <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  7. </head>
  8. <body>
  9. <h2>ColorAnimation HTML5</h2>
  10. <svg width="300px" height="200px" xmlns="http://www.w3.org/2000/svg">
  11. <circle cx="100" cy="100" r="50" fill="red">
  12. <animateColor
  13. attributeName="fill"
  14. begin="1s"
  15. dur="10s"
  16. values ="red; orange; yellow; green; blue; indigo; violet; red"
  17. repeatCount="indefinite"
  18. />
  19. </circle>
  20. <circle cx="200" cy="100" r="50" fill="red">
  21. <animate
  22. attributeName="fill"
  23. begin="1s"
  24. dur="10s"
  25. values ="red; orange; yellow; green; blue; indigo; violet; red"
  26. repeatCount="indefinite"
  27. />
  28. </circle>
  29. </svg>
  30. </body>
  31. </html>
Output
In the following, within a few seconds, the color will change automatically in both circles.
coloranima1.jpg
coloranima2.jpg