Neben der Animation der Farbe und der Bewegung entlang eines Pfades kann ein Element auch über die Zeit transformiert, d. h. skaliert, transliert, gedreht und geschert werden. Dies passiert über das Element <animateTransform>. Wer nicht mehr genau weiß, was es mit den Transformationen in SVG auf sich hatte, möge sich Kapitel 2.4.2 noch einmal zu Gemüte führen. Indem man die Attribute attributeName="transform" und attributeType="XML" belegt und das Attribut type mit einem der Werte "scale", "rotate", "skewX" , "skewY", "translate" füllt, legt man fest, welche Art von Transformation über die Zeit geschehen soll.

Um dann zu bestimmen, welche Veränderung mit der Animation einhergehen soll, gibt es mehrere Möglichkeiten. Die einfachste ist, einen Startzustand und einen Endzustand festzulegen. Das ist bereits aus Kapitel 2.5.6.3 Farbanimation bekannt: man benutzt die Attribute from und to, diesmal werden sie mit den zur Transformation passenden Werten gefüllt. Wenn z. B. der type der Transformation "scale" ist, beinhalten from und to Werte wie "1 1.2", der besagt, dass in X-Richtung um Faktor 1 und in Y-Richtung um Faktor 1.2 skaliert werden soll. Die Syntax ist also die gewohnte und entspricht immer dem Typen der Transformation.

Will man aber mehr als nur einen Start- und einen Endwert definieren, benutzt man die Attribute keyTimes und values. Diese Attribute - wie auch from und to - kann man auch bei jeder anderen Animationsart benutzen. Unterschiede gibt es logischerweise wieder nur bei den Werten. keyTimes beinhaltet eine Semikolon-getrennte Liste von Werten zwischen 0 und 1, diese Werte beziehen sich relativ auf die bereits vergangene Zeit der Animation: 0 bedeutet, die Animation ist noch nicht gestartet, 1 bedeutet, sie ist vorbei, und 0.5 z. B. heisst, sie ist zur Hälfte um. values wird ebenfalls mit einer Semikolon-getrennten Liste von Werten gefüllt, zu jedem Zeitanteil in der Liste von keyTimes muss es genau einen Wert in values geben. Diese Werte in values entsprechen dem Wert, den die Transformation zum entsprechenden Zeitpunkt (in keyTimes festgelegt) hat. Dazu ein kurzes Beispiel:

<animateTransform attributeName="transform" attributeType="XML" type="rotate"
        begin="0s" end="4s"
        keyTimes="0;0.25;0.6;1" values="0;20;10;30"/>

In diesem Beispiel wirkt sich zum Zeitpunkt 0 eine Rotation von 0° auf das Element aus, nach einer Sekunde ist es um 20° gedreht, nach 2,4 Sekunden um 10 Grad und am Ende der Animation, nach 4 Sekunden, um 30°.

Zu beachten sei, dass der erste Wert von keyTimes immer 0 und der letzte 1 sein muss, ausser, wenn der calcMode "paced" oder "discrete" ist. Bei "discrete" muss lediglich der erste Wert 0 sein, bei "paced" gibt es gar keine Vorschriften.

Das Beispiel 40 zeigt anhand von drei Geometrien jede der Transformationen über die Zeit verändert. Dazu noch zwei Tipps: Man sollte bedenken, dass bei einer Transformation immer der Nullpunkt als Referenz benutzt wird, also eine Rotation zum Beispiel wird immer um den Nullpunkt des aktuellen Koordinatensystem ausgeführt. Will man wie im Falle der Räder des Fahrrads, dass sich das Element um sich selber dreht, muss die Animation an der Stelle stattfinden, an der das Element noch am Punkt (0,0) liegt, danach kann es erst verschoben werden. Hier tritt öfter noch ein Problem auf: Besitzt das Element, auf das sich die Animation auswirken soll und damit das Animations-Tag umschließt, ein transform-Attribut, so wird dieses durch die Transformation des <animateTransform>-Tag schlicht überschrieben. Die Lösung ist simpel: Man umschliesst das Element mit einem zusätzlichen <g>-Gruppen-Tag und führt die Transformation darin aus, z. B. beim Ballon wird das Problem so gelöst.

Zuletzt soll noch das Sternenhimmel-Beispiel erweitert werden: Der Mond wird, während er nach rechts unten aus dem Bild fliegt, gleichzeitig kleiner skaliert. Damit entsteht der Eindruck, der Mond würde nach hinten rechts unten segeln.