Examples and Tests for SVG Animation

Animation Elements

animate element

Samples for the use of the animate element is already given for many applications in the other sections. All data types can be animated with animate except frequency, time and transform-list. For the color data type typically the animateColor is preferred, but we can try it with animate, too. animateColor is restricted to color values, animate can use all paint values.

e2005-09-12-07: Q
color animation with animate:
animate animation of the fill and stroke property. The fill of several shapes in a group changes from yellow to blue in 10 seconds. The stroke changes from light green to dark magenta.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail animation incomplete
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

This is not SVG tiny 1.1, but SVG 1.1:
e2005-09-12-08: UQ
random animations of several attributes of a path or
random animations of several attributes of a path:
d, stroke-width, stroke-opacity, stroke and fill of a regular polygon path are animated in a PHP-script for random generation of several parameters. A click on the path restarts the PHP-script with another path.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

Note, that very simple animate animation can work in KSVG, these are shown already in other examples.

set element

Samples for the use of the set element are already given for many applications in the other sections. All data types can be animated with set except frequency, time and transform-list.

e2007-09-30-01: M(1)P
compare set and animate:
set and animate with one value and additive replace and accumulate none are equivalent. This is tested with animated circles. Test duration is about 8s with three jumps in x direction. Dark red or red indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail dur for set ignored?
WebKit 528.16fail red animate comparison wrong
Adobeok -
Squiggle 1.7fail wrong error messages
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-09-12-09: QI
set animation starts animate animations:
With a click on a circle the xlink:href attribute of the a element around the circle is changed with a set animation. The begin of this set animation starts an animate animation, which one depends on the changed content of the xlink:href attribute: First click - horizontal movement. Second click - vertical movement. Third click - changes the size of the circle. Note, that activation with hyperlinks resolves begin times, therefore later activation gives access to the history of the animation with the latest resolved begin times for all elements.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail animates without interaction
WebKit 528.16fail does not search back at fourth click
Adobeok -
Squiggle 1.7fail wrong timing with repetition
Opera8.02/50fail no animation
Opera9tp1fail no set of xlink:href
Opera9tp2/ beta1/2/ 9.00/9.10fail timing of history wrong
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0fail no interactivity
Gecko 24.0/ 36.0/ 48.0ok -

e2005-09-12-10: P
set a fill color with the URI fragment identifier #yellow:
set a fill color with the URI fragment identifier #blue:
set a fill color with the URI fragment identifier #green:
With an URI fragment identifier the color of a circle is set. Available sets: #yellow, #blue, #green.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail always green
KSVG1fail no animation
WebKit 528.16fail no animation
Adobefail no animation
Squiggle 1.7fail no animation
Opera8.02/50fail no animation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail no animation
Gecko 2.0/ 8.0/ 12.0fail no interactivity
Gecko 24.0/ 36.0/ 48.0ok -

e2005-09-12-11: PI
set a fill color with a click on the corresponding circle:
With a click on one of the small circles on the top the color of a large circle is set. Note, that a click on one small circle resolves the begin of the relating set animation. The whole history is repeated after another click on the same circle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail always green
KSVG1fail no interaction
WebKit 528.16fail wrong colors after first turn
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9tp2/ beta1/2/ 9.00/9.10fail no history, sometimes not all clicks work
Gecko 2.0/ 8.0/ 12.0fail no interactivity
Gecko 24.0/ 36.0/ 48.0ok -

e2005-09-12-12: IQ
set and animate interactive combined:
The begin of the animation is started with a click on the circle. Next clicks move a little bit further. If the circle is clicked the last time before it moves out of the viewBox, the complete cascade of moves is repeated.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no interactivity
KSVG1fail no interactivity
WebKit 528.16fail not repeated
Adobefailinstable, some clicks ignored
Squiggle 1.7failunderlying initial value ignored
Opera8.02/50failno animation
Opera9tp1fail xlink:href not animated, accumulate ignored
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok (in 9.50 alpha/beta/ 9.52 nasty residuals from the 'focus box')
Gecko 2.0/ 8.0/ 12.0fail no interactivity
Gecko 24.0/ 36.0/ 48.0ok -

This is not SVG tiny 1.1, but SVG 1.1 or SVG basic 1.1
e2006-07-12-01: IQA
set, begin and end with events:
Changing colour, opacity, display or visibilities with different events as explained in the related title element.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no interactivity
KSVG1fail no interactivity
WebKit 528.16ok -
Adobefailsome events ignored, if they are applied to the end attribute
Squiggle 1.7failbottom left disappears forever, bottom right works only once
Opera8.02/50failmost events ignored, crashes with some events applied to the end attribute
Opera9tp1fail end events ignored in 9tp1, alle events ignored in betas
Opera9tp2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00(ok) (bottom right circle instable)
Opera11.60fail bottom right no function
Opera12,00fail some events ignored
Gecko 2.0/ 8.0fail bottom right remains visible after click and move
Gecko 12.0/ 24.0/ 36.0/ 48.0fail no interactivity
Test results for set
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/5 0/6
KSVG1 0/5 0/6
WebKit 528.16 0/5 1/6
Adobe 3/5 3/6
Squiggle 1.7 1/5 1/6
Opera8.02/50/ 9tp1 2/5 2/6
Opera9 beta1/2 3/5 3/6
Opera9tp2/ 9.00/9.10 3/5 4/6
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 4/5 5/6
Opera11.60/ 12,00 4/5 4/6
Gecko 2.0/ 8.0/ 12.0 1/5 1/6
Gecko 24.0/ 36.0/ 48.0 4/5 5/6

animateTransform

Samples for the use of the animateTransform element are already given for many applications in the other sections, especially of the transform attribute. The data type transform-list can be animated with animateTransform.

e2006-02-11-02: M(1)P
compare animate and animateTransform:
A circle moves from left to right with animateTransform. This animation is superposed by a simple from to animation from top to bottom. The visible effect is a motion along the given gray path. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

This is not SVG tiny 1.1, but SVG 1.1 or SVG basic 1.1
e2005-09-24-01: Q
animateTransform of a SVG document:
animateTransform of an image element referencing a SVG document. A centered image is transformed with several types additive and several durations.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail referenced SVG document animates, but no transformation.
Amaya11.3.1fail no animation
KSVG1fail no animation, no transformation
WebKit 528.16fail almost ok, but the SVG document does not animate. It is e2005-09-12-01, which was as a single document.
Adobefail almost ok, but the SVG document does not animate. It is e2005-09-12-01, which was as a single document.
Squiggle 1.7fail almost ok, but the SVG document does not animate. It is e2005-09-12-01, which was ok as a single document.
Opera8.02/50fail no display
Opera9tp1/2/ beta1/2/ 9.00/9.10fail animation ok, but instead of the SVG a chequered pattern is displayed.
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail many disturbances in alpha, the SVG document does not animate.
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail SVG document does not animate.

from-to

e2005-09-23-02: Q
animateTransform switch back and mirror:
A square and a test text are transformed with a matrix. The transformation is reversed after 3s and vertically mirrored within further 10s. This means, after 3s the transformed square switches back to a square and is mirrored after another 10s completely. matrix itself is not animatable, but because there is no additive-attribute it has to be simply overwritten.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16(ok) sometimes frozen at zero scaling
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok (Text in tp2 a little bit instable)
Gecko 2.0/ 8.0/ 12.0fail text animation disturbed
Gecko 24.0/ 36.0/ 48.0ok -

from-by

e2005-09-23-03: Q
animateTransform shrink to zero:
A square and a test text are transformed with a matrix. After 3s an animateTransform with a scale from 1,1 by -1,-0.5 is applied with additive sum. This means, after 3s the square shrinks in x-direction to zero and becomes invisible. matrix itself is not animatable, but because of additive sum it is the initial shape of the animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail text distorted, a residual of the text does not vanish
Adobefail a residual of the shapes does not vanish
Squiggle 1.7fail discrete and wrong animation
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok(Text in tp2 a little bit instable)
Gecko 2.0/ 8.0/ 12.0fail text animation disturbed
Gecko 24.0/ 36.0/ 48.0ok -

by

e2006-05-14-03: M(1)P
animateTransform and by:
A blue square and a test text are transformed with a matrix. After 3s an animateTransform is added this with a scale by 0.5,-2 and a duration of 10s and calcMode linear is applied. This means, after 3s the shape is scaled and morphed from no display to a skewed rectangle. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail frozen/crashed
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail no display or animation
Opera9tp2/ beta1/2/ 9.00/9.10fail in 9tp2 the text size is instable, ignores initial transformation. bug-212139
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0fail text animation disturbed
Gecko 24.0/ 36.0/ 48.0ok -

e2006-05-13-01: M(1)P
by and animateTransform:
A blue circle is moved from right to left in 5s using animateTransform with the by attribute. Because for by the animation is additive, the initial transformation is not overwritten. If the red circle gets visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animateTransform
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail no display of the blue circle
Opera9tp1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9tp2/ beta1/2/ 9.00/9.10fail not additive
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

to

e2005-09-23-01: Q
animateTransform switch back to no transform:
A square is transformed with a matrix. The transformation is reversed by a discrete animation with a begin of 3s. This means, after 3s the transformed square switches back to a square. matrix itself is not animatable, but because there is no additive-attribute it has to be simply overwritten.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobefail no animation
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10ok -
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail no animation
Gecko 2.0ok -
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail no animation

e2005-09-23-04: M(1)P
animateTransform and to attribute:
A blue square and a test text are transfomed with a matrix. After 3s an animateTransform with a scale to -1,1 and a duration of 10s and calcMode linear is applied. This means, after 3s the square morphes to a mirrored square continuously. matrix itself is not animatable, but it is the initial value for the animateTransform. If a something red becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail wrong animation, sometimes frozen
Adobefail not a linear animation
Squiggle 1.7fail no animation, wrong error messages, wrong stroke-width!
Opera8.02/50fail shapes vanish
Opera9tp1/2/ beta1/2/ 9.00/9.10failnot a linear animation. bug-212137
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong animation

e2005-09-23-05: M(1)P
animateTransform and to attribute:
A blue square and a test text are given as initial shapes with a scale of 1.5,1.5. After 3s an animateTransform with a scale to -1,1 and a duration of 10s and calcMode linear is applied. This means, after 3s the scale is animated continuously to mirrored shapes. If a something red becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail not a linear animation
Squiggle 1.7fail wrong stroke-width!
Opera8.02/50fail shapes vanish
Opera9tp1/2/ beta1/2/ 9.00/9.10fail not a linear animation. bug-212137
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0fail text animation disturbed
Gecko 24.0/ 36.0/ 48.0ok -

e2006-06-03-01: M(1)P
animateTransform and frozen to animation:
Test of the correct additive default behaviour of to animations. A circle moves on a quadratic path using two to animateTransforms in x direction and one simple animate for cy. The animation for cy and the first to animation for x is repeated two time, the second to animation for x just 1.5 times. Note that the second to animation is frozen on the half way. Because it has higher priority, the whole animation in x is frozen. The path is given in gray for comparison, thin line for the first turn, thick line for the second turn. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animateTransform
WebKit 528.16fail wrong animation
Adobefail first animateTransform ignored
Squiggle 1.7fail wrong animation
Opera8.02/50fail no animation
Opera9tp1fail the second turn shows wrong behaviour for a frozen to animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong animation
Gecko 2.0/ 8.0/ 12.0ok -
Gecko 24.0/ 36.0/ 48.0fail wrong animation

e2006-06-03-02: M(1)P
animateTransform and to animation:
Two blue circles are moved to one position marked with a gray circle, using animateTransform with to for a translation to the absolute final value. Two red circles are animated as simple references just for comparison. If the red circles become visible, the animation of the blue circles is wrong. Note that to animations have a special additive behaviour, defined in detail into the SMIL recommendation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animateTransform
WebKit 528.16fail wrong animation
Adobefail animation discrete, not linear
Squiggle 1.7fail wrong animation
Opera8.02/50fail blue circles vanish
Opera9tp1fail small circle incorrect animated
Opera9tp2/ beta1/2/ 9.00/9.10fail wrong animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

keySplines

e2007-06-11-11: M(1)P
animateTransform, keySplines:
Advanced test for calcMode splines, keySplines using from-to, from-by or values animateTransform.
A blue stroked circle is translated with six different animateTransform using calcMode spline and keySplines. A parent group is animated linear with values animateTransform as a time axis to get to get a simple comparison.
The resulting trajectories are displayed within the active duration as gray paths. These paths cover always completely the red fill of the circle.
If the red center of the circle gets visible, an error is occurred.
The timing of the animateTransform is choosen in such a way, that the keySplines correspond directly to a cubic path as trajectory. The keySplines values have to be multiplied only with the related values and combined with the values of the time axis, to get the path data.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail keySplines ignored for from-to, from-by
Adobefail keySplines ignored for from-to, from-by
Squiggle 1.7fail from-by animation ignored, accuracy could be better for the others
Opera8.02/50fail no keySpline animation
Opera9tp1/2/ beta1fail keySplines ignored for from-to, from-by
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail bad interpolation
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0ok -
Gecko 24.0fail no blue circle

additive and accumulate

SMIL specifies, that from-to, from-by and by animations have to be the same as the related values animation.
The conversion is as follows:

from="a" to="b" ... values="a;b"
from="a" by="b" ... values="a;a+b"
by="a" ... values="0;a" additive="sum"

by and from-by animations have only a meaning, if values can be added somehow. '0' is used as a general symbol for the neutral element of addition for the related attribute, this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the related attribute, '0' is a predecessor of '1' in the related attribute space.
Deviating from SMIL in SVG it is specified, that for animateTransform the animation effect has to be postmultiplied to the underlying value, if the animation is additive.

For animateTransform the '0' is the same as the zero matrix, not the unity or identity matrix.
For the translate type this is a translation given in coordinates: 0,0.
For the skewX or skewY type this is a skew with an angle of 0.
For two additive skew angles a, b the resulting angle is not a+b but atan(tan(a)+tan(b)).
For the scale type this is a scaling with 0,0, this means no display if not added to another value.
For the rotate type this is a rotation with an angle of 0 around 0,0.

e2007-06-18-01: M(1)P
animateTransform translate:
Compare from-to, from-by and by animateTransform translate with values animateTransform and animateMotion.
The from-to, from-by and by are applied to animateTransform of the translate type of different blue stroked paths and are compared with the related values animations including additive and cumulative behaviour for underlying red paths. Additionally underlying dark red paths simulate the same behaviour using always the defaults additive replace and accumulate none with animateMotion. The blue paths cover all red paths. Therefore if something red gets visible, the test is failed.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong interpretation for cumulative from-by animations
Squiggle 1.7fail no animation, wrong error messages
Opera8.02/50/ 9tp1fail wrong animation
Opera9tp2/ beta1/2/ 9.00/9.10fail additive replace not ignored for by animations
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong final values

e2007-06-18-02: M(1)P
animateTransform skewX:
Compare from-to, from-by and by animateTransform skewX with values animateTransform.
The from-to, from-by and by are applied to animateTransform of the skewX type of different blue stroked paths and are compared with the related values animations including additive and cumulative behaviour for underlying red paths. Additionally underlying dark red paths simulate the same behaviour using always the defaults additive replace and accumulate none. The blue paths cover all red paths. Therefore if something red gets visible, the test is failed.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong interpretation for cumulative from-by animations
Squiggle 1.7fail no animation, wrong error messages
Opera8.02/50/ 9tp1fail wrong animation
Opera9tp2/ beta1/2/ 9.00/9.10fail additive replace not ignored for by animations
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong intermediate and final values

e2007-06-18-03: M(1)P
animateTransform skewY:
Compare from-to, from-by and by animateTransform skewY with values animateTransform.
The from-to, from-by and by are applied to animateTransform of the skewY type of different blue stroked paths and are compared with the related values animations including additive and cumulative behaviour for underlying red paths. Additionally underlying dark red paths simulate the same behaviour using always the defaults additive replace and accumulate none. The blue paths cover all red paths. Therefore if something red gets visible, the test is failed.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong interpretation for cumulative from-by animations
Squiggle 1.7fail no animation, wrong error messages
Opera8.02/50/ 9tp1fail wrong animation
Opera9tp2/ beta1/2/ 9.00/9.10fail additive replace not ignored for by animations
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong intermediate and final values

e2007-06-18-04: M(1)P
animateTransform scale:
Compare from-to, from-by and by animateTransform scale with values animateTransform.
The from-to, from-by and by are applied to animateTransform of the scale type of different blue stroked paths and are compared with the related values animations including additive and cumulative behaviour for underlying red paths. Additionally underlying dark red paths simulate the same behaviour using always the defaults additive replace and accumulate none. The blue paths cover all red paths. Therefore if something red gets visible, the test is failed.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong interpretation for cumulative from-by animations
Squiggle 1.7fail no animation, wrong error messages
Opera8.02/50/ 9tp1fail wrong or no animation
Opera9tp2/ beta1/2/ 9.00/9.10fail animation completely nonsense
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong intermediate and final values

e2007-06-18-05: M(1)P
animateTransform rotate (around zero):
Compare from-to, from-by and by animateTransform rotate with values animateTransform.
The from-to, from-by and by are applied to animateTransform of the rotate type of different blue stroked paths and are compared with the related values animations including additive and cumulative behaviour for underlying red paths. Additionally underlying dark red paths simulate the same behaviour using always the defaults additive replace and accumulate none. The blue paths cover all red paths. Therefore if something red gets visible, the test is failed.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong interpretation for cumulative from-by animations
Squiggle 1.7fail no animation, wrong error messages
Opera8.02/50/ 9tp1fail wrong animation
Opera9tp2/ beta1/2/ 9.00/9.10fail additive replace not ignored for by animations
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong intermediate and final values

e2007-06-18-06: M(1)P
animateTransform rotate:
Compare from-to, from-by and by animateTransform rotate with values animateTransform.
The from-to, from-by and by are applied to animateTransform of the rotate type of different blue stroked paths and are compared with the related values animations including additive and cumulative behaviour for underlying red paths. Additionally underlying dark red paths simulate the same behaviour using always the defaults additive replace and accumulate none. The blue paths cover all red paths. Therefore if something red gets visible, the test is failed.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong interpretation for cumulative from-by animations
Squiggle 1.7fail no animation, wrong error messages
Opera8.02/50/ 9tp1fail wrong animation
Opera9tp2/ beta1/2/ 9.00/9.10failadditive replace not ignored for by animations and wrong cumulative animations
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong intermediate and final values

e2006-05-14-01: M(2)P
animateTransform, from, to, replace:
A blue square and a test text are transfomed with a matrix. After 3s an animateTransform replaces this with a scale from 1.5,1.5 to -1,1 and a duration of 10s and calcMode linear is applied. This means, at 3s the transformation is replaced, morphes then to a mirrored square continuously. Initial and final animation value of the rectangle are given in gray.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail animation begin slightly too small
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok in 9tp2 the text size is instable
Gecko 2.0/ 8.0/ 12.0fail text animation disturbed
Gecko 24.0/ 36.0/ 48.0ok -

e2006-05-14-02: M(2)P
animateTransform, from, to, additive sum:
A blue square and a test text are transfomed with a matrix. After 3s an animateTransform is added this with a scale from 1.2,1.2 to 1.5,-1.5 and a duration of 10s and calcMode linear is applied. This means, after 3s the shape is scaled in 3s from a factor of 1.2 to 1.5 and morphes to a mirrored square continuously. Initial and final animation value of the rectangle are given in gray.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok in 9tp2 the text size is instable
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Test results for animateTransform
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/19 0/20
KSVG1 0/19 0/20
WebKit 528.16 5/19 5/20
Adobe 6/19 6/20
Squiggle 1.7 7/19 7/20
Opera8.02/50 6/19 6/20
Opera9tp1 7/19 7/20
Opera9tp2/beta1/2/ 9.00/9.10 6/19 6/20
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 15/19 15/20
Gecko 2.0 6/19 7/20
Gecko 8.0/ 12.0 5/19 6/20
Gecko 24.0 8/19 9/20
Gecko 36.0/ 48.0 9/19 10/20

KSVG does not like to animate the transform attribute in general. Amaya displays some corious effects or no animation.

Note, that is a little bit strange in the specification, that the matrix is not an animatable type. Anyway it can be the initial value of the transform attribute, any value of the transform attribute is the initial value of a to or by animation. This is much more complicated for user agents than 'from to' or 'from by' animations. To avoid problems, maybe it is better to prefer from to, from by or values, if possible.
Furthermore because matrix can be replaced by the other transformations, it is possible to get the same visual effect of an animated matrix, combining the others with the attribute additive sum.
To get the by-animations correct, an additive animation from the identity matrix to the values given by the by attribute has the same effect with animateTransform, because this is defined as a multiplicative operation and the by animation is additive.
To get the to-animation correct, a special rule has to be used. If C(t) is the current transform matrix and T the to value of the animation, t the time, d the duration, the user agent can use additive replace and the following transform matrix for a to-animation: C(t) + (T - C(t)) t/d.

animateColor

Samples for the use of the animateColor element are already given for many applications in the other sections, see the subsections of the attributes fill, stroke and color. The data types color (and maybe paint) can be animated with animateColor.

e2005-09-15-01: QU
animateColor:
Pseudorotation with discrete animation of animateColor - a circle seems to rotate around the center of the picture. This animation is similar to the traditional frame based animation as with formats like GIF, MNG or MPEG. Instead of moving objects, single pictures become visible just for a short time and are displayed one after the other - here it is done just for fun, in these formats this causes the big file size, typical for this formats.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail nice colorful errors ;o)
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

values

e2006-08-13-01: P
animateColor:
The fill property of a circle is animated with the values red;#ffff00;rgb(255,0,255);blue;rgb(0%,50%,70%);currentColor;red with a begin of 2s and a dur of 10s with repetition. Initial value is none. The stroke has the same animation, only using rgb() with percentage.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail nice colorful errors ;o)
WebKit 528.16fail wrong currentColor
Adobefail animation not continuous
Squiggle 1.7ok -
Opera8.02/50fail wrong currentColor
Opera9tp1fail wrong animation
Opera9tp2 /beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

e2006-08-13-02: M(2)P
animateColor:
The color of a group and the fill of two circles part of the group are animated. The values for color are rgb(0,0,255);rgb(100,100,100);rgb(0,0,255) indicated by the color of the background. The values for fill of the large centered circles are blue;currentColor;blue. The values of the small circle bottom right are blue;rgb(100,100,100);blue, but this animateColor uses keyTimes and keySplines to get the same visible effect as the animateColor of the large circle. Because currentColor changes all the time, the animation of fill is a quadratic and continuous change all in the blue range. An error occurred for example, if something red gets visible, if fill is not animated continuously (ignoring the fact that currentColor has always a RGB value) or if the effect of animation of fill is not visible (ignoring the animation of color) or if the animation of the two circles have not the same visible effect.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation, wrong colors
WebKit 528.16fail animation wrong
Adobefail animation not continuous and wrong
Squiggle 1.7fail animation wrong
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong or no animation

e2006-08-13-03: Q
animateColor using system colors:
The fill property of a circle is animated with system colors as values: WindowText;Menu;MenuText;InactiveBorder; ActiveBorder;GrayText;Window;HighlightText;Highlight; InfoBackground;InfoText;WindowFrame;WindowText with a begin of 2s and a dur of 20s with repetition. Initial value is none. The background rectangle is filled with AppWorkspace.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail nice colorful errors ;o)
WebKit 528.16fail only diplayed color: black
Adobefail only diplayed color: black
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail incomplete
Opera9tp2 /beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

e2006-09-05-01: M(1)P
animateColor, inherit and currentColor:
The color and the fill of a g element are animated from red to blue respectively from blue to red in 10s. The g element contains a rectangle for which the fill is animated in 10s with the values inherit and currentColor. The fill of the centered small circle simulates the behaviour of the large rectangle, using keyTimes and keySplines to get the same visible effect.
Because fill and currentColor change all the time, the animation of fill of the rectangle is a quadratic and continuous change all in the blue range (from blue to magenta back to blue). An error occurred for example, if something red gets visible, if something is not animated continuously (ignoring the fact that currentColor and inherit have always a RGB value) or if the effect of animation of fill is not visible (ignoring the animation of color) or if the animation of rectangle and circle have not the same visible effect.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail surprising colorful errors ;o)
WebKit 528.16fail no animation of rectangle
Adobefail slightly wrong colors in the animation
Squiggle 1.7fail animation completely wrong
Opera8.02/50fail animation completely wrong
Opera9tp1/2 /beta1/2/ 9.00/9.10fail wrong animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera11.00/11.60/ 12,00failwrong animation

from-to

e2008-03-12-01: P
animateColor and from-to animation:
The 16 case-insensitive color names of SVG tiny 1.1 are used in from-to animateColor for the fill of 8 rectangles.
The animations are compared with the related animateColor for stroke using hexadecimal numbers.
A difference between fill and stroke indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no stroke, test itself ok
KSVG1ok -
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

from-by

e2008-03-12-11: P
animateColor and from-by animation:
from by animateColor are tested using some of the 16 case-insensitive color names of SVG tiny 1.1.
The animations are compared with the related animateColor for stroke using hexadecimal numbers.
A difference between fill and stroke indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no fill
KSVG1fail wrong animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail no fill
Opera9tp1/2/ beta1fail wrong animation
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

e2008-03-12-12: P
animateColor and from-by animation:
Clamping of color animations:
The presentation value has to be clamped to a proper value. Some of the 16 case-insensitive color names of SVG tiny 1.1 are used in from-by animateColor for the fill to test this.
The animations are compared with the related animateColor for stroke using hexadecimal numbers.
A difference between fill and stroke indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no fill
KSVG1fail wrong animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail no fill
Opera9tp1/2/ beta1fail wrong animation
Opera9beta2/ 9.00/9.10ok -
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong animation

e2008-03-12-13: P
animateColor and from-by animation:
SMIL specifies, that 'the values in the from/to/by and values attributes may specify negative and out of gamut values for colors. The function defined by an individual animateColor may yield negative or out of gamut values. The implementation must correct the resulting presentation value, to be legal for the destination (display) colorspace.'
This is possible especially for the percentage notation, because this is defined to be numbers directly followed by '%' without further restrictions. In these tests the presentation value is always in the legal range, only the attribute values or individual animateColor interim results may be outside of the legal range.
A difference between fill and stroke indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no fill
KSVG1fail wrong animation
WebKit 528.16fail wrong animation
Adobefail wrong or no animation of fill
Squiggle 1.7fail wrong or no animation of fill
Opera8.02/50fail no fill
Opera9tp1/2/ beta1fail wrong animation
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail (different) wrong animation

by

e2008-03-11-11: P
animateColor and by animation:
The fill property of circles is animated from almost black to almost white using 14 by animations of 7% steps corresponding to 17.85. These additive animations are compared with a simple values animation for stroke with the same initial and final value and the same timing for the large circle. If there is a difference between stroke and fill or the two circles, this indicates an accuracy problem, because only the final presentation value might be rounded, not each animation separately. The background indicates the initial value and switches to the final value when all animations are finished.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51fail wrong animation
Amaya11.3.1fail no animation
KSVG1fail wrong animateColor, funny colors
WebKit 528.16fail wrong animation
Adobefail wrong animateColor, initial and final colors look ok
Squiggle 1.7failaccuracy problems, initial and final colors look ok
Opera8.02/50/ 9tp1/2/ beta1fail wrong or no animation
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail accuracy problem

e2008-03-11-12: P
animateColor and by animation:
The fill property of circles is animated from almost black to almost white using 9 by animations of 10% steps corresponding 25.5. These additive animations are compared with a simple values animation for fill with the same initial and final value and the same timing for the largest circle. If there is a difference between the fill of the circles, this indicates an accuracy problem, because only the final presentation value might be rounded, not each animation separately. The background indicates the initial value and switches to the final value when all animations are finished.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51fail wrong animation
Amaya11.3.1fail no animation
KSVG1fail wrong animateColor funny colors
WebKit 528.16fail wrong animation
Adobefail wrong animateColor
Squiggle 1.7fail several accuracy problems
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong or no animation, different nonsense

to

e2006-06-04-01: Q
animateColor and to animation:
Changes from blue to green in 4s, back to blue in another 4s and stopping after further 4s with green. The changes are not linear. Note, that color values outside the range 0 to 255 have not to be corrected within the animation calculation, just the current value for presentation has to be corrected. Anyway, if the animation is correct, there is no value outside the range 0 to 255.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animateColor
WebKit 528.16fail no animation
Adobefail wrong animation
Squiggle 1.7fail wrong animation
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong or no animation

calcMode

calcMode linear

e2008-03-12-21: P
animateColor and calcMode linear:
The fill of three rectangles is animated with calcMode linear.
The animations are compared with related simpler animateColor for stroke using only two values for each change.
A difference between fill and stroke indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail wrong animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

calcMode paced

e2008-03-12-31: P
animateColor and calcMode paced:
The fill of three rectangles is animated with calcMode paced.
The animations are compared with related simpler animateColor for stroke using only two values for each change.
A difference between fill and stroke indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail wrong animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7failwrong animation
Opera8.02/50fail no fill
Opera9tp1/2/ beta1fail wrong animation
Opera9beta2ok -
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong frozen values

calcMode discrete

e2008-03-11-01: M(2)PS
discrete animateColor:
The fill property of the circle bottom right is discrete animated from none to dark blue to none to light blue to blue to dark blue to none and so on, begins with the set to dark blue with a begin 3s, the repeated duration is 10s.
The animateColor is compared with the same animation of stroke using animate. The SVG 1.1 specification is ambiguous, whether animateColor is only applicable for <color> or for <paint> to as indicated in the table of animatable attributes compared with the animateColor section. However, the animateColor section does not exclude this explicitly.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail funny colors, wrong animateColor
WebKit 528.16fail wrong animation
Adobeok -
Squiggle 1.7fail error message about wrong values, no animation
Opera8.02/50fail no value none, black instead
Opera9tp1fail wrong discrete animation, no blue
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-

e2008-03-11-02: M(2)PS
animateColor and animate, detect calcMode discrete automatically:
The fill property of two circles is animated from dark blue to light blue to blue to none to dark blue and so on with a begin 2s, the repeated duration is 10s. Because it is not possible to interpolate between a color value and none, the animation has to be detected as discrete automatically.
The animate and animateColor are compared with the same animation of stroke using explictly calcMode discrete. It indicates an error, if there is a difference.
The SVG 1.1 specification is ambiguous, whether animateColor is only applicable for <color> or for <paint> to as indicated in the table of animatable attributes compared with the animateColor section. However, the animateColor section does not exclude this explicitly.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail funny colors, wrong animateColor, no animate
WebKit 528.16fail wrong animation
Adobefail mixture between discrete and continuous animation
Squiggle 1.7fail error message about wrong values, no animation (for animate only: see comment for the adobe plugin)
Opera8.02/50fail no value none, black instead, mixture between discrete and continuous animation
Opera9tp1fail wrong timing and mixture between discrete and continuous animation
Opera9tp2/ beta1/2/ 9.00/9.10failmixture between discrete and continuous animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00failpartly no value none, black instead, mixture between discrete and continuous animation

This is not SVG tiny 1.1, but SVG 1.1 or SVG basic 1.1
e2008-03-11-03: M(2)PS
discrete animateColor:
The fill property of the circle bottom right is discrete animated from none to gray to currentColor to a linear gradient to none to gray and so on, begins with the set to gray with a begin 3s, the repeated duration is 10s. currentColor is defined by color, animated within 11.1s with the values magenta, blue, green, yellow. If something red gets visible, color is not animated.
The animateColor is compared with the same animation of stroke using animate. The SVG 1.1 specification is ambiguous, whether animateColor is only applicable for <color> or for <paint> to as indicated in the table of animatable attributes compared with the animateColor section. However, the animateColor section does not exclude this explicitly.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail funny colors, wrong animateColor
WebKit 528.16fail wrong animation
Adobeok -
Squiggle 1.7fail error message about wrong values, no animation
Opera8.02/50fail no values, black instead
Opera9tp1fail wrong discrete animation, no none at the end
Opera9tp2/ beta1/2/ 9.00/9.10fail currentColor not animated
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-

This is not SVG tiny 1.1, but SVG 1.1 or SVG basic 1.1
e2008-03-11-04: M(2)PS
animateColor and animate, detect calcMode discrete automatically:
The fill property of two circles is animated with a begin at 2s and a repeated duration of 14s with the values:
blue;#80f;blue;currentColor;url(#rG1) red;none;blue. currentColor is defined by color, animated within 11.1s with the values #80f; #00f; #0f8; #08f;#0ff;#80f.
#rG1 is a radial gradient.
If something red gets visible, color is not animated or the gradient is not supported. Because it is not possible to interpolate between a color value and none or a color and a gradient, the animation has to be detected as discrete automatically.
The animate and animateColor are compared with the same animation of stroke using explictly calcMode discrete. It indicates an error, if there is a difference.
The SVG 1.1 specification is ambiguous, whether animateColor is only applicable for <color> or for <paint> to as indicated in the table of animatable attributes compared with the animateColor section. However, the animateColor section does not exclude this explicitly.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail funny colors, wrong animateColor
WebKit 528.16fail wrong animation
Adobefail mixture between discrete and continuous animation
Squiggle 1.7fail error message about wrong values, no animation (for animate only: see comment for the adobe plugin)
Opera8.02/50fail no values none, black instead, mixture between discrete and continuous animation
Opera9tp1fail no currentColor animation, wrong timing and mixture between discrete and continuous animation
Opera9tp2/ beta1/2/ 9.00/9.10fail currentColor not animated, mixture between discrete and continuous animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00failmixture between discrete and continuous animation

keyTimes

e2008-03-12-41: P
animateColor and keyTimes:
The fill of three rectangles is animated with keyTimes.
The animations are compared with related simpler animateColor for stroke using only two values for each change.
A difference between fill and stroke indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail wrong animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

e2008-03-12-42: P
discrete animateColor and keyTimes:
The fill of three rectangles is animated discrete with keyTimes.
The animations are compared with related simpler animateColor for stroke using only two values for each change.
A difference between fill and stroke indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail wrong animation
WebKit 528.16fail no stroke animation
Adobeok -
Squiggle 1.7fail wrong error messages due to single value
Opera8.02/50/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60fail minor accuracy problem
Opera12,00ok -
Opera9tp1/2/ beta1/2/ 9.00/9.10ok -

e2008-03-23-01: M(2)PS
animateColor and animate with keyTimes, detect calcMode discrete automatically:
The fill property of two circles is animated with a begin at 2s and a repeated duration of 14s with the values: blue;#80f;none;blue;currentColor;none;red with keyTimes 0;0.1;0.3;0.6;0.7;0.8;1 currentColor is defined by color, animated within 11.1s with the values #80f; #00f; #0f8; #08f;#0ff;#80f. If something red gets visible, color is not animated.
Because it is not possible to interpolate between a color value and none, the animation has to be detected as discrete automatically. Note, that the values red is newer used, because the keyTimes value for it is 1 and the animations are repeated.
The animate and animateColor are compared with the same animation of stroke using explictly calcMode discrete. It indicates an error, if there is a difference.
The SVG 1.1 specification is ambiguous, whether animateColor is only applicable for <color> or for <paint> to as indicated in the table of animatable attributes compared with the animateColor section. However, the animateColor section does not exclude this explicitly.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail funny colors, wrong animateColor
WebKit 528.16fail wrong animation
Adobefail mixture between discrete and continuous animation
Squiggle 1.7fail error message about wrong values, no animation (for animate only: see comment for the adobe plugin)
Opera8.02/50fail no values none, mixture between discrete and continuous animation
Opera9tp1fail no currentColor animation, wrong timing and mixture between discrete and continuous animation
Opera9tp2/ beta1/2/ 9.00/9.10fail currentColor not animated, mixture between discrete and continuous animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00failmixture between discrete and continuous animation, black instead of none used

e2008-03-23-02: M(2)PS
animateColor and animate with keyTimes, detect calcMode discrete automatically:
The fill property of two circles is animated with a begin at 2s and a repeated duration of 14s with the values: blue;#80f;none;blue;currentColor;none;#008 with keyTimes 0;0.05;0.1;0.3;0.6;0.8;0.9. currentColor is defined by color, animated within 11.1s with the values #80f;#00f;#0f8;#08f;#0ff;#80f. If something red gets visible, color is not animated. Because it is not possible to interpolate between a color value and none, the animation has to be detected as discrete automatically. The animate and animateColor are compared with the same animation of stroke using explictly calcMode discrete. It indicates an error, if there is a difference. The SVG 1.1 specification is ambiguous, whether animateColor is only applicable for <color> or for <paint> to as indicated in the table of animatable attributes compared with the animateColor section. However, the animateColor section does not exclude this explicitly.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail funny colors, wrong animateColor
WebKit 528.16fail wrong animation
Adobefail mixture between discrete and continuous animation
Squiggle 1.7fail error message about wrong values, no animation (for animate only: see comment for the adobe plugin)
Opera8.02/50fail no values none, mixture between discrete and continuous animation
Opera9tp1fail no currentColor animation, wrong timing and mixture between discrete and continuous animation
Opera9tp2/ beta1/2/ 9.00/9.10fail currentColor not animated, mixture between discrete and continuous animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00failmixture between discrete and continuous animation, black instead of none used

keySplines

e2008-03-13-01: P
animateColor and keySplines:
The fill of some rectangles is animated using keySplines and calcMode spline.
The active duration of the animateColor is ended at specific times. The stroke shows the correct frozen color. The large background rectangle shows the complete animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51fail no animation, no stroke
Amaya11.3.1fail no animation
KSVG1fail wrong animation, funny colors
WebKit 528.16fail wrong frozen values
Adobeok -
Squiggle 1.7(ok) one minor accuracy problem
Opera8.02/50ok -
Opera9tp1/2/ 9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail accuracy problems
Opera9beta1fail no animation

e2008-03-13-02: P
animateColor and keySplines:
The fill of some rectangles is animated using keySplines and calcMode spline.
The active duration of the animateColor is ended with repeatDur at specific times. The stroke shows the correct frozen color. The large background rectangle shows the complete animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51fail no animation, no stroke
Amaya11.3.1fail no animation
KSVG1fail wrong animation, funny colors
WebKit 528.16fail wrong frozen values
Adobeok -
Squiggle 1.7fail accuracy problems
Opera8.02/50ok -
Opera9tp1/2/ 9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail accuracy problems
Opera9beta1fail no animation

additive

e2007-06-16-01: M(2)P
compare additive and cumulative from-to, from-by and by with values animateColor:
SMIL specifies, how from-to, from-by and by animations have to be converted into values animations. Therefore they have to be the same as the related values animation. Additionally set animations can be replaced by values animations too. The conversion is as follows:
from="a" to="b" ... values="a;b"
from="a" by="b" ... values="a;a+b"
by="a" ... values="0;a" additive="sum"
set to="a" ... values="a" additive="replace" accumulate="none"
(by and from-by animations have only a meaning, if values can be added somehow. '0' is used as a general symbol for the neutral element of addition for the related attribute, this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the related attribute, '0' is a predecessor of '1' in the related attribute space. In the color space 0 is represented by black, #000, #000000, rgb(0,0,0) etc. Addition is performed for each of the three components of the color vector separately.)
The from-to, from-by and by animations applied to fill properties of circles are compared with the related values animations including additive and cumulative hehaviour for the stroke of the same circles. Additionally underlying filled larger circles simulate the same behaviour using always the defaults additive replace and accumulate none. The fill of the background circle and stroke and fill of the smaller test circle centered in it are always exactly the same. Therefore if rings in each centered circle system with different color get visible, the test is failed. But each separated circle system representing one of 12 subtests can have another color.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail many errors
KSVG1fail many errors
WebKit 528.16fail wrong animation
Adobefailwrong cumulative from-by and wrong by animations
Squiggle 1.7failno animation, wrong error messages
Opera8.02/50/ 9tp1/2 /beta1/fail animation completely wrong
Opera9beta2/ 9.00/9.10fail cumulative animations wrong
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

e2007-05-05-01: P
additive animateColor:
The fill of some circles is animated using additive animateColor. All circles animate from magenta to cyan. If the fill of one of the circles has a different colour at any time than the others, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail surprising colorful errors ;o)
KSVG1fail surprising colorful errors ;o)
WebKit 528.16fail wrong animation
Adobefail centered small circle wrong animated
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2 /beta1/fail animation completely wrong
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -

accumulate

e2007-05-05-11: P
accumulate animateColor:
The fill of some circles is animated using cumulative animateColor. All circles animate in the blue range. The stroke of each circle has a simple animation with the same visual effect. If the fill of a circle is different from the stroke, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail surprising colorful errors ;o)
KSVG1fail surprising colorful errors ;o)
WebKit 528.16fail wrong animation
Adobefail some animations wrong
Squiggle 1.7ok-
Opera8.02/50/ 9tp1/2 /beta1/fail animation completely wrong
Opera9beta2/ 9.00/9.10fail some animations wrong
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Test results for animateColor
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/25 0/27
KSVG1 1/25 1/27
WebKit 528.16 7/25 7/27
Adobe 11/25 12/27
Squiggle 1.7 11/25 11/27
Opera8.02/50 6/25 6/27
Opera9tp1 5/25 5/27
Opera9tp2/beta1 8/25 8/27
Opera9beta2 12/25 12/27
Opera9.00/9.10 11/25 11/27
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 12/25 13/27
Opera11.00/11.60 11/25 12/27
Opera12,00 12/25 13/27
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 * 0/25 0/27

* animateColor completeley ignored.

animateMotion

mpath element

e2005-09-14-01: M(1)P
animateMotion with mpath element:
Two circles are moved along a cubic path with a duration of 30s and repetition. The path is given with the mpath element. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-02: M(1)P
animateMotion with subpaths:
Two circles are moved along a path consisting of the subpaths separated with M commands. The duration is 30s and the animation is repeated. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ok -
Opera9tp1fail M spaces are animated too, but the should not take time
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-03: M(1)P
animateMotion with animated cubic path:
Two circles are moved along an animated cubic path with a duration of 30s and repetition. The animation of the path has a duration of 37s. The initial path is dark bluegray, the final path is light bluegray, the animated path is gray. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail path not animated
Opera8.02/50fail path not animated
Opera9tp1fail animated path wrong and ignored
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail path not animated

e2007-04-06-01: M(1)P
animateMotion with animated cubic path:
A blue rectangle and a red circle are moved along a light blue path with a duration of 20s and 3 repetitions. The path itself is changed with each repetition. This results in a motion along the gray path. The rectangle is aligned along both paths. The circle is always covered by the path given in gray. The rectangle covers always a red rectangle with the same motion gained with three animateMotion using path attributes. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail path not animated, blue circle too large
Opera8.02/50fail path not animated
Opera9tp1fail wrong timing for path animation, does not follow animated path
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail path not animated

e2005-09-14-04: M(1)P
animateMotion with animated quadratic path:
Two circles are moved along an animated quadratic path with a duration of 30s and repetition. The animation of the path has a duration of 37s. The initial path is dark bluegray, the final path is light bluegray, the animated path is gray. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail path not animated
Opera8.02/50fail wrong animated path and motion does not follow the animated path
Opera9tp1fail motion does not follow the animated path
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail path not animated

e2007-04-04-01: M(1)P
animateMotion with animated linear path:
A blue rectangle and a red circle are moved along a light blue path with a duration of 30s. The path itself is animated. This results in a motion along the gray path. The rectangle is aligned along both paths. The circle is always covered by the path given in gray. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail path not animated, blue circle too large
Opera8.02/50/ 9tp1fail motion does not follow the animated path
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail path not animated

e2007-04-05-01: M(1)P
animateMotion with animated linear path:
A blue rectangle and a red circle are moved along a light blue path with a duration of 30s. The path itself is animated. This results in a motion along the gray path. The rectangle is aligned along the thin light blue path, not along the thick gray path! The circle is always covered by the path given in gray. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobefail minor accuracy problems
Squiggle 1.7fail path not animated, blue circle too large
Opera8.02/50/ 9tp1fail motion does not follow the animated path
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail path not animated

This is SVG1.1 or -basic, but not SVG-tiny -
e2005-10-12-01: M(1)PX
animateMotion with an external path:
Two circles are moved along a cubic path, referenced from the file animatemotionmpath01.svg with a duration of 30s and repetition. The path is given with the mpath element. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail no animation
Adobefail attribute ignored
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10fail attribute ignored
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00(ok) minor timing problem in the beginning with alpha
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Test results for mpath
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/7 0/8
KSVG1 0/7 0/8
WebKit 528.16 7/7 7/8
Adobe 6/7 6/8
Squiggle 1.7 2/7 3/8
Opera8.02/50 2/7 2/8
Opera9tp1 1/7 1/8
Opera9tp2/beta1/2/ 9.00/9.10 7/7 7/8
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 7/7 8/8
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 3/7 3/8

path attribute

e2005-09-14-05: M(1)P
animateMotion with path attribute:
Two circles are moved along a cubic path with a duration of 30s and repetition. The path is given with the path attribute. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

values

e2005-09-14-06: M(1)P
animateMotion with values:
Two circles are moved along a square given with values with a duration of 30s and repetition. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

to

e2005-09-14-07: M(1)P
animateMotion with from to:
Two circles are moved from top left to bottom right using from and to with a duration of 30s and repetition. The visible effect is a motion along the given gray path. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2006-06-03-03: M(1)P
animateMotion and frozen to animation:
Test of the correct additive default behaviour of to animations. A circle moves on a quadratic path using two to animateMotionss in x direction and one simple animate for cy. The animation for cy and the first to animation for x is repeated two time, the second to animation for x just 1.5 times. Note that the second to animation is frozen on the half way. Because it has higher priority, the whole animation in x is frozen. The path is given in gray for comparison, thin line for the first turn, thick line for the second turn. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail first animateMotion ignored
WebKit 528.16fail no animation in x direction
Adobefail first animateMotion ignored
Squiggle 1.7fail no animation, wrong error messages
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail first animateMotion ignored
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail first animateMotion ignored

e2006-06-03-04: M(1)P
animateMotion and to:
Two blue circles are moved to one position marked with a gray circle, using animateMotion with to for a translation to the absolute final value. Two red circles are animated as simple references just for comparison. If the red circles become visible, the animation of the blue circles is wrong. Note that to animations have a special additive behaviour, defined in detail into the SMIL recommendation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail animateMotion ignored
WebKit 528.16fail wrong animation
Adobefail always additive sum
Squiggle 1.7fail no animation, wrong error messages
Opera8.02/50/ 9beta1fail always additive replace
Opera9tp1/2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong animation

by

e2005-09-14-08: M(1)P
animateMotion with by:
Two circles are moved from top left to bottom right using by with a duration of 5s and a repeatCount of 8. The visible effect is a motion along the given gray path. If something red becomes visible, an error occurred. If something dark red becomes visible, the behaviour for animateTransform is wrong too.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail no animation
WebKit 528.16fail not additive
Adobeok -
Squiggle 1.7fail funny error messages 1 >=1 stops animation
Opera8.02/50fail animation ok, only the control animation is wrong
Opera9tp1/2/ beta1fail wrong animation, ignores accumulate
Opera9 beta2/ 9.00/9.10fail animateTransform for comparison not additive
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-09: M(1)P
animateMotion with by:
Two circles are moved from left to right, the dark blue one with animateMotion, the light blue one with animateTransform. Both are using the same values for by, accumulate and repeatDur resulting in the same animation. If something red becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail not additive
Adobeok -
Squiggle 1.7fail funny error messages 1 >=1 stops animation
Opera8.02/50fail animateTransform not animated
Opera9tp1/2/ beta1fail animateTransform not animated and accumulate ignored or for tp2 and beta1 wrong animation
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-09-29-01: M(1)P
animateMotion with by:
Test whether a by animateMotion is additive or not. Red indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52fail not additive
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

Override Rules

e2007-01-30-01: M(1)P
animateMotion override rules:
A circle is moved along a simple path indicated in gray. The path is given with the mpath element. Another path is given with the path element. Additionally the attributes values, from, to and by are given. The override rules specifies the mpath as the path to follow. The others are ignored. If the red center of the circle becomes visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong path
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-01-30-02: M(1)P
animateMotion override rules:
A circle is moved along a simple path indicated in gray. The path is given with the path attribute. Additionally the attributes values, from to and by are given. The override rules specifies the path attribute as the path to follow. The others are ignored. If the red center of the circle becomes visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong path
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-01-30-03: M(1)P
animateMotion override rules:
A circle is moved along a simple path indicated in gray. The path is given with the values attribute. Additionally the attributes from to and by are given. The override rules specifies the values attribute as the path to follow. The others are ignored. If the red center of the circle becomes visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong path
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-01-30-04: M(1)P
animateMotion override rules:
A circle is moved along a simple path indicated in gray. The path is given with the from and to attributes. Additionally the attribute by is given. The override rules specifies by to be ignored. If the red center of the circle becomes visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong path
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Test results for Override Rules
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/4 0/4
KSVG1 0/4 0/4
WebKit 528.164/4 4/4
Adobe 4/4 4/4
Squiggle 1.7 4/4 4/4
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 4/4 4/4
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 4/4 4/4

rotate

e2005-09-14-10: M(1)Q
animateMotion with rotate auto:
Two circles are moved along a quadratic path with a duration of 30s and repetition. A closed path is given with the mpath element. The rotate attribute is auto, this means for this animation the circle group is rotated once for one repetition. The small light blue circle is oriented relative to the large blue circle in motion direction. Normally the light blue circle is not exactly centered below the path, but close to it.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-11: M(1)Q
animateMotion with rotate auto-reverse:
Two circles are moved along a quadratic path with a duration of 30s and repetition. A closed path is given with the mpath element. The rotate attribute is auto-reverse, this means for this animation the circle group is rotated once for one repetition. The small light blue circle is oriented relative to the large blue circle in opposite motion direction. Normally the light blue circle is not exactly centered below the path, but close to it.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-12: M(2)Q
animateMotion with rotate:
Two circles are moved along a quadratic path with a duration of 30s and repetition. A closed path is given with the mpath element. The rotate attribute is 30, this has the same effect as a rotation of the group with the same angle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-04-03-01: M(1)P
animateMotion with rotate:
Two blue rectangles and a red circle are moved along a path with a duration of 30s with rotate auto, then 30s with rotate auto-reverse, then 30s with a fixed angle for rotate. This means for this animation the rectangles are first aligned along the path, then aligned in the reverse direction, then with a fixed angle. The circle is always covered by the path given in gray. Red rectangles animated with animateTransform have the same motion as the blue and are always completely covered by the blue rectangles. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail rotate ignored in later animations
Adobeok -
Squiggle 1.7fail wrong sized blue circle, wrong error messages stop animation at the end of the top path
Opera8.02/50fail minor timing problems at the end of some path fragments
Opera9tp1fail wrong animation
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0fail wrong timing
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2011-01-27-01: M(1)P
animateMotion with rotate:
The rotation related to the animateMotion attribute rotate is a supplemental transformation matrix onto the CTM and the animateMotion translation.
What does it mean for the order the transformations are applied? This can be simulated with nested g elements.
The test case here is a group with a blue rectangle and a circle. The circle is centered at the origin.
The intended effect of the rotate attribute value 'auto' is here to align the rectangle along the path, the larger part of the rectangle in motion direction.
A red comparison together with the gray motion path is available. This is realised with additional nested g elements and alternatively with additive animation, in both cases one for each transformation animation.
The red comparison has to be completely covered, therefore not visible, else an error has occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail rotate ignored
KSVG1fail no animation
WebKit 528.16fail rotate ignored
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ok -
Opera9tp1fail wrong timing
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2011-01-28-01: M(1)P
animateMotion with rotate:
If animateMotion and animateTransform act on the same element, the animateMotion is a supplemental transformation matrix onto the CTM of the animateTransform. The rotation related to the animateMotion attribute rotate is a supplemental transformation matrix onto the CTM and the animateMotion translation.
What does it mean for the order the transformations are applied? This can be simulated with nested g elements.
The test case here is a group with a blue rectangle and a circle. The circle is centered at the origin. This group is additionally skewed with an animateTransform. The intended effect of the rotate attribute value 'auto' is here to align the rectangle along the path, the larger part of the rectangle in motion direction.
The motion path is given in gray for comparison. A red comparison has to be completely covered, therefore not visible, else an error has occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail rotate and animateTransform ignored
KSVG1fail no animation
WebKit 528.16fail wrong order, rotate ignored, no animation of test
Adobefail wrong order
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong order
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong order

e2011-01-29-01: M(1)P
animateMotion with rotate:
If animateMotion and animateTransform act on the same element, the animateMotion is a supplemental transformation matrix onto the CTM of the animateTransform.
The rotation related to the animateMotion attribute rotate is a supplemental transformation matrix onto the CTM and the animateMotion translation.
What does it mean for the order the transformations are applied? This can be simulated with nested g elements.
The test case here is a group with a blue rectangle and a circle. The group is skewed and mirrored at the y-axis with a transform of the scale type. The circle is centered at the origin.
This group is additionally skewed with an animateTransform. The intended effect of the rotate attribute value 'auto' is here to align the rectangle along the path, the larger part of the rectangle in motion direction.
The motion path is given in gray for comparison. A red comparison has to be completely covered, therefore not visible, else an error has occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail rotate and animateTransform ignored
KSVG1fail no animation
WebKit 528.16fail wrong order, rotate ignored
Adobefail wrong order
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong order
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong order

e2011-01-30-01: M(1)P
animateMotion with rotate:
The rotation related to the animateMotion attribute rotate is a supplemental transformation matrix onto the CTM and the related animateMotion translation. animateMotion can be additive, therefore rotate is supplemental to each single animateMotion, not for the complete motion.
What does it mean for the order the transformations are applied? This can be simulated with nested g elements.
The test case here is a group with a blue rectangle and a circle. The circle is centered at the origin.
The intended effect of the rotate attribute value 'auto' is here to align the rectangle along the path for each motion separately, therefore the rectangle is typically not aligned along the superposition of the additive motions.
A red comparison together with the gray motion path is available. This is realised with additional nested g elements and alternatively with additive animation, in both cases one for each animation.
The red comparison has to be completely covered, therefore not visible, else an error has occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail animateTransform ignored, animateMotion wrong
KSVG1fail no animation
WebKit 528.16fail wrong order
Adobeok -
Squiggle 1.7fail wrong additive rotate
Opera8.02/50/ 9tp1/ 9beta1fail wrong order
Opera9tp2/ 9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2011-01-31-01: M(1)P
animateMotion with rotate:
The rotation related to the animateMotion attribute rotate is a supplemental transformation matrix onto the CTM and the animateMotion translation.
What does it mean for the order the transformations are applied? This can be simulated with nested g elements.
The test case here is a group with a blue rectangle and a circle. The circle is centered at the origin.
The intended effect of the rotate attribute value 'auto' is here to align the rectangle along the path, the larger part of the rectangle in motion direction.
A red comparison together with the gray motion path is available. This is realised with additional nested g elements and alternatively with additive animation, in both cases one for each transformation animation.
The red comparison has to be completely covered, therefore not visible, else an error has occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail animateTransform ignored, animateMotion wrong
KSVG1fail no animation
WebKit 528.16fail rotate ignored
Adobeok -
Squiggle 1.7fail wrong rotate
Opera8.02/50fail no additive animateTransform
Opera9tp1/tp2fail wrong order
Opera9beta1fail no animateMotion
Opera9beta2/ 9.00/9.10fail wrong additive, cumulative animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2011-02-01-01: M(1)P
animateMotion with rotate:
If animateMotion and animateTransform act on the same element, the animateMotion is a supplemental transformation matrix onto the CTM of the animateTransform. The rotation related to the animateMotion attribute rotate is a supplemental transformation matrix onto the CTM and the animateMotion translation.
What does it mean for the order the transformations are applied? This can be simulated with nested g elements.
The test case here is a group with a blue rectangle and a circle. The group is skewed and mirrored at the y-axis with a transform of the scale type. The circle is centered at the origin. This group is skewed after 5s with an animateTransform, replacing the initial skewing and mirroring. The intended effect of the rotate attribute value 'auto' is here to align the rectangle along the path, the larger part of the rectangle in motion direction.
The motion path is given in gray for comparison. A red comparison has to be completely covered, therefore not visible, else an error has occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail rotate and animateTransform ignored
KSVG1fail no animation
WebKit 528.16fail wrong order, rotate ignored
Adobefail wrong order
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong order
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong order
Test results for rotate
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/10 0/10
KSVG1 0/10 0/10
WebKit 528.16 3/10 3/10
Adobe 7/10 7/10
Squiggle 1.7 7/10 7/10
Opera8.02/50 4/10 4/10
Opera9tp1 3/10 3/10
Opera9tp2/ 9beta2/ 9.00/9.10 6/10 6/10
Opera9beta1 5/10 5/10
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 7/10 7/10
Gecko 2.0 6/10 6/10
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0 7/10 7/10

calcMode

calcMode linear

e2007-01-26-01: M(1)P
linear animateMotion:
Comparing linear animateMotion with animateTransform for a rectangle. animateTransform is blue and covers completely the red animateMotion. Dark red uses the mpath element, light red the path attribute and red values. The path consists of a triangle indicated in gray. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail calcMode ignored
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2007-01-26-02: M(1)P
linear animateMotion:
Comparing linear animateMotion with animateTransform for a rectangle. animateTransform is blue and covers completely the red animateMotion. Dark red uses the mpath element, light red the path attribute and red values. The path consists of a triangle indicated in gray. The paths are using explicitely the command Z to close the path. In a linear animation the Z command consumes time too, even if the length of the subpath is zero. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail calcMode ignored
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta2/ 9.00/9.10fail wrong timing for paths including Z (of length zero for Opera8, for 9 if the length is not zero)
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2007-01-28-01: M(1)P
linear animateMotion:
Comparing linear animateMotion with animateTransform for a rectangle. animateTransform is blue and covers completely the red animateMotion. Dark red uses the mpath element, light red the path attribute and red values. The path consists of three simple lines as subpaths indicated in gray. Except the initial M command the other M commands do not count for the timing of the linear animation. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1failwrong animation
KSVG1fail no animation
WebKit 528.16fail calcMode ignored
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong timing, different nonsense in 8, 9tp1 and 9tp2 and later
Gecko 2.0fail wrong timing
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-01-26-03: M(1)P
linear animateMotion:
Linear animateMotion with symmetric quadratic and qubic paths are compared for two rectangles. The blue linear animateMotion along one path is compared with two red paced animateMotion for each rectangle. The blue animations cover completely the red animateMotion. Due to symmetries there are additional things to compare, because the velocity of one rectangle is exactly twice the velocity of the other slower rectangle. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail calcMode ignored
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail wrong timing
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-05-12-01: M(1)P
linear animateMotion:
A linear animateMotion of a blue stroked square with a centered circle is compared with four animateMotion of a red square with a centered circle.
The motion of the red square is following the combination of four animateMotion following on each other and is the same as the motion of the blue square, because the timing is choosen in such a way. Therefore the blue square covers always the red one completely.
The path is given in gray. The red fill of the circle is always covered with the gray path.
Eight gray stroked markers are lightened, when the circle is exactly above the marker. The red fill of the marker is exactly covered by the blue stroked circle. If something red gets visible, an error is occurred and the animateMotion is not linear.
The exact timing is calculated using an analytical integration of the path length of the sub paths (this is available for quadratic or linear curves). With this method the path position and the time can be determined as functions of the usual parametrisation of the used Bézier curves.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animateMotion
KSVG1fail no animateMotion
WebKit 528.16fail calcMode ignored
Adobefail minor accuracy problems
Squiggle 1.7(ok) (accuracy could be slightly better)
Opera8.02/50fail wrong timing (only first path fragment used)
Opera9tp1fail wrong paths
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong timing
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-12-12-01: M(1)P
linear animateMotion:
A path with several path fragments of zero length is used for a linear animateMotion of a blue square. The path is given in gray, some simpler animateMotion elements are used to perform the same motion for a red square exactly below the blue one. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1failjust one animateMotion for the red square
KSVG1fail no animateMotion
WebKit 528.16fail calcMode ignored
Adobeok -
Squiggle 1.7fail animation stops with wrong error messages with zero length path fragments
Opera8.02/50/ 9tp1/2 / beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail path fragments of zero length ignored
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail path fragments of zero length ignored, wrong timing

This is not SVG tiny 1.1, but SVG 1.1:
e2007-01-26-04: M(1)P
linear animateMotion:
Comparing linear animateMotion with animateTransform for a circle as a path for a rectangle. animateTransform is red and covered completely by the blue animateMotion. The path consists of three parts respectively two rotations of 90 degree and a final of 180 degree back to the initial position. The paths are indicated in gray. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail calcMode ignored
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail no animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong timing (stop and go for beta2 and later)
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

calcMode discrete

e2005-09-14-13: M(1)P
animateMotion with calcMode discrete:
A circle is moved discrete along a cubic path with a duration of 30s and repetition. The path is given with the path attribute. Gray marks show the control points as the positions of discrete animation. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail calcMode ignored
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail minor position problems
Opera9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-14: M(1)P
compare set and calcMode discrete:
animateMotion with calcMode discrete is compared with set animations. A red circle with a radius of 200 is set in several steps each 3s from left to right. A blue circle with a radius of 200 covers the red circle and is animated with calcMode discrete resulting in the same motion. Therefore the blue circle covers always perfectly and completely the red circle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no discrete animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ok -
Opera9tp1fail wrong timing
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-12-13-01: M(1)P
calcMode discrete and path fragments of zero length:
A path with several path fragments of zero length is used for a discrete animateMotion of a blue square. The path is given in gray, some simpler animateMotion elements are used to perform the same jumps for a red square exactly below the blue one. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no discrete animation
WebKit 528.16fail calcMode ignored
Adobefail slightly wrong timing
Squiggle 1.7fail no animation, wrong error messages
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong timing
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong timing

calcMode paced

calcMode paced is the default behaviour for animateMotion, there are more tests for this in other subsections.

e2007-03-03-01: M(1)P
paced animateMotion:
A paced animateMotion of a blue square with a centered circle is compared with three animateMotion of a red square with centered circle. The motion of the red square is following the combination of three animateMotion following on each other is the same as the motion of the blue square, because the timing is choosen in such a way. Therefore the blue square covers always the red one completely.
The path is given in gray. The background colors are switched at some symmetry times, these are the time, when 50 percent of a subpath is passed.
If something red gets visible, an error is occurred.
The timing is determined using the pathLength of the top fragment of 800, the bottom of 1600 and for the curved fragment an approximate value of 1809.55, leading to an accuracy of the comparison of better than 0.1 units in the local coordinate system corresponding to a timing accuracy better than 0.001s. Note that the top and bottom path fragments are noted as non trivial cubic beziers too, but looking like simple lines or polylines.
The test is not sensitive to deviations for the motion within the curved fragment, only for the complete path, if the viewer estimate of the pathLength for a path fragment is wrong for example.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobefail minor timing problems in the top and bottom fragments
Squiggle 1.7(ok) accuracy could be slightly better
Opera8.02/50fail minor timing problems at the end of fragments
Opera9tp1fail wrong paths
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0fail wrong timing
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-05-07-01: M(1)P
paced animateMotion:
A paced animateMotion of a blue stroked square with a centered circle is compared with four animateMotion of a red square with a centered circle.
The motion of the red square is following the combination of four animateMotion following on each other and is the same as the motion of the blue square, because the timing is choosen in such a way. Therefore the blue square covers always the red one completely.
The path is given in gray. The red fill of the circle is always covered with the gray path. Eight gray stroked markers are lightened, when the circle is exactly above the marker. The red fill of the marker is exactly covered by the blue stroked circle. If something red gets visible, an error is occurred and the animateMotion is not paced.
The exact timing is calculated using an analytical integration of the path length of the sub paths (this is available for quadratic or linear curves). With this method the path position and the time can be determined as functions of the usual parametrization of the used Bzier curves.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail last path fragment with zero length ignored
Adobefailwrong timing due to last path fragment with zero length and minor further timing problems
Squiggle 1.7fail wrong error messages at the end, last path fragment with zero length ignored
Opera8.02/50fail minor timing problems at the end of fragments and with the last path fragment with zero length
Opera9tp1fail wrong paths
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail last path fragment with zero length ignored
Gecko 2.0fail wrong timing
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail last path fragment with zero length ignored

e2007-12-14-01: M(1)P
calcMode paced and path fragments of zero length:
A path with several path fragments of zero length is used for a paced animateMotion of a blue square. The path is given in gray, some simpler animateMotion elements are used to perform the same motion for a red square exactly below the blue one. Because the motion is paced, the zero length fragments are effectively ignored. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animateMotion
WebKit 528.16ok -
Adobefail wrong timing
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail wrong timing
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0fail wrong timing
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

This is not SVG tiny 1.1, but SVG 1.1:
e2007-01-26-05: M(1)P
paced animateMotion:
Comparing paced animateMotion with animateTransform for a circle as a path for a rectangle. animateTransform is red and covered completely by the blue animateMotion. The path consists of three parts respectively two rotations of 90 degree and a final of 180 degree back to the initial position. The paths are indicated in gray. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7(ok) accuracy could be slightly better
Opera8.02/50fail no animateTransform, wrong animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

calcMode spline

This is not SVG tiny 1.1, but SVG 1.1:
e2007-01-26-06: M(1)P
spline animateMotion:
Comparing spline animateMotion with animateTransform for a circle as a path for a rectangle. animateTransform is red and covered completely by the blue animateMotion. The path consists of three parts respectively two rotations of 90 degree and a final of 180 degree back to the initial position. The paths are indicated in gray. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail calcMode ignored
Adobeok -
Squiggle 1.7(ok) accuracy could be slightly better
Opera8.02/50fail no animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong timing
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-01-26-07: M(1)P
spline animateMotion:
Comparing spline animateMotion with animateTransform for a rectangle. animateTransform is blue and covers completely the red animateMotion. Dark red uses the mpath element, light red the path attribute and red values The path consists of a triangle indicated in gray. The paths are using explicitely the command Z to close the path. In a linear animation the Z command consumes time too, even if the length of the subpath is zero. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail calcMode ignored and some more confusions
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9beta2/ 9.00/9.10fail wrong timing for paths including Z (of length zero for Opera8, for 9 if the length is not zero)
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Test results for calcMode
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/13 0/16
KSVG1 0/13 0/16
WebKit 528.16 3/13 4/16
Adobe 8/13 11/16
Squiggle 1.7 10/13 13/16
Opera8.02/50 2/13 2/16
Opera9tp1 6/13 6/16
Opera9tp2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 8/13 9/16
Opera9 beta2/ 9.00/9.10 6/13 7/16
Gecko 2.0 7/13 10/16
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0 10/13 13/16

keyPoints

e2005-09-14-21: M(2)P
animateMotion with calcMode linear and discrete and keyPoints:
Three circles are moved along a cubic path with a duration of 30s and repetition. The calcMode of the dark blue circle is paced for comparison, the calcMode of the light blue circle is linear, the calcMode of the small blue circle is discrete. Light gray circles just show the control points of the path, not relevant for the timing of the discrete or linear animation. The linear and the discrete animations have keyPoints from 0 to 1 in steps of 0.1. For the discrete animation this means 10 equidistant steps along the path, marked as dark gray gaps in the gray path. Because the path is divided in 10 equidistant steps, the linear animation is almost the same as paced, but not exactly. It will join the paced animation with each of the 10 steps again exactly.
e2006-09-11-01: M(2)P
animateMotion with calcMode linear and discrete and keyPoints:
The same animation as before, using path attribute instead of mpath element.
e2006-02-11-10: M(2)P
animateMotion with calcMode linear and discrete and keyPoints and pathLength:
The same animation as before, just with defined pathLength.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail no animation
WebKit 528.16fail calcMode and KeyPoints ignored
Adobefail attribute ignored
Squiggle 1.7failonly the pathLength in the last sample ignored
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10fail attribute ignored
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0failonly the pathLength in the last sample ignored
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-09-14-22: M(1)P
animateMotion and animateTransform with calcMode discrete and keyPoints:
A discrete animateMotion from left to right is superposed by a discrete animateTransform from top to bottom. keyPoints are given in steps of 10 percent. The duration of the animations is 30s. Gray points display the positions of the discrete animations. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong frozen value
Adobefail attribute ignored
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10fail attribute ignored
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-23: M(1)P
animateMotion and animateTransform with calcMode linear and keyPoints:
A linear animateMotion from left to right is superposed by a linear animateTransform from top to bottom. keyPoints are given with a quadratic curve. The duration of the animations is 30s. The visible effect is a motion along the given gray path. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobefail attribute ignored
Squiggle 1.7ok -
Opera8.02/50fail confused animation
Opera9tp1/2/ beta1/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9 beta2fail short disturbances
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-24: M(1)P
animateMotion and animateTransform with calcMode linear and keyPoints:
A linear animateMotion from left to right is superposed by a linear animateTransform from top to bottom. keyPoints are given with a quadratic curve. The duration of the animations is 30s. The motion path is given with from and to. The visible effect is a motion along the given gray path. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobefail no animateMotion
Squiggle 1.7ok -
Opera8.02/50fail confused animation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-25: M(1)P
animateMotion with values, calcMode discrete and keyPoints:
A discrete animateMotion 'House of Nikolaus'. The motion path is given as a values list. But the keyPoints list is twice as long as the values list. They are marked with dark gray dashes. This means, the points of discrete animation are not only the edges of the house, they are mainly between. Because the lines have different length but the keyPoints are equidistant, they will not meet the values in general. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail wrong keyPoint positions
Adobefail attribute ignored
Squiggle 1.7fail pathLength ignored (animation may be ok)
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10fail attribute ignored
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0fail pathLength ignored (animation may be ok)
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-02-03-01: M(1)PA
animateMotion used for positioning along a path:
A fraction of 0.5 of a path is marked with circles using animateMotion and keyPoints. Each circles is positioned using a slightly other method, but always the blue stroked circle has to cover the red ones. The red fill of the blue stroked is covered with a gray mark using stroke-dasharray and pathLength to indicate the fraction of 0.5. Because the path is mirror-symmetrical, the correct position is indicated too with a background divided in a white and a light gray half. If something red becomes visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animateMotion
KSVG1fail no animateMotion
WebKit 528.16fail no animation
Adobefail several attributes ignored
Squiggle 1.7fail curious error messages, no animation
Opera8.02/50failseveral attributes ignored
Opera9tp1/2/ beta1/2/ 9.00/9.10fail just one testcase almost ok
Opera9.50 alpha/beta/ 9.52fail interpretation incomplete
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail no animation
Gecko 2.0fail pathLength ignored
Gecko 8.0/ 12.0/ 24.0ok-
Gecko 36.0/ 48.0fail no animation

e2007-02-03-02: M(2)P
animateMotion with non monotonuous keyPoints list:
A non monotonuous keyPoints list is used to define an oszillatory motion along a path. The turning points of motion are marked in gray on the gray path using stroke-dasharray and pathLength. The center of the moved circle has to meet these marks exactly as turning points of the motion. Because path and keyPoints are mirror-symmetrical, the markers are symmetrical too. As an additional help the background is divided in a white and a light gray half. If something red becomes visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animateMotion
KSVG1fail no animateMotion
WebKit 528.16fail pathLength ignored (animation may be ok)
Adobefail no animateMotion and pathLength
Squiggle 1.7fail pathLength ignored (animation may be ok)
Opera8.02/50failconfused
Opera9tp1/2/ beta1/2/ 9.00/9.10fail pathLength ignored (animation may be ok)
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0fail pathLength ignored (animation may be ok)
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2007-05-12-11: M(2)P
discrete animateMotion with non monotonuous keyPoints list:
A discrete animateMotion with keyPoints of a blue stroked square with a centered circle is compared with a values animateMotion of a red square with a centered circle.
The motion of the red square is the same as the motion of the blue square, because the timing is choosen in such a way. Therefore the blue square covers always the red one completely.
The path is given in gray. The red fill of the circle is always covered with the gray path. Eight gray stroked markers are lightened, when the circle is exactly above the marker. The red fill of the marker is exactly covered by the blue stroked circle. If something red gets visible, an error is occurred and the animateMotion is wrong.
The exact timing is calculated using an analytical integration of the path length of the sub paths (this is available for quadratic or linear curves). With this method the path position can be determined as function of the usual parametrisation of the used Bézier curves.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animateMotion
KSVG1fail no animateMotion
WebKit 528.16fail wrong frozen value
Adobefail no animateMotion with keyPoints
Squiggle 1.7failwrong final value, minor accuracy problems with some points
Opera8.02/50failonly first path fragment used, keyPoints ignored
Opera9tp1/2/ beta1/2/ 9.00/9.10failkeyPoints ignored
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

This is not SVG tiny 1.1, but SVG 1.1:
e2007-02-01-01: M(1)P
compare animateMotion and animateTransform:
Comparing linear animateMotion using keyPoints with animateTransform for a circle as a path for a rectangle. animateTransform is red and covered completely by the blue animateMotion. The path consists of three parts respectively two rotations of 90 degree and a final of 180 degree back to the initial position. The paths are indicated in gray. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail no animation of test case
Adobefail keyPoints ignored
Squiggle 1.7(ok) minor accuracy problems
Opera8.02/50fail no animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong timing (stop and go for beta2 and later)
Gecko 2.0/ 8.0/ 12.0/ 24.0ok-
Gecko 36.0/ 48.0fail no animateMotion

This is not SVG tiny 1.1, but SVG 1.1:
e2007-02-01-02: M(1)P
compare animateMotion and animateTransform:
Comparing discrete animateMotion using keyPoints with animateTransform for a circle as a path for a rectangle. animateTransform is red and covered completely by the blue animateMotion. The path consists of three parts respectively two rotations of 90 degree and a final of 180 degree back to the initial position. The paths are indicated in gray. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail no animation of test case
Adobefail keyPoints ignored
Squiggle 1.7(ok) minor accuracy problems
Opera8.02/50fail no animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail keyPoints ignored
Gecko 2.0/ 8.0/ 12.0/ 24.0ok-
Gecko 36.0/ 48.0fail no animateMotion
Test results for keyPoints
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/8 0/10
KSVG1 0/8 0/10
WebKit 528.16 2/8 2/10
Adobe 0/8 0/10
Squiggle 1.7 3/8 5/10
Opera8.02/50 0/8 0/10
Opera9tp1/2/ beta1/ 9.00/9.10 2/8 2/10
Opera9 beta2 1/8 1/10
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 7/8 7/10
Gecko 2.0 4/8 6/10
Gecko 8.0/ 12.0/ 24.0 8/8 10/10
Gecko 36.0/ 48.0 7/8 7/10

keyTimes

e2008-02-26-01: M(1)P
animateMotion with keyTimes:
Some circles are moved along a square with a duration of 30s. All have the same timing, therefore the top blue circles cover the other red ones. The blue ones use a simple path referenced by mpath or the same path using the path attribute or values, all with keyTimes and calcMode linear. The red circles below use values and either keyTimes with animateTransform or a group separated animateMotion resulting in the same timing for comparison. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail calcMode ignored
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong timing
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2008-02-27-01: M(1)P
animateMotion with keyTimes:
Some circles are moved along a path with a duration of 30s. All have the same timing, therefore the top blue circles cover the other red ones. The blue ones use a simple path referenced by mpath or the same path using the path attribute, all with keyTimes and calcMode linear. The red circles below use path and a group separated animateMotion resulting in the same timing for comparison. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail calcMode ignored
Adobeok -
Squiggle 1.7fail confused with path with multiple M/m commands
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong timing
Gecko 2.0fail confused with path with multiple M/m commands
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2008-02-28-01: M(1)P
animateMotion with keyTimes:
Some circles jump a few times along a path with a duration of 30s. All have the same timing, therefore the top blue circles cover the other red ones. The blue ones use a simple path referenced by mpath or the same path using the path attribute or a simple path given with values, all with keyTimes and calcMode discrete. The red circles below use path and a group separated animateMotion resulting in the same timing for comparison. If something red circles gets visible, an error is occurred. Note, that control points and M/m commands except the initial from the path do not contribute as jump points, therefore there are exactly 5 jump points for each path.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail calcMode ignored
Adobefail wrong timing
Squiggle 1.7fail confused with path with multiple M/m commands
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong timing
Gecko 2.0/ 8.0/ 12.0/ 24.0fail confused with path with multiple M/m commands
Gecko 36.0/ 48.0ok -

e2005-09-14-31: M(2)Q
animateMotion with keyPoints and keyTimes:
Three circles are moved along a cubic path with a duration of 30s and repetition. The blue and the light blue animations have keyPoints from 0 to 1 in steps of 0.1. For the discrete animation this means 10 equidistant steps along the path, marked as dark gray gaps in the gray path. The dark blue one has the calcMode linear, the light blue one has keyPoints and keyTimes lists and calcMode linear with the effect of enlarged velocities. Additionally the blue is a discrete animation with the same keyPoints and keyTimes.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobefail two circles not animated
Squiggle 1.7ok -
Opera8.02/50fail completely confused motions
Opera9tp1/2/ beta1/2/ 9.00/9.10fail keyPoints ignored for discrete animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-32: M(1)P
animateMotion with keyPoints and keyTimes:
A discrete animateMotion from left to right is superposed by a discrete animateTransform from top to bottom. keyPoints are given in steps of 10 percent corresponding to the given values. keyTimes has values from a quadratic curve. The duration of the animations is 30s. Gray points display the positions of the discrete animations. If the red center of the circle becomes visible, an error occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail no animation
WebKit 528.16fail wrong timing
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10fail attribute ignored
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-33: M(1)Q
animateMotion with keyPoints and keyTimes:
A linear animateMotion from left to right is superposed by a linear animateTransform from top to bottom. keyPoints and keyTimes have the same values from a quadratic curve. The duration of the animations is 30s. If the red center of the circle becomes visible, an error occurred. Note, that the velocity is enlarged with every keyTime.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail no animation
WebKit 528.16fail discrete animation
Adobefail attribute ignored
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-34: M(1)P
compare animate with animateMotion with keyPoints and keyTimes:
A linear animateMotion from left to right is superposed by a linear animate for cy (circle) from top to bottom. animateMotion has several keyPoints and keyTimes. The duration of the animations is 30s. The visible effect is a motion along the given gray path. If the red center of the circle becomes visible, an error occurred. Note, that the velocity is enlarged with every keyTime.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail no animateMotion
WebKit 528.16fail discrete animation
Adobefail attribute ignored
Squiggle 1.7ok -
Opera8.02/50fail confused
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

This is not SVG tiny 1.1, but SVG 1.1:
e2007-02-01-11: M(1)P
compare animateMotion and animateTransform:
Comparing linear animateMotion using keyPoints and keyTimes with animateTransform for a circle as a path for a rectangle. animateTransform is red and covered completely by the blue animateMotion. The path consists of three parts respectively two rotations of 90 degree and a final of 180 degree back to the initial position. The paths are indicated in gray. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobefail no animateMotion
Squiggle 1.7(ok) minor accuracy problems
Opera8.02/50fail no animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

This is not SVG tiny 1.1, but SVG 1.1:
e2007-02-01-12: M(1)P
compare animateMotion and animateTransform:
Comparing discrete animateMotion using keyPoints and keyTimes with animateTransform for a circle as a path for a rectangle. animateTransform is red and covered completely by the blue animateMotion. The path consists of three parts respectively two rotations of 90 degree and a final of 180 degree back to the initial position. The paths are indicated in gray. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong last value
Adobefail no animateMotion
Squiggle 1.7(ok) minor accuracy problems
Opera8.02/50fail no animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10fail keyPoints and KeyTimes ignored
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00failfrozen value wrong
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Test results for keyTimes
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/7 0/9
KSVG1 0/7 0/9
WebKit 528.16 1/7 2/9
Adobe 3/7 3/9
Squiggle 1.7 5/7 7/9
Opera8.02/50 1/7 1/9
Opera9tp1/2/ beta1/2/ 9.00/9.10 2/7 3/9
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 4/7 5/9
Gecko 2.0 5/7 7/9
Gecko 8.0/ 12.0/ 24.0 6/7 8/9
Gecko 36.0/ 48.0 7/7 9/9

keySplines

e2005-09-14-41: Q
animateMotion with calcMode spline:
Three circles are moved along a cubic path with a duration of 30s and repetition. The path is given with the mpath element. The magenta one has the calcMode paced for comparison, the blue one has calcMode spline, keyPoints, keyTimes and keySplines lists with the effect of deceleration to zero for the half of the path and acceleration to the initial velocity to the end. The yellow circle has the calcMode linear for comparison. The path has yellows gaps in the gray path as marks with 0.1 of the pathLength as difference between.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail calcMode linear ignored
Adobefail two circles not animated
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-42: P
animateMotion with calcMode spline:
Three circles are moved along a cubic path with a duration of 30s and repetition. The path is given with the mpath element. The magenta one has the calcMode paced, the blue one has calcMode spline, keyPoints, keyTimes and keySplines lists with the effect of deceleration to zero for the first quarter of the path and time and acceleration to the initial velocity to the end. The yellow one has the calcMode spline, keyPoints, keyTimes and keySplines lists with the effect of deceleration and acceleration to the initial velocity to the end. keyPoints are 0; 0.75; 1 and keyTimes are 0; 0.25; 1 This means deceleration in the first 6s to 75 percent of the pathLength and then acceleration for the remaining 24s to the end of the path. The path has yellows gaps in the gray path as marks with 0.25 of the pathLength as difference between.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobefail two circles not animated
Squiggle 1.7ok -
Opera8.02/50fail completely confused motions
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-09-14-43: M(1)PU
animateMotion with calcMode spline:
This is the same animation as with animateTransform and keySplines in the keySplines subsection.
A motion with a constant force, for example in the gravitation-field of the earth close above the surface (not in space and without friction) can be simulated with spline calcMode, values, keyTimes and keySplines exactly. The trajectory is a parabola, shown here independently as a quadratic Bezier curve exactly to enable a precise test of the spline animation of the blue circle with the red center. The red part is exactly centered behind the gray path and not visible, if the animation is correct. The animation is a superposition of two independent motions - a horizontal motion with constant velocity and a vertical motion with constant acceleration and an initial velocity unequal zero.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7(ok) minor accuracy problems
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00(ok) accuracy could be better, test could be fail too...
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0ok -
Gecko 24.0fail circle vanished

e2005-09-14-44: M(1)PU
animateMotion with calcMode spline:
This is the same animation as above, but it will be just correct displayed, if keyPoints are not ignored in combination with simple values.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail horizontal motion discrete
Adobefail keyPoints ignored
Squiggle 1.7(ok)see previous example
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00(ok) see previous example
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0ok -
Gecko 24.0fail circle vanished

e2005-09-14-45: M(1)PU
additive animateMotion with calcMode spline:
This is the same animation as above realized with additive animations. A motion with a constant force, for example in the gravitation-field of the earth close above the surface (not in space and without friction) can be simulated with spline calcMode, from, to and keySplines exactly. The trajectory is a parabola, shown here independently as a quadratic Bezier curve exactly to enable a precise test of the spline animation of the blue circle with the red center. The red part is exactly centered behind the gray path and not visible, if the animation is correct. The animation is a superposition of two independent motions - a horizontal motion with constant velocity and a vertical motion with constant acceleration and an initial velocity unequal zero.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail keySplines ignored
Squiggle 1.7(ok)see previous example
Opera8.02/50/ 9tp1/2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00(ok) see previous example
Opera9 beta1fail keySplines ignored
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-06-11-01: M(1)P
animateMotion with calcMode spline:
Advanced test for calcMode splines, keySplines using animateMotion.
A blue stroked circle is moved with seven different animateMotion using calcMode spline and keySplines. A parent group is animated linear with values animateMotion as a time axis to get to get a simple comparison.
The resulting trajectories are displayed within the active duration as gray paths. These paths cover always completely the red fill of the circle.
If the red center of the circle gets visible, an error is occurred.
The timing of the animateMotion is choosen in such a way, that the keySplines correspond directly to a cubic path as trajectory. The keySplines values have to be multiplied only with the related path data and combined with the values of the time axis, to get the new path data.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail keySplines for several subtests ignored
Adobefail keySplines ignored for from-to, wrong final value
Squiggle 1.7failwrong final value, minor accuracy problems
Opera8.02/50failminor interpolation problems and some jitter, nonsense with more than one M command, wrong final value
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00failnasty interpolation problems, nonsense with more than one M command, wrong final value up to beta2
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

This is not SVG tiny 1.1, but SVG 1.1:
e2007-02-02-01: M(1)P
compare animateMotion and animateTransform:
Comparing spline animateMotion using keyPoints with animateTransform for a circle as a path for a rectangle. animateTransform is red and covered completely by the blue animateMotion. The path consists of three parts respectively two rotations of 90 degree and a final of 180 degree back to the initial position. The paths are indicated in gray. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail test case not animated
Adobefail keyPoints ignored
Squiggle 1.7(ok) minor accuracy problems
Opera8.02/50fail no animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10fail keyPoints ignored
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong timing
Gecko 2.0/ 8.0/ 12.0/ 24.0ok -
Gecko 36.0/ 48.0fail no animateMotion

This is not SVG tiny 1.1, but SVG 1.1:
e2007-02-02-02: M(1)P
compare animateMotion and animateTransform:
Comparing spline animateMotion using keyPoints and keyTimes with animateTransform for a circle as a path for a rectangle. animateTransform is red and covered completely by the blue animateMotion. The path consists of three parts respectively two rotations of 90 degree and a final of 180 degree back to the initial position. The paths are indicated in gray. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobefail no animateMotion
Squiggle 1.7fail wrong final value
Opera8.02/50fail confused or no animateMotion
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Test results for keySplines
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/6 0/8
KSVG1 0/6 0/8
WebKit 528.16 2/6 3/8
Adobe 1/6 1/8
Squiggle 1.7 5/6 6/8
Opera8.02/50 4/6 4/8
Opera9tp1/2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 5/6 6/8
Opera9 beta1 4/6 5/8
Gecko 2.0/ 8.0/ 12.0 6/6 8/8
Gecko 24.0 4/6 6/8
Gecko 36.0/ 48.0 6/6 7/8

additive

e2007-06-13-01: M(1)P
from-to, from-by and by animateMotion compared with values animateMotion, additive or accumulate :
Compare from-to, from-by and by animateMotion with values animateMotion.
SMIL specifies, how from-to, from-by and by animations have to be converted into values animation. Therefore they have to be the same as the related values animation. The conversion is as follows:
from="a" to="b" ... values="a;b"
from="a" by="b" ... values="a;a+b"
by="a" ... values="0;a" additive="sum"
(by and from-by animations have only a meaning, if values can be added somehow. '0' is used as a general symbol for the neutral element of addition for the related attribute, this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the related attribute, '0' is a predecessor of '1' in the related attribute space. For animateMotion the '0' is no motion or is related to a translation given in coordinates: 0,0.)
The from-to, from-by and by are applied to animateMotion of different blue stroked paths and are compared with the related values animations including additive and cumulative hehaviour for underlying red paths. Additionally underlying dark red paths simulate the same behaviour using always the defaults additive replace and accumulate none. The blue paths cover all red paths. Therefore if something red gets visible, the test is failed.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong from-by animation
Squiggle 1.7fail no animation, wrong error messages
Opera8.02/50fail cumulative ignored, wrong by animation
Opera9tp1fail no animation
Opera9tp2fail wrong animation
Opera9beta1fail no cumulative animation
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52fail wrong by animation
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2007-05-06-01: M(1)P
additive animateMotion:
A circles is moved along some paths (two of them indicated in gray) with a duration of 30s using additive animateMotion. The superposition is no motion. The circle is positioned always at the bottom right. The colour of the circle switches from blue to gray after the animation is finished. If the red center of the circle becomes visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16ok -
Adobefail minor accuracy problems
Squiggle 1.7ok -
Opera8.02/50fail minor accuracy problems
Opera9tp1/2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9 beta1fail wrong animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

accumulate

e2006-05-07-11: M(1)P
accumulate animateMotion:
Circles are moved along squares given with the path attribute, repeatDur and accumulate with a repeatDur of 30s and repetition. Different values for the rotate attribute are given too, this has no visible effect, because centered circles are moved. If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail not cumulative
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10fail wrong animation with 8 and 9tp1 accumulate ignored with 9tp2, no animtion with 9beta1, wrong final value with 9beta2. Some nonsense related to the rotate attribute since 9tp1.
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

fill

e2007-12-15-01: M(1)P
frozen animateMotion:
The frozen value for animateMotion is tested for paths with last fragments with zero path length. The last value of the active duration is used as frozen value. If the last value is the last fragment with a path length of zero, this is choosen due to a specific rule in the top three subtests. In the bottom test the active duration is cut short with repeatDur without a specific rule, therefore the animation does not jump to one of the zero length fragments. The animateMotion moves blue squares, red squares with the same motion are covered always completely. The paths are given in gray.
If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail wrong frozen value
Adobefail wrong animation, wrong frozen values
Squiggle 1.7fail stops animation with wrong error messages
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong frozen values
Gecko 2.0fail wrong animation, wrong frozen values
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong frozen values

e2007-12-15-02: M(1)P
frozen linear animateMotion:
The frozen value for linear animateMotion is tested for paths with fragments with zero path length. The last value of the active duration is used as frozen value. If the last value is the fragment with a path length of zero, this is choosen. The animateMotion moves blue squares, red squares with the same motion are covered always completely. The paths are given in gray.
If something red gets visible, an error is occurred.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong animation and frozen values
Squiggle 1.7fail confused with the bottom samples; stops animation with wrong error messages
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong animation and frozen values
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail wrong animation, wrong frozen values
Test results for animateMotion
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/68 0/78
KSVG1 0/68 0/78
WebKit 528.16 27/68 30/78
Adobe 36/68 39/78
Squiggle 1.7 42/68 51/78
Opera8.02/50 20/68 20/78
Opera9tp1 27/68 29/78
Opera9tp2 38/68 41/78
Opera9 beta1 35/68 38/78
Opera9 beta2 /9.00/9.10 37/68 37/78
Opera9.50 alpha/beta/ 9.52 49/68 53/78
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 51/68 55/78
Gecko 2.0 44/68 53/78
Gecko 8.0/ 12.0 53/68 62/78
Gecko 24.0 51/68 60/78
Gecko 36.0/ 48.0 53/68 59/78