This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

This element has been deprecated in SVG 1.1 Second Edition and may be removed in a future version of SVG. It provides no features not already available by using the <animate> element and is not implemented in Firefox nor Internet Explorer. Authors should use the <animate> element instead.

The animateColor element specifies a color transformation over time.

Usage context

CategoriesBasic shape element, Graphics element, Shape element
Permitted contentAny number of the following elements, in any order:
Descriptive elements


Source code Output result
<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

    <circle cx="60" cy="60" r="50">
        <animateColor attributeName="fill" 

» animateColor.svg


Global attributes

Specific attributes

DOM Interface

This element implements the SVGAnimateColorElement interface.


Specification Status Comment
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<animateColor>' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support ? ? ? ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

Document Tags and Contributors

 Contributors to this page: Sebastianz, kscarfone, Jeremie, trevorh, birtles
 Last updated by: Sebastianz,