Mit Hilfe von <animateColor> werden die Farbeigenschaften eines Elementes über die Zeit verändert.

Neben den Attributen, die auf den zeitlichen Verlauf Einfluss haben, muss selbstverständlich auch noch festgelegt werden, welcher Farbbereich des Elementes verändert werden soll: Füllfarbe oder Konturfarbe? Dazu werden die Attribute attributeName und attributeType verwendet, die so allgemein gültig sind und auch später von anderen Animations-Elementen benutzt werden. attributeName erhält als Wert den Bezeichner des Attributs, das verändert werden soll, z.B. "fill", wenn die Füllfarbe animiert werden soll. attributeType kann "CSS", "XML" oder "auto" als Wert besitzen und bestimmt, was für eine Art von Attribut, das in attributeName stehende Attribut denn ist: eine CSS-Eigenschaft oder ein eigenständiges Attribut des zu animierten Elementes? "auto" bedeutet, dass der SVG-Viewer selber duch die CSS-Eigenschaften und die Attribute des Elements suchen muss, um das passende Attribut zu finden. Diese Einstellung sollte vermieden werden, sie ist in der Regel sehr zeitaufwendig. Es versteht sich von selber, dass die Angabe nur eines dieser zwei Attribute nicht viel Sinn macht. Sie müssen immer zusammen auftreten.

Dann soll natürlich auch angegegeben werden, von welcher Farbe in welche die Veränderung denn stattfinden soll: dazu stehen die Attribute from und to zu Verfügung, die Angabe der Farbwerte ist in der bekannten Syntax zu machen.

Das Beispiel 36 zeigt einen Nachthimmel mit Sternen und Mond. Es werden diverse Farbanimationen verwendet. Zum einen wird der Himmel im Hintergrund nach einiger Zeit heller, zum anderen blinken einige der Sterne während der Dunkelphase manchmal kurz auf, d.h. ihr Farbe wird kurz heller und danach gleich wieder normal.