Examples and Tests for SVG Animation

Animation Attributes

In the chapter 'Animatable Attributes and Properties' we used simple animation for any attributes, now we animate more or less simple shapes in a more sophisticated way and with special attributes for animation.

Identify the target element, attribute or property

In general the target element of an animation is identified with an id-attribute in this element and a xlink:href attribute, referencing this id in the animation element.
If there is no xlink:href in an animation element, the animation targets the parent element of an animation element. Both is already tested in many examples in this project. Note that the namespace for XLink is required, if attributes with xlink:... are used. Other names but 'xlink' are possible, but inadvisable, if compatibility is to be achieved.

e2007-12-10-01: M(1)P
identify the target element:
After 3s the colour of four circles is set to blue. Different namespaces for xlink are choosen, one on the svg element, two locally on the set elements. The prefix xlink is defined for xmlns:xlink="http://www.w3.org/1999/xhtml" for test purposes only. The centered circle does not switch its colour to red, because the namespace does not fit. If the colour switches to (dark) red at 3s, the prefix is interpreted wrong.

Test results
user-agentresultcomment
W3C-ValidatorfailSVG tiny 1.1; in this case, the validator is not able to identify the modified prefix
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail wrong animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail wrong animation
Opera8.02/50fail wrong 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.0ok -

e2010-04-17-01: M(1)P
identify the target element:
Several methods to identify the animation target element, including an exotic case with an unusal prefix for the XLink namespace. All rectangles increase their heights. The smaller blue ones have to cover always the large red filled one with the dark blue stroke. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorfailSVG tiny 1.1; in this case, the validator is not able to identify the modified prefix
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.0ok -

The xlink:href attribute identifies the target element for an event too, if no fragment identifier is given. For example an animation element with xlink:href="#test" begin="click" means, that the click event is related to #test and not to the parent element of the animation element. To avoid identification problems, authors can always add a fragment identifier: begin="text.click".

e2007-03-14-01: IM(1)P
identify the event target:
Find the event target for begin="click" and given xlink:href of an animation. Three blue stroked circles can be animated. The begin of each animation is started with a click on the related circle. This starts an animation of the cx of this circle. If something red becomes visible or the related animation does not start with a click, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no interactivity
KSVG1fail wrong animation, no interactivity
WebKit 528.16ok -
Adobefail wrong identification of the event target
Squiggle 1.7ok -
Opera8.02/50fail identification correct, but second animation of the underlying red circle not started
Opera9tp1/2/ 9.00/9.10ok -
Opera9beta1/2fail no interactivity
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60(ok) low timing accuracy for event bases
Opera11.00/11.60ok -
Opera12,00fail first event for top red underlying circle ignored
Gecko 2.0/ 8.0ok -
Gecko 12.0/ 24.0fail no interactivity

The attribute attributeName identifies the target attribute or property. This is already tested in many examples of this project, therefore only an example with specific notations of namespaces. attributeName is not used in combination with animateMotion, see the related section.

e2010-04-18-01: M(1)P
identify the target attribute:
Several methods to identify the animation target element, including exotic cases with unusal prefixes for the SVG and XLink namespaces. All rectangles increase their heights. The smaller blue ones have to cover always the large red filled one with the dark blue stroke. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorfailSVG tiny 1.1; in this case, the validator is not able to identify the modified prefix
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ko only usual namespaces
Adobefail only usual namespaces
Squiggle 1.7fail wrong error message
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10fail only usual namespaces
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0fail wrong and is frozen
Gecko 8.0/ 12.0fail crashes
Gecko 24.0fail wrong

The attribute attributeType is more useful in SVG basic or full, but not in SVG tiny 1.1, because there is no CSS. Within SVG tiny 1.1 all animations with attributeType CSS have to be ignored. For SVG and maybe with the future SVG tiny 1.2 this is different. In the working draft SVG tiny 1.2 CSS is optional. As already known from HTML+CSS the CSS overwrites HTML, this is the same for XMLs like XHTML or SVG. Or the XML attributes contribute to the CSS cascade like corresponding CSS style rules placed at the start of the author style sheet with a specifity of zero. SMIL describes in the animation sandwich model:
"Specifically, animating an attribute defined in XML will modify the presentation value before it is passed through the style sheet cascade, using the XML DOM value as its base. Animating an attribute defined in a style sheet language will modify the presentation value passed through the remainder of the cascade."
and
"When animation is applied to CSS properties of a element, the base value to be animated is read using the (readonly) getComputedStyle() method on that element. The values produced by the animation are written into an override stylesheet for that element, which may be obtained using the getOverrideStyle() method. These new values then affect the cascade and are reflected in a new computed value (and thus, modified presentation). This means that the effect of animation overrides all style sheet rules, except for user rules with the !important property."
This we can check:

e2005-09-22-01: Q
attributeType:
Because CSS properties have a higher specifity in the CSS cascade as XML attributes, CSS animation has to overwrite XML animation. The colour of the circles changes from yellow to blue and not from orange to red.
If the user-agent does not support CSS as for SVG tiny, the colour should change from orange to red and not from yellow to blue. A mixture is an error anyway.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1ok -
KSVG1fail wrong animation
WebKit 528.16fail wrong animation
Adobefail wrong animation
Squiggle 1.7fail wrong animation
Opera8.02/50fail wrong 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.0fail no animation

e2007-02-22-01: M(1)Q
attributeType:
For a blue rectangle width and height is animated, but for the width animation the attributeType is set to CSS. Because there is no CSS width property for rect, this has no visible effect, only the height is animated, because the attributeType is set to XML for this animation. The animation is compared with an underlying animated red rectangle. The blue rectangle covers the red one always completely. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no CSS and animation
KSVG1fail no CSS and attributeType ignored
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail attributeType ignored
Opera8.02/50fail no CSS and attributeType ignored
Opera9tp1/2/ beta1/2/ 9.00/9.10fail attributeType 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.0ok -

e2007-05-09-01: M(1)P
attributeType:
Several tests are provided: If the attributeName identifies an attribute and there is no property with the same name and attributeType is CSS, there cannot be an animation.
If a CSS property exists, but is not applicable, but an XML attributes exists with this name, there cannot be an animation with attributeType CSS.
But for example font is a property without a related XML attribute, therefore this is animated with attributeType CSS, but not with XML.
If the attributeType is 'auto' but the attributeName does not fit to the animated element, there is no animation.
If the attributeType is CSS, the animated property exists but does not fit to the animated element, there is no animation.
If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no CSS and animation
KSVG1fail immediate crash with this example
WebKit 528.16fail no animation of font-family
Adobefail no animation of font-family
Squiggle 1.7fail no animation of font-family, wrong error message
Opera8.02/50fail no CSS and attributeType ignored
Opera9tp1fail attributeType ignored
Opera9tp2fail only the red polygon displayed
Opera9beta1fail immediate crash with this example
Opera9beta2/ 9.00/9.10fail attributeType wrong interpreted
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail no animation of font-family
Gecko 2.0/ 8.0/ 12.0/ 24.0fail no animation of font-family

e2005-09-22-02: Q
attributeType:
SVG tiny 1.1 does not contain CSS. But the attributeType of the animation of fill is CSS. Therefore the animation has to be ignored for the given doctype and profile of SVG tiny 1.1. If you see a red animation, it is wrong for SVG tiny 1.1.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail attribute ignored
KSVG1fail attribute ignored
WebKit 528.16fail attribute ignored
Adobefail attribute ignored
Squiggle 1.7fail attribute ignored
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 attribute ignored
Gecko 2.0/ 8.0/ 12.0/ 24.0(ok) no animateColor
Test results for Identify the target element, attribute or property
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/5 1/8
KSVG1 0/5 0/8
WebKit 528.16 3/5 4/8
Adobe 1/5 4/8
Squiggle 1.7 2/5 2/8
Opera8.02/50 1/5 1/8
Opera9tp1/2 3/5 4/8
Opera9 beta1/2 2/5 3/8
Opera9.00/9.10 3/5 4/8
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60 4/5 6/8
Opera12,00 3/5 5/8
Gecko 2.0/ 8.0 4/5 5/8
Gecko 12.0/ 24.0 3/5 4/8

Timing

The Timing section is moved. Use the given URI.

Animation Values Over Time

Units

In the full profile of SVG 1.1 many values can contain Units. For tiny this is only available for width and height of the root element. Especially if different list items in values lists for animation have different units, the interpolation gets more complex.

Values with different units can be converted into the same unit system before a continuous animation can take place - or an interpolated presentation value is a combination of values of different units, that have to be converted into one value in device pixels to be presented.

e2010-07-01-01: M(1)P
coordinates and lengths in cm and mm:
Width and height of the document are given as 10cm, the sizes of the objects inside the document are given in cm. Some units within animation elements are mm. Obviously 1cm is the same as 10mm.
For the blue circle the values of the animation list is given in gray for comparison, for the dark blue circle there is a red comparison below with an animation, using only cm as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail discrete animation
Adobefail mixture of discrete and continuous animation
Squiggle 1.7fail wrong size (not 10cm)
Opera8.02/50fail no animation
Opera9tp1fail completely wrong size
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 size (not 10cm)
Gecko 2.0fail wrong final value, wrong size
Gecko 8.0/ 12.0/ 24.0fail wrong size

e2010-07-01-02: M(1)P
coordinates and lengths in cm, mm and in:
Width and height of the document are given as 10cm. Sizes of objects within the document are given in cm, mm or in in (inches). Obviously 1cm is the same as 10mm. in is no standard unit. It is a derived unit 1in = 25.4mm.
For the blue circle the values of the animation list is given in gray for comparison, for the dark blue circle there is a red comparison below with an animation, using only cm as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail discrete animation
Adobefail discrete animation
Squiggle 1.7fail wrong size (not 10cm)
Opera8.02/50fail no animation
Opera9tp1fail completely wrong size
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 size (not 10cm)
Gecko 2.0fail wrong final value, wrong size
Gecko 8.0/ 12.0/ 24.0fail wrong size

e2010-07-01-03: M(1)P
coordinates and lengths in absolute units:
Width and height of the document are given as 10cm. Sizes of objects within the document are given in absolute units: cm, mm, in, pc, pt.
Obviously 1cm is the same as 10mm.
in, pc and pt are no standard units.
1in = 25.4mm
1pc = (127/30)mm = (1/6)in
1pt = (127/360)mm = (1/72)in
For the blue circle the values of the animation list is given in gray for comparison, for the dark blue circle there is a red comparison below with an animation, using only cm as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail discrete animation
Adobefail discrete animation
Squiggle 1.7fail wrong size (not 10cm)
Opera8.02/50fail no animation
Opera9tp1fail completely wrong size
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 size (not 10cm)
Gecko 2.0fail wrong final value, wrong size
Gecko 8.0/ 12.0/ 24.0fail wrong size

e2010-07-02-01: M(1)P
coordinates and lengths in em and ex:
The units em and ex are tested with animated circles compared to local and px units.
The unit em is set here with font-size to be 10 local units and ex is set within a font element to be the half of em.
For the blue circle the values of the animation list is given in gray for comparison, for the dark blue circle there is a red comparison below with an animation, using only px as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail mixture of discrete and continous animation
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail completely wrong size
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60ok -
Opera12,00fail one circle wrong sized
Gecko 2.0fail wrong size, wrong final value
Gecko 8.0/ 12.0fail wrong size
Gecko 24.0ok -

e2010-07-02-02: M(1)P
coordinates and lengths in em and ex:
The units em and ex are tested with animated circles compared with mm.
The units em is set here with font-size to be 10mm and ex is set within a font element to be the half of em.
For the blue circle the values of the animation list is given in gray for comparison, for the dark blue circle there is a red comparison below with an animation, using only mm as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail mixture of discrete and continous animation
Squiggle 1.7fail wrong size (not 100mm)
Opera8.02/50fail no animation
Opera9tp1fail completely wrong size
Opera9tp2/beta1/2/ 9.00/9.10fail wrong size (not 100mm)
Opera9.50 alpha/beta/ 9.52/ 10.0 alphafail wrong absolute and relative size
Opera10.0 beta/ 10.0/ 10.60/ 11.00/11.60fail wrong size (not 100mm)
Opera12,00fail one circle wrong sized
Gecko 2.0fail wrong final value, wrong size
Gecko 8.0/ 12.0/ 24.0fail wrong size

e2010-07-03-01: M(1)P
coordinates and lengths in percentages:
Percentages as units are tested with animated circles compared to local and px units.
Because the viewBox is set to a width of 400 and a height of 300, a horizontal length of 400 corresponds to 100% and a vertical length of 300 corresponds to 100%. Other lengths in other directions are related to 353.5533905932737622... as 100% (the square root divided by square root of 2 from the sum of squares of width and height).
For the blue circle the values of the animation list is given in gray for comparison, for the dark blue circle there is a red comparison below with an animation, using only px as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong animations
Squiggle 1.7ok -
Opera8.02/50fail no animation
Opera9tp1fail completely wrong size
Opera9tp2ok -
Opera9beta1fail animation cancelled
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 discrete and continuous animation mixed
Gecko 2.0fail wrong final value
Gecko 8.0/ 12.0/ 24.0ok -

e2010-07-03-02: M(1)P
coordinates and lengths in percentages:
Percentages as units are tested with animated ellipses compared to local and px units.
Because the viewBox is set to a width of 400 and a height of 300, a horizontal length of 400 corresponds to 100% and a vertical length of 300 corresponds to 100%. The attributes rx and ry as well as cx and cy are related to these lengths.
For the blue ellipse the values of the animation list is given in gray for comparison, for the dark blue ellipse there is a red comparison below with an animation, using only px as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong animations
Squiggle 1.7ok -
Opera8.02/50fail no animation
Opera9tp1fail completely wrong size
Opera9tp2ok -
Opera9beta1fail animation cancelled
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 discrete and continuous animation mixed
Gecko 2.0fail wrong final value
Gecko 8.0/ 12.0/ 24.0ok -

e2010-07-03-03: M(1)P
coordinates and lengths in percentages:
Percentages as units are tested with animated circles compared to mm.
Because the size is set to a width of 200mm and a height of 150mm, a horizontal length of 200mm corresponds to 100% and a vertical length of 150mm corresponds to 100%. Other lengths in other directions are related to 176.7766952966368811...mm as 100%. (the square root divided by square root of 2 from the sum of squares of width and height).
For the blue circle the values of the animation list is given in gray for comparison, for the dark blue circle there is a red comparison below with an animation, using only mm as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong animations
Squiggle 1.7fail wrong size (not 200mm and 150mm)
Opera8.02/50fail no animation
Opera9tp1fail completely wrong size
Opera9tp2fail wrong size (not 200mm and 150mm)
Opera9beta1fail animation cancelled
Opera9beta2/ 9.00/9.10fail wrong size (not 200mm and 150mm)
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail discrete and continuous animation mixed
Gecko 2.0fail wrong final value, wrong size
Gecko 8.0/ 12.0/ 24.0fail wrong size

e2010-07-03-04: M(1)P
coordinates and lengths in percentages:
Percentages as units are tested with animated ellipses compared to mm.
Because the size is set to a width of 200mm and a height of 150mm, a horizontal length of 200mm corresponds to 100% and a vertical length of 150mm corresponds to 100%. The attributes rx and ry as well as cx and cy are related to these lengths.
For the blue ellipse the values of the animation list is given in gray for comparison, for the dark blue ellipse there is a red comparison below with an animation, using only mm as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong animations
Squiggle 1.7fail wrong size (not 200mm and 150mm)
Opera8.02/50fail no animation
Opera9tp1fail completely wrong size
Opera9tp2/ beta1/beta2/ 9.00/9.10fail wrong size (not 200mm and 150mm)
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail discrete and continuous animation mixed
Gecko 2.0fail wrong final value, wrong size
Gecko 8.0/ 12.0/ 24.0fail wrong size

e2010-07-04-01: M(1)P
coordinates and lengths in several units
(the same with GET-Parameters):
The size of the document is given in cm.
Sizes of objects within the document are given in absolute units: cm, mm, in, pc, pt. Additionally values in px, em, ex and in percentage are given.
Obviously 1cm is the same as 10mm.
in, pc and pt are no standard units.
1in = 25.4mm
1pc = (127/30)mm = (1/6)in
1pt = (127/360)mm = (1/72)in
In this case 100% corresponds to 10cm.
The units em is set here with font-size to be 10mm and ex is set within a font element to be the half of em.
The appearance of the px value depends on the resolution. This results from an input either directly with GET parameters or with an XHTML-form. If there are no parameters set within the URI, the XHTML-form is provided. If the viewer does not interprete XHTML, the parameters have to be added directly as GET parameters:
px is for pixels
l is for the length
u is for the unit.
The default is ?px=900&l=230&u=mm
This is a typical resolution for notebooks.
Another typical parameter set: ?px=99&l=1&u=in
For the blue circle the values of the animation list is given in gray for comparison, for the dark blue circle there is a red comparison below with an animation, using only cm as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail wrong animations, typically wrong resolution (always 90dpi assumed?)
Squiggle 1.7fail typically wrong resolution (always 96dpi assumed?)
Opera8.02/50fail no animation, always 96dpi?
Opera9tp1fail completely wrong size, wrong animation, always 96dpi?
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, always 96dpi?
Gecko 2.0fail wrong final value, wrong size, always 96dpi?
Gecko 8.0/ 12.0/ 24.0fail wrong size, always 96dpi?

e2010-07-04-01: M(1)P
units for rotate of animateMotion:
The rotate attribute of animateMotion can have angles as values, either as numbers as angle in degrees, with the unit deg for degree, grad for grads and rad for radians. This is tested with four blue squares with rounded corners. For comparison there are four red squares below. If something red gets visible, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no rotate
KSVG1fail no animation
WebKit 528.16fail no rotate
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.0fail wrong or no grad
Gecko 8.0/ 12.0/ 24.0ok -

e2010-07-05-01: M(1)P
Additive animation with mixed absolute units:
For the blue circle there is a red comparison below with an animation, using only cm as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail test circle not displayed
Adobefail test circle not displayed
Squiggle 1.7fail wrong size (not 11cm)
Opera8.02/50fail no animation
Opera9tp1fail completely wrong size
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 size (not 11cm)
Gecko 2.0fail wrong final value, wrong size
Gecko 8.0/ 12.0/ 24.0fail wrong size (not 11cm)

e2010-07-05-02: M(1)P
Additive animation with mixed units em, ex, mm, cm:
The units em is set here with font-size to be 10mm and ex is set within a font element to be the half of em. For the blue circle there is a red comparison below with an animation, using only mm as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail test circle not displayed
Squiggle 1.7fail wrong size (not 10cm)
Opera8.02/50/ 9tp1fail completely wrong size
Opera9tp2fail wrong size (not 10cm)
Opera9beta1fail animation cancelled
Opera9beta2/ 9.00/9.10fail wrong size (not 10cm)
Opera9.50 alpha/beta/ 9.52/ 10.0 alphafail wrong size
Opera10.0 beta/ 10.0/ 10.60/ 11.00/11.60fail wrong size (not 10cm)
Opera 12,00fail wrong sized circle
Gecko 2.0fail wrong final value, wrong size
Gecko 8.0/ 12.0/ 24.0fail wrong size

e2010-07-05-03: M(1)P
Additive animation with mixed units percentages, px and local units:
Because the viewBox is set to a width of 400 and a height of 300, a horizontal length of 400 corresponds to 100% and a vertical length of 300 corresponds to 100%. Other lengths in other directions are related to 353.5533905932737622... as 100% (the square root divided by square root of 2 from the sum of squares of width and height).
For the blue circle there is a red comparison below with an animation, using only px as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefail test circle not displayed
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail completely wrong size
Opera9tp2/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 not additive
Gecko 2.0fail wrong final value
Gecko 8.0/ 12.0/ 24.0ok -

e2010-07-06-01: M(1)P
Additive animations with units
(the same with GET-Parameters):
The size of the document is given in cm.
Sizes of objects within the document are given in absolute units: cm, mm, in, pc, pt. Additionally values in px, em, ex and in percentage are given.
Obviously 1cm is the same as 10mm.
in, pc and pt are no standard units.
1in = 25.4mm
1pc = (127/30)mm = (1/6)in
1pt = (127/360)mm = (1/72)in
In this case 100% corresponds to 10cm.
The units em is set here with font-size to be 10mm and ex is set within a font element to be the half of em.
The appearance of the px value depends on the resolution. This results from an input either directly with GET parameters or with an XHTML-form. If there are no parameters set within the URI, the XHTML-form is provided. If the viewer does not interprete XHTML, the parameters have to be added directly as GET parameters:
px is for pixels
l is for the length
u is for the unit.
The default is ?px=900&l=230&u=mm
This is a typical resolution for notebooks.
Another typical parameter set: ?px=99&l=1&u=in
For the blue circle there is a red comparison below with an animation, using only cm as units, no mix of different units. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail wrong animation
Adobefailtest circle not displayed, wrong animations, typically wrong resolution (always 90dpi assumed?)
Squiggle 1.7fail typically wrong resolution (always 96dpi assumed?)
Opera8.02/50/ 9tp1fail completely wrong size, wrong animation, always 96dpi?
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, always 96dpi?
Gecko 2.0fail wrong final value, wrong size
Gecko 8.0/ 12.0/ 24.0fail typically wrong resolution (always 96dpi assumed?)
Test results for Units
user-agentSVG 1.1
user-agentSVG 1.1
Amaya9.51/ 11.3.1 0/15
KSVG1 0/15
WebKit 528.16 0/15
Adobe 1/15
Squiggle 1.7 5/15
Opera8.02/50 1/15
Opera9tp1 1/15
Opera9tp2 6/15
Opera9 beta1 3/15
Opera9 beta2/ 9.00/9.10 5/15
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha 2/15
Opera10.0 beta/ 10.0/ 10.60/ 11.00/11.60 2/15
Opera12,00 1/15
Gecko 2.0 0/15
Gecko 8.0/ 12.0 4/15
Gecko 24.0 5/15

to

e2005-09-10-01: M(2)P
to attribute:
After 3s the different cx values of circles are set to the same value on the right with a to attribute. Initial and final positions are marked with gray circles.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1 ok -
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 ok -

e2008-08-27-01: M(1)P
discrete to animation:
width, stroke-linejoin and fill of a blue stroked rectangle are animated with a discrete to-animation. width is enlarged at 2s for 5s with calcMode discrete explicitely set. fill inherits the underlying value none from a parent g, therefore this is switched discrete to blue at 8s for 5s. A red stroked rectangle behind the blue one has set animations for width and stroke-linejoin with the same timing. A smaller circle has a set animation for fill with the same timing. If something red gets visible or the fill of small circle and large rectangle are different, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail wrong or no animation
WebKit 528.16fail continuous animation
Adobefail wrong timing
Squiggle 1.7fail wrong timing
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 ok -

e2005-09-10-02: M(1)P
to attribute:
A circle moves from left to right and back to left and back to right, using three animations with the to attribute and with a freeze fill. These animations are superposed by a simple from to animation from top to bottom. The visible effect is a motion along the given gray polyline. If the red center of the circle becomes visible, an error occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail moves just once from left to right
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail wrong animation
Opera8.02/50fail does not move from right to left
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 ok -

e2005-09-10-03: M(1)P
to attribute:
A circle moves three times from left to right using three animations with the to attribute. These animations are 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 occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail vertical animation ignored
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 ok -

e2005-10-17-01: M(1)P
to attribute:
Test of the correct additive default behaviour of to animations A circle moves on a quadratic path using two to animations for cx and one simple for cy. The path is given in gray for comparison. If the red center of the circle becomes visible, an error occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail second animation ignored
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail wrong animation
Opera8.02/50fail not additive
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 ok -

e2005-10-17-02: M(1)P
frozen to animation:
Test of the correct additive default behaviour of to animations. A circle moves on a quadratic path using two to animations for cx and one simple for cy. The animation for cy and the first to animation for cx is repeated two times, the second to animation for cx 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 cx is frozen. For the second cx animation it is noted accumulate="sum". Because to animations start always with the underlying value and end with the to value, there cannot be a visible cumulative effect (This is explicitely noted in SMIL2.0/2.1). 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 occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail second animation ignored
WebKit 528.16fail the second turn shows wrong behaviour for a frozen to animation
Adobefail the second turn shows wrong behaviour for a frozen to animation
Squiggle 1.7fail wrong animation
Opera8.02/50fail not additive (reported to Opera as bug-185982)
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 not frozen like Adobe (reported to Opera as bug-185982) and second turn somehow cumulative
Gecko 2.0fail minor accuracy problem for frozen value
Gecko 8.0/ 12.0/ 24.0ok -

e2007-03-11-01: M(1)P
frozen to animation:
Test of the correct additive default behaviour of to animations. A circle moves on a quadratic path using two to animations for cx and one simple for cy. The animation for cy and the second to animation for cx is repeated two times, the first to animation for cx just 1.5 times. Note that the first to animation is frozen on the half way. Because it has lower priority, the second cx animation survives on a straight path. For the cy animation it is noted accumulate="sum". Because to animations start always with the underlying value and end with the to value, there cannot be a visible cumulative effect (This is explicitely noted in SMIL2.0/2.1). 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 or the circle vanishes, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail second animation ignored
WebKit 528.16fail the second turn shows wrong behaviour for a frozen to animation
Adobeok -
Squiggle 1.7fail wrong animation
Opera8.02/50fail not additive (reported to Opera as bug-185982)
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 second turn cumulative
Gecko 2.0/ 8.0/ 12.0/ 24.0 ok -

e2008-03-01-01: M(1)P
restarted to animation:
A circle moves from left to right and back to left and so on, using two animations with the to attribute and with a freeze fill and four begins. These animations are superposed by a simple from to animation from top to bottom. The visible effect is a motion along the given gray polyline. If the red center of the circle becomes visible, an error is occured.
Because the two animations are not active at the same time, the frozen value of the previous animation is used as the underlying value. Because the other animation is already frozen before an animation is restarted, the restart has no influence anymore on the frozen value of the lower priority animation. The frozen state conserves simply the frozen value.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail second animation ignored
WebKit 528.16fail wrong animation
Adobefail frozen value not conserved
Squiggle 1.7fail wrong animation
Opera8.02/50fail not additive (reported to Opera as bug-185982)
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 frozen value not conserved
Gecko 2.0/ 8.0/ 12.0/ 24.0fail frozen value not conserved

e2008-03-02-01: M(1)P
restarted to animation:
A circle moves from bottom to top with some breaks, using two animations with the to attribute and with a freeze fill and four begins. These animations are superposed by a simple from to animation from left to right. The visible effect is a motion along the given gray polyline. If the red center of the circle becomes visible, an error is occured. Because the two animations are not active at the same time, the frozen value of the previous animation is used as the underlying value. Because the other animation is already frozen before an animation is restarted, the restart has no influence anymore on the frozen value of the lower priority animation. The frozen state conserves simply the frozen value.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail second animation ignored
WebKit 528.16fail wrong animation
Adobefail frozen value not conserved
Squiggle 1.7fail wrong animation
Opera8.02/50fail not additive (reported to Opera as bug-185982)
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,00failfrozen value not conserved
Gecko 2.0/ 8.0/ 12.0/ 24.0 ok -

e2008-03-03-01: M(1)P
restarted to animation:
A circle moves in the vertical direction, using two animations with the to attribute and with a freeze fill and two begins. These animations are superposed by a simple from to animation from left to right. The visible effect is a motion along the given gray polyline. If the red center of the circle becomes visible, an error is occured. With the restart the priority of the animations is exchanged. They are both active at the same time. If the animation with the lower priority is restarted, it gets the higher priority and is therefore not the underlying value for the other animation anymore. This other animation is now the underlying value of the higher priority animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail second animation ignored
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail wrong animation
Opera8.02/50fail not additive (reported to Opera as bug-185982)
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.0/ 8.0/ 12.0/ 24.0 ok -

e2006-06-06-30: M(1)P
none-additive to-animation:
to-animation of the non-additive stroke-dasharray property of a blue path. The stroke-dasharray is animated in 10s from the underlying property value 0,1000 to 1000,0. Because the pathlength is set to 1000 too, this means a continuous painting of the path from invisible to complete visible. Just for comparison stroke-dasharray of a red path is animated with values 0,1000;1000,0. This is covered always completely with the blue path. If something red gets visible, an error is occured.

none-additive to-animation (second example):
to-animation of the non-additive rotate attribute of the text element. The text attribute rotate changes continuously from -30 to 30 in 4s for the '?'. Initial and final positions are given in gray. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail First example without blue path, no animation, crashes; second example no animation
WebKit 528.16fail no animation
Adobefail First example no animation, second ok
Squiggle 1.7fail First sample: discrete animation, wrong pathLength? Second sample: Wrong error message, no animation
Opera8.02/50fail wrong display, no animation
Opera9tp1failminor problems at the beginning of the first example, wrong animation at the second
Opera9tp2/ beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9.00/9.10failfirst example no display in 9.00, after 10s the red path gets visible; second example animation wrong
Gecko 2.0/ 8.0/ 12.0/ 24.0 (ok) minor accuracy problem for the stroke in the first example

e2006-06-30-01: M(1)P
none-additive to-animation (third example):
The text attribute rotate changes for a blue '?'. Initial and final positions are given with thin gray strokes.
The first SMIL animation recommendation was ambiguous about to-animations of non-additive attributes, however this is clarified in SMIL 2 and 3 in such a way, that to-animations do not depend on the question, whether the attribute is additive or not. Effectively it is only necessary that it is possible to interpolate between values.
Another red '?' is animated with a simpler animation with the same visible effect. The test case has to cover this always completely. If something red gets visible, an error is occured.

none-additive to-animation (fourth example):
to-animation of the non-additive d attribute of a blue path. The gray path shows the trajectory of the circle like blue path.
The first SMIL animation recommendation was ambiguous about to-animations of non-additive attributes, however this is clarified in SMIL 2 and 3 in such a way, that to-animations do not depend on the question, whether the attribute is additive or not. Effectively it is only necessary that it is possible to interpolate between values.
The gray path covers a smaller red circle like path with the same animation. If the blue object does not follow the gray path or something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail discrete animation
Adobeok -
Squiggle 1.7fail Frist sample: wrong error message, no animation; second: wrong animation
Opera8.02/50fail third example: wrong display, no animation; fourth example: no to-animation
Opera9tp1failthird example: wrong animation; fourth example: ok
Opera9tp2/ beta1/2ok -
Opera9.00/9.10failanimation discrete, only final value visible
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 ok -
Test results for to
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/12 0/12
KSVG1 1/12 1/12
WebKit 528.16 5/12 5/12
Adobe 7/12 7/12
Squiggle 1.7 2/12 2/12
Opera8.02/50 2/12 2/12
Opera9tp1 4/12 4/12
Opera9tp2/ beta1/2 7/12 7/12
Opera9.00/9.10 5/12 5/12
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 7/12 7/12
Gecko 2.0 10/12 10/12
Gecko 8.0/ 12.0/ 24.0 11/12 11/12

by

e2005-09-10-04: M(1)P
by attribute:
A circle moves from left to right and back to left and back to right, using three animations with the attribute by.
Note, that by animations without any other attributes like from, to, values etc are additive by default. These animations are superposed by a simple from to animation from top to bottom. The visible effect is a motion along the given gray polyline. If the red center of the circle becomes visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail not additive
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail not additive
Opera8.02/50fail not additive
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 ok -

e2005-09-10-05: M(1)P
by attribute:
A circle moves 8 times from left to right using an repeated animation with the attribute by. Note, that by animations are additive, but not accumulative by default. 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 is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no repetition
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 ok -

from

e2005-09-10-06: M(1)P
from attribute:
A circle moves from left to right and back to left and back to right, using three animations with the attributes from and to. These animations are superposed by a simple from to animation from top to bottom. The visible effect is a motion along the given gray polyline. If the red center of the circle becomes visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail vertical animation ignored
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 ok -

e2005-09-10-07: M(1)P
from attribute:
A circle moves from left to right and back to left and back to right, using three animations with the attributes from and by. These animations are superposed by a simple from to animation from top to bottom. The visible effect is a motion along the given gray polyline. If the red center of the circle becomes visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail vertical animation ignored
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 ok -

values

e2005-09-10-08: M(2)P
values attribute:
A circle is set from left to right for 5s with one value in the values attribute. The initial position is marked with a dark gray circle and the final position is marked with a light gray circle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail no animation
Adobeok -
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,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0 ok -

e2005-09-10-09: M(2)P
values attribute:
A small circle is rotated around a big circle with several values. Values are marked with gray circles with strokes rising as time marks and radius falling as time marks.

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 ok -

e2005-09-10-10: UQ
values attribute:
Random examples for the Foucaults Pendulum.
PHP is just used for the random choice and the calculation of interpolation points. The output is a random SVG tiny 1.1.

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 ok -
Gecko 24.0fail rendering incomplete and residuals

e2005-09-10-11: UQ
values attribute:
Animations of a harmonic oscillator in three dimensions (random Lissajous-Figures).
PHP is just used for the random choice and the calculation of interpolation points. The output is a random SVG tiny 1.1.

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 ok -

e2005-09-10-12: M(1)P
values attribute:
The cx of a circle is animated with the values 100; 900; 900; 100 and a duration of 10s. 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 is occured.

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 ok -

e2005-09-10-13: Q
values attribute:
The colour of the big circle is animated with several values #ff0;#0f0;#0ff;#00f;#f0f;#f88;#ff0.

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.0fail no animateColor

e2007-01-31-01: M(1)P
values and override rules:
A circle is moved from left to right for 5s with the values attribute. This overrides the additionally given attributes from, to, by. After 5s another animation is started for 5s from top to bottom using from and to, this overrides the additionally given by. The path is given with gray lines. If the red center of the circle becomes visible, an error is is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail wrong override rules
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 ok -
Test results for values
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/7 0/7
KSVG1 0/7 0/7
WebKit 528.166/7 6/7
Adobe 7/7 7/7
Squiggle 1.7 6/7 6/7
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 7/7 7/7
Gecko 2.0/ 8.0/ 12.0 6/7 6/7
Gecko 24.0 5/7 5/7

calcMode

calcMode linear

e2007-04-01-01: M(1)P
calcMode linear:
The cx of a circle is animated with the values 100; 500; 200; 900; 900; 500; 200; 700; 800; 100 and a duration of 30s. 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 is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no values 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 ok -

e2005-09-10-33: Q
calcMode attribute:
A small circle is rotated around a big circle with several values. The colour of the big circle is animated with several grayscale values. For both the calcMode is linear. This means the time for every value interval is the same - because the given values have different differences, the velocities are different.

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 ok -

e2005-09-10-34: Q
calcMode attribute:
A small circle is rotated around a big circle with several values for rotation and rotation center with the calcMode linear.

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 ok -

calcMode discrete

e2005-09-10-32: M(1)P
calcMode attribute:
The cx of a circle is animated discrete from left to right with some values and a duration of 10s. 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 occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no cx animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50ok -
Opera9tp1fail last value 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 ok -

e2005-09-10-36: M(1)P
compare set and calcMode discrete:
values animate with calcMode discrete is compared with set animations. A red circle is set in several steps each 3s from left to right. A blue circle covers the red circle and is animated with calcMode discrete resulting in the same motion. Therefore the blue circle is always perfectly centered onto the red circle, which is never visible.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no 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 ok -

e2008-03-14-11: M(1)P
compare set and calcMode discrete:
from-to, from-by and by animate with calcMode discrete is compared with set animations. A red circle is set in several steps each 4s from left to right. A blue circle covers the red circle and is animated with calcMode discrete resulting in the same motion. Therefore the blue circle is always perfectly centered onto the red circle, which is never visible.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no discrete animation
WebKit 528.16fail no discrete animation
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 ok -

e2005-09-10-38: P
colors and calcMode discrete:
The color of a circle is animated with the values yellow, green, cyan, blue, magenta, orange. The calcMode is discrete, this results in discrete animations step by step. The stroke is animated with sets and with the same colours. The visible effect is, that there is no difference between fill and stroke.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation for fill
KSVG1fail wrong animation for fill
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail wrong timing
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 ok -

calcMode paced

e2007-01-19-01: M(1)P
calcMode paced:
cx and cy of a blue circle are animated using calcMode paced. For a precision comparison there is a simpler linear animation for a red circle. If the animation of the blue circle is correct, this red circle will not get visible. If the red one is visible, an error is occured.

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/ tp1/2/ beta1/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 ok -

e2007-01-19-02: M(1)PS
animateTransform, calcMode paced:
A paced translation with animateTransform is compared with a simulation using the Euclidian distance to determine the timing and an animateMotion. All animations are using values indicated with a gray triangle and thin black squares. The animated squares, blue for the test, red for the simulation, dark red for the animateMotion, have to interpolate between the three black squares. The blue testcase has to cover the red comparisons completely. If something red gets visible, an error is occured. The SVG 1.1 specification describes another behaviour in contradiction to the behaviour specified for calcMode paced in SVG 1.1 and in SMIL. This behaviour does not interpolate between the values and is therefore wrong. It is simulated using a light red square.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail no animation
WebKit 528.16ok fits to calcMode paced
Adobeok fits to calcMode paced
Squiggle 1.7fail does not interpolate between the given values as required for calcMode paced, the reason is, that a behaviour is realised as described already wrong in the specification
Opera8.02/50/ 9tp1no animation or display
Opera9tp2/ beta1/beta2/ 9.00/9.10faildoes not interpolate between the given values as required for calcMode paced, the reason is, that a behaviour is realised as described already wrong in the specification
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok fits to calcMode paced
Gecko 2.0/ 8.0/ 12.0/ 24.0 ok fits to calcMode paced

e2007-01-19-03: M(1)PS
animateTransform scale, calcMode paced:
A paced scaling with animateTransform for a blue rectangle is compared with a simulation for a red rectangle using the Euclidian distance to determine the timing and an animateMotion of the corners of the rectangle as orange circles. In light red the animation is simulated as defined in SVG 1.1. All animations are using values indicated with thin black rectangles. The animated rectangles have to interpolate between the three black rectangles. The blue testcase has to cover the red or orange comparisons completely to get a paced and interpolated animation. If something red or orange gets visible, an error is occured compared with the definition of the calcMode paced. Note that the simulation for the behaviour specified in SVG 1.1 does not fit with the meaning of the definition of calcMode paced specified by SMIL and SVG 1.1. The SVG 1.1 behaviour is a paced animation, but does not interpolate between the values.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no or confused animation
KSVG1fail no animation
WebKit 528.16ok fits to calcMode paced
Adobefail wrong animation
Squiggle 1.7fail does not interpolate between the given values as required for calcMode paced, the reason is, that a behaviour is realised as described already wrong in the specification
Opera8.02/50/ 9tp1failno or wrong animation or display
Opera9tp2/ beta1/beta2/ 9.00/9.10faildoes not interpolate between the given values as required for calcMode paced, the reason is, that a behaviour is realised as described already wrong in the specification
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60failwrong animation
Opera11.00/11.60/ 12,00ok fits to calcMode paced
Gecko 2.0/ 8.0/ 12.0/ 24.0 ok fits to calcMode paced

e2005-09-10-31: M(1)P
calcMode paced attribute:
A small blue circle is rotated around a big circle with several values. The duration is 30s and the calcMode is paced, this results in a rotation with a constant angular velocity. For a precision comparison there is a simple from to animation for a small red circle. If the animation of the small blue circle is correct, this red circle will not get visible. If the red one is visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no or wrong animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail no animation, only fractional or no display
Opera8.02/50fail no paced animation
Opera9tp1/2/ beta1fail no paced animation, no display of paced animated circle
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 ok -

e2007-01-19-04: M(2)PS
animateTransform rotate, calcMode paced:
A paced rotate with animateTransform for a square is tested: Does the animation interpolate between the given values of the attribute? Is it a paced animation between the given values? The red and blue testcases have to meet the given values indicated as gray squares within the animation. If not all values are met, an error is occured. In SVG 1.1 a method is mentioned to get a paced animation. But this method does not interpolate between the given values, but gives a paced animation. Because the value is compost of one angle and two coordinates, I think, there is no notion of distance consistent with the definition of calcMode paced, because angle and coordinate have different units with a completely different meaning. Anyway if the animation is paced, the blue square will cover always the red square.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail interpolates, but not paced
Adobefail interpolates, but not paced
Squiggle 1.7faildoes not interpolate between the given values as required for calcMode paced, the reason is, that a behaviour is realised as described already wrong in the specification
Opera8.02/50/ 9tp1failno or wrong animation or display
Opera9tp2/ beta1/beta2/ 9.00/9.10faildoes not interpolate between the given values as required for calcMode paced, the reason is, that a behaviour is realised as described already wrong in the specification
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60failwrong animation
Opera11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0 ok -

e2005-09-10-37: P
animateColor calcMode paced:
The colour of a circle is animated with several random values. The duration is 10s and the calcMode is paced. The colour of the stroke is animated with the same values, but with keyTimes, resulting in the same visual effect, therefore there is not visible difference in the colours of fill and stroke.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail fill wrong colours
WebKit 528.16ok -
Adobefail fill not paced
Squiggle 1.7fail fill not paced
Opera8.02/50fail fill animation ignored
Opera9tp1/2/ beta1fail fill no animation, just initial value
Opera9 beta2ok-
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail sometimes wrong final value
Gecko 2.0/ 8.0/ 12.0/ 24.0fail no animateColor

calcMode spline

e2005-09-10-35: Q
calcMode attribute:
A small circle is rotated around a big circle with several values. The colour of the big circle is animated with several grayscale values. For both the calcMode is spline but without keyTimes. This means the time for every value interval is the same - because the given values have different differences, the velocities are different.

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 ok -
Test results for calcMode
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/14 0/14
KSVG1 0/14 0/14
WebKit 528.16 12/14 12/14
Adobe 10/14 10/14
Squiggle 1.7 9/14 9/14
Opera8.02/50 6/14 6/14
Opera9tp1 5/14 5/14
Opera9tp2/ beta1 8/14 8/14
Opera9 beta2/ 9.00/9.10 10/14 10/14
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 11/14 11/14
Opera11.00/11.60/ 12,00 13/14 13/14
Gecko 2.0/ 8.0/ 12.0/ 24.0 13/14 13/14

keyTimes

e2005-09-11-01: Q
keyTimes attribute:
Three circles move from left to right, two of them with values and keyTimes with rising velocities. The red one has equidistant values and not equidistant keyTimes, for the blue one both are not equidistant. Just for comparison the yellow circle shows a motion with constant velocity.

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 ok -

e2005-09-11-02: Q
keyTimes attribute:
Three circles move with a discrete animation from left to right, two of them getting faster with values and keyTimes. The red one has equidistant values and not equidistant keyTimes, for the blue one both are not equidistant. Just for comparison the yellow circle shows a motion with constant steps.

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 ok -

e2005-09-11-03: UA
keyTimes attribute:
Animations of random double star systems with values and keyTimes. Classical approximation of a motion with gravitational interaction.
PHP is just used for the random choice and the calculation of interpolation points. The output is a random SVG tiny 1.1.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail no animation
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 ok -

e2005-09-11-04: UA
keyTimes attribute:
Gravitational scattering with random particles. Classical approximation of a motion with gravitational interaction.
PHP is just used for the random choice and the calculation of interpolation points. The output is a random SVG tiny 1.1.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail no animation
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 ok -

e2006-02-09-01: M(1)P
keyTimes attribute and discrete animation:
The cx of a circle is animated discrete from left to right with some values and keyTimes and a duration of 10s. 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 occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no cx 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 ok -

e2006-02-09-02: P
keyTimes attribute and discrete animateColor:
The colour of a circle is animated with the values yellow, green, cyan, blue, magenta, orange. The calcMode is discrete, this results in discrete animations step by step with given keyTimes. The stroke is animated with sets and with the same colours. The visible effect is, that there is no difference between fill and stroke.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation for fill
KSVG1fail wrong or no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail minor accuracy problems
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.0fail no animateColor

e2006-02-09-03: M(1)P
keyTimes attribute and linear animation:
The cx of a circle is animated linear from left to right with some values and keyTimes and a duration of 10s. 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 occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no cx 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 ok -
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/7
KSVG1 0/7 0/7
WebKit 528.16 5/7 5/7
Adobe 7/7 7/7
Squiggle 1.7 6/7 6/7
Opera8.02/50 6/7 6/7
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,00 7/7 7/7
Gecko 2.0/ 8.0/ 12.0/ 24.0 6/7 6/7

keySplines

e2005-09-11-05: Q
keySplines attribute:
Four circles move from left to right within 30s, all of them with calcMode spline, values, keyTimes and keySplines. The same keySplines are used as in the examples of the specification. The yellow one is the default with konstant velocity or no acceleration. The red starts with small acceleration and ends with small deceleration and has the fastest velocity at 15s. The magenta starts with a big acceleration and ends with a small acceleration and has the fastest velocity at 0s. The blue starts with a very small acceleration and ends with zero acceleration and has the fastest velocity later than 15s.
Just for orientation in space and time, a gray vertical line is displayed after 15s centered.

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 ok -

e2005-09-11-06: M(1)PU
keySplines attribute:
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 no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok The accuracy could be better.
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 The accuracy could be better. As mentioned in the SVG-tiny specification, deviation should be below 1px, but here it is clear above, but still good enough for many applications.
Gecko 2.0/ 8.0/ 12.0/ 24.0 ok -
Gecko 24.0fail circle vanishes

e2007-05-12-21: M(1)PU
keySplines attribute:
The cy of a blue stroked circle is animated with six different values animations using calcMode spline and keySplines. The cx is animated linear with values animations to get two dimensional trajectories.
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 occured.
The timing of the cx animations 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, 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.16ok -
Adobeok -
Squiggle 1.7(ok) Accuracy could be better, but is already better as with Opera.
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,00failaccuracy of keySpline interpolation too bad, interpolation obviously only done with a view linear segments, not really cubic splines. The interpolation seems to be slightly better in 8 as in 9, but 8 has a visible jitter, 9 not.
Gecko 2.0/ 8.0/ 12.0/ 24.0 ok -

e2005-09-11-07: PU
keySplines attribute comparison with and without and
keySplines attribute comparison with without keySplines animation, but many interpolation points:
A harmonic oscillator is used for a comparison between a linear animation with several values and a spline animation with serveral values. Both can be an approximation for the harmonic motion.
Yellow: without keySplines
Blue: with keySplines
Green rectangle: exact harmonic oscillation represented by a rotation
Available Parameters:
dur - Animation time in seconds
anz - interpolation points values with keySplines: from 0 to 2 anz
num - interpolation points values without keySplines: from 0 to 2 num
The first example shows the same number of interpolation points for the spline and the linear animation. The agreement will be poor. The second example uses much more interpolation points for the linear animation. In this case, the animations with and without splines are almost the same.
Other examples are available with the noted parameters in the URI.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no or wrong animation
KSVG1fail no animation
WebKit 528.16fail no animation
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 ok -

e2005-09-11-08: AI
keySplines tester:
Visualization of keySplines and continuous combination of two keySplines:
The tester suggests animation continuations with continuous velocity. It is tested, if two segments of keySplines fit together. They are shown as a graph. The origin of time is on the left, on the right the end of animation, the minimal value is on the bottom, the maximal value at the top.
The black curve represents the input keySplines, the red one is the continuously differentiable continuations from the first to the second part. Magenta is the continuously differentiable continuations from the second part to the first part.
The blue button starts three animations corresponding to the curves. The suggestions are retarded a short time.
Parameters can be changed for the PHP-script in the URI, the notation corresponds to the SVG notation, example:
dur=30
values=0;-360;360
keyTime=.6 (this is just the middle keyTime, the first is 0 and the last is 1)
keySplines=.2,0,0.5,1;.1,0,0,1

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.0fail no interactivity
Gecko 24.0ok -

e2005-10-18-12: Q
keySplines attribute with from and to:
Four circles move from left to right within 30s, all of them with calcMode spline, from/to/by and keySplines. The same keySplines are used as in the examples of the specification. According to the SMIL animation recommendation the correlating keyTimes can be calculated from the user agent from the values. The yellow one is the default with konstant velocity or no acceleration. The red starts with small acceleration and ends with small deceleration and has the fastest velocity at 15s. The magenta starts with a big acceleration and end with a small acceleration and has the fastest velocity at 0s. The blue starts with a very small acceleration and ends with zero acceleration and has the fastest velocity later than 15s. Just for orientation in space and time, a gray vertical line is displayed after 15s centered.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail keyTimes and keySplines ignored, no animation for the blue circle
WebKit 528.16fail keyTimes and keySplines ignored
Adobefail keySplines ignored
Squiggle 1.7ok -
Opera8.02/50fail no animation
Opera9tp1/2/ beta1fail keySplines ignored
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 ok -

e2006-08-13-11: Q
animateColor and keySplines:
animateColor with keyTimes and keySplines for fill of the background rectangle and a circle with a duration of 20s and repetition. If something red gets visible or if the stroke of the circle is not different from fill an error is occured. If the backround has always the same color as the stroke or the fill this is an error too. The complete animations are in the blue range.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail nice colourful errors ;o)
WebKit 528.16ok -
Adobeok-
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/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.0fail no animateColor
Test results for keySplines
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/7 0/7
KSVG1 0/7 0/7
WebKit 528.16 5/7 5/7
Adobe 7/7 7/7
Squiggle 1.7 7/7 7/7
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 6/7 6/7
Gecko 2.0/ 8.0/ 12.0/ 24.0 5/7 5/7
Test results for Animation Values Over Time
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/51 0/51
KSVG1 1/51 1/51
WebKit 528.16 37/51 37/51
Adobe 42/51 42/51
Squiggle 1.7 33/51 33/51
Opera8.02/50 30/51 30/51
Opera9tp1 33/51 33/51
Opera9tp2/ beta1 39/51 39/51
Opera9 beta2 41/51 41/51
Opera9.00/9.10 39/51 39/51
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 42/51 42/51
Opera11.00/11.60 44/51 44/51
Opera12,00 44/51 43/51
Gecko 2.0 44/51 44/51
Gecko 8.0/ 12.0/ 24.0 49/51 49/51

Additive Animation

e2007-06-12-01: M(1)P
additive and accumulative behaviour:
Compare from-to, from-by and by animate with values animate.
SMIL specifies, that from-to, from-by and by animations 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.)
The from-to, from-by and by animations applied to the attributes x, y, width, height of blue rectangles are compared with the related values animations including additive and cumulative hehaviour for underlying red rectangles. Additionally underlying dark red rectangles simulate the same behaviour using always the defaults additive replace and accumulate none. The blue rectangles cover all red rectangles. Therefore if something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong or no animation
KSVG1fail wrong or no animation
WebKit 528.16fail wrong animation
Adobefail from-by always cumulative
Squiggle 1.7fail no animation, mysterious error messages due to values attributes containing a single value
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10fail wrong by 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.0fail wrong final values

additive

additive animation means, the animation is added to the initial value. If more than one animation is applied to an attribute, then the animation is added, too.
In general additive means superposition of motions.

e2005-09-12-01: M(1)P
additive rotation:
A small circle is rotated around a big circle with a constant angular velocity with a duration of 60s and repetition. After 15s a second animation is superposed with with the additive attribute. This animation has several values and its repeated duration is 120s. Just for comparison a red circle has the same motion, but realised with an additional nested and animated group. If the red one gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no repetition, ignores additive 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.0ok -

e2007-03-25-01: M(1)P
additive rotation:
A small square is rotated along a big circle with a constant angular velocity with a duration of 60s and repetition. A second animation is superposed to rotate the square around its own center in such a way, that the edges of the square are always aligned horizontal respectively vertical.
Just for comparison a red circle has the same motion, but realised with an additional nested and animated group.
If the something red gets visible, an error is occured. A light gray circle indicates the motion path of the center of the square, the darker circles indicate ranges for the corners respectively edges of the squares.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation, wrong size for square
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail blue square not animated
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.0ok -

e2005-09-12-02: M(1)P
additive attribute:
A small circle is rotated around with a constant angular velocity around the center of the document with a duration of 60s and repetition. A second animation with scaling is superposed with the additive attribute. This animation has several values and its repeated duration is 120s. With this method it is possible to apply several types of transformations to the same transform attribute. Just for comparison a red circle has the same animations, but realised with an additional nested and animated group. If the something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no repetition, red compare not animated
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.0ok -

e2005-09-12-03: M(1)P
additive discrete animation:
A circle jumps from left to right and back using two additive discrete animations with durations of 8s and a difference in the begin-times of 2s. A linear move in y direction corresponding to the time and a path is given for comparison. If the red center of the circle gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail wrong animation
WebKit 528.16fail animation not discrete
Adobeok -
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,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0ok -

e2005-09-12-04: M(1)P
additive discrete animation:
A circle jumps from left to center and back using one additive discrete animation with a duration of 8s and a begin list with 0s (light gray path) and 2s (gray path). The gray animation overwrites the light gray one, independent of the additive attribute. A linear move in y direction corresponding to the time and paths are given for comparison. If the red center of the circle gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail wrong animation
WebKit 528.16fail animation not discrete
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail ignores second begin list value
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.0ok -

e2005-09-12-05: M(1)P
additive animation:
A circle moves from left to right and back using one additive animation with a duration of 6s and a begin list with 0s (light gray) and 3s (gray). The later gray animation overwrites the light gray one. A linear move in y direction corresponding to the time and a paths are given for comparison. If the red center of the circle gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail wrong animation
WebKit 528.16fail minor timing problem
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail ignores second begin list value
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.0ok -

e2005-09-12-06: M(1)P
additive animation:
A circle moves from left to right and back using two additive animations with durations of 3s and and 4s. The first one starts at 3s, the second one at 8s. A linear move in y direction corresponding to the time and a path is given for comparison. If the red center of the circle gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail ignores second animation
WebKit 528.16ok -
Adobeok -
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,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0ok -

e2006-05-13-11: M(1)P
replaced animateTransform:
A blue circle is scaled from small to big in 5s using animateTransform with from and to. Because the animation is not additive, the initial transformation is overwritten. If the red circle gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animateTransform
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.0ok -
Test results for additive
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/8 0/8
KSVG1 0/8 0/8
WebKit 528.16 5/8 5/8
Adobe 8/8 8/8
Squiggle 1.7 6/8 6/8
Opera8.02/50 5/8 5/8
Opera9tp1 6/8 6/8
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,00 8/8 8/8
Gecko 2.0/ 8.0/ 12.0/ 24.0 8/8 8/8

accumulate

The accumulate attribute is always correlated with repeatDur or repeatCount, these repetitions become cumulative, if accumulate is used. Note that the SMIL recommendations contain examples deviating from the descriptions and formulars. In the SMIL Animation recommendation, referenced by SVG 1.1, it is not quite clear, if the formular is wrong and the described behaviour intended or vice versa. This is changed in SMIL2.0/2.1 - here it gets quite clear, that the formular is normative and the descriptions of the examples are wrong.

e2005-09-16-01: M(1)P
accumulate attribute:
Two small circles are rotated around a big circle with a constant angular velocity with a duration of 5s for 45 degree. This is repeated and the accumulate attribute is set to sum. The cyan one is a from to animation, the blue one a by animation. The visible effect is in both cases a complete rotation in 40s with indefinite repetition. For comparson two red circles are rotated once in 40s, normally invisible hidden behind the cyan and the blue one - if one of them gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no or wrong animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7fail stops with funny error messages: 1>=1
Opera8.02/50fail no animation, bug-185986
Opera9tp1fail ignores attribute, no animation for the blue one, bug-185986
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.0ok -

e2005-09-16-02: M(1)P
accumulate animateTransform:
A small circle is rotated around with a constant angular velocity with a duration of 20s and repetition, using additive and accumulative animation. A second by animationTransform with scaling is superposed. It is cumulative too. The visible effect is, that the circle spirals out of the center. With this, a linear increase of the rotation radius and the diameter of the animated circle is realised. For other functional dependencies a finite spline animation has to be used. Gray circles give the position and diameter each 10s up to 60s. If something red becomes visible, an error is occured. Positions and red comparison are calculated according to the method described in SMIL2.0/2.1.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail animation not cumulative
Adobefailwrong final value for scale
Squiggle 1.7fail stops with funny error messages: 1>=1
Opera8.02/50fail no animation, bug-185986
Opera9tp1fail ignores accumulate, bug-185986
Opera9tp2/ beta1/2/ 9.00/9.10fail wrong animation, bug-185986
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.0ok -

e2005-09-16-03: M(1)P
accumulate attribute:
A circle is moved from left to right using animateTransform, by, repeatDur and accumulate. A linear move in y direction corresponding to the time and a paths are given for comparison. If the red center of the circle gets visible, an error is occured.

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 stops with funny error messages: 1>=1
Opera8.02/50/ 9tp1fail no animation, bug-185986
Opera9tp2/ beta1/2fail wrong animation, bug-185986
Opera9.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.0ok -

e2005-09-16-04: M(1)P
accumulate attribute:
A circle is moved from left to right using animateTransform, from, by, repeatCount and accumulate. A line as a path is given for comparison. If the red center of the circle gets visible, an error is occured.

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 wrong animation
Opera8.02/50fail no animation, bug-185986
Opera9tp1fail ignores accumulate, bug-185986
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.0ok -

e2005-09-16-05: M(1)P
accumulate discrete animation:
A circle jumps from left to right and back using one additive and accumulative discrete animation with a duration of 3s and a repeatCount of 2. A linear move in y direction corresponding to the time and a path is given for comparison. If the red center of the circle gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail wrong animation
WebKit 528.16fail animation not discrete
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.0ok -

e2006-02-12-01: M(1)P
accumulate and animateTransform:
A circle is scaled with animateTranform with from, by and accumulate in 20s. If something red becomes visible, an error occured. The tested behaviour is related to the formular given in the SMIL animation recommendation, not to the examples or their description. This shown behaviour is the same as described by the SMIL2.0/2.1 recommendation in the normative formular.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animateTransform
WebKit 528.16fail animation not cumulative
Adobefail wrong animation, behaviour as in the SMIL examples
Squiggle 1.7fail wrong animation
Opera8.02/50fail no animateTransform, bug-185986
Opera9tp1/2/ beta1/2/ 9.00/9.10fail accumulate ignored, bug-185986
Opera9.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.0ok -

e2007-03-13-01: M(1)P
accumulate and animateTransform:
A blue square is skewed with animateTransform with values and accumulate in 20s. This is compared with a skewed transform of a red squares using values and keyTimes without accumulate to get the same effect. Because both have the same timing, the blue square will cover always the red one completely. If something red becomes visible, an error is occured. The tested behaviour is related to the formular given in the SMIL animation recommendation, not to the examples or their description. This shown behaviour is the same as described by the SMIL2.0/2.1 recommendation in the normative formular.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animateTransform
WebKit 528.16fail animation not cumulative
Adobeok -
Squiggle 1.7fail wrong animation
Opera8.02/50fail no animateTransform, bug-185986
Opera9tp1/ 9.50 alphafail additive or accumulate problems
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 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.0ok -

e2007-03-13-02: M(1)P
accumulate and animateTransform:
Two blue squares are rotated with animateTransform with values and accumulate in 20s. This is compared with rotated transforms of two red squares using values and keyTimes without accumulate to get the same effect. Because all have the same timing, the blue squares will cover always the red ones completely. If something red becomes visible, an error is occured. The tested behaviour is related to the formular given in the SMIL animation recommendation, not to the examples or their description. This shown behaviour is the same as described by the SMIL2.0/2.1 recommendation in the normative formular.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animateTransform
WebKit 528.16fail animation not cumulative
Adobeok -
Squiggle 1.7fail wrong animation
Opera8.02/50fail no animateTransform, bug-185986
Opera9tp1fail accumulate problems
Opera9tp2/ beta1fail already the start of animation confused, accumulate wrong
Opera9beta2/ 9.00/9.10fail accumulate problems
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.0ok -

e2006-05-07-01: M(1)P
accumulate attribute:
A circle is moved from left to right using animateTransform, from, to, repeatCount and accumulate. A line as a path is given for comparison. If the red center of the circle gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail animation not cumulative
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail no animation, bug-185986
Opera9tp1fail ignores accumulate, bug-185986
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.0ok -

e2006-05-07-02: M(1)P
accumulate attribute:
A circle is moved from left to right using cx and animate, values, repeatCount and accumulate. A linear move in y direction corresponding to the time and a paths are given for comparison. If the red center of the circle gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail animation not cumulative
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,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0ok -
Test results for accumulate
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 8/10 8/10
Squiggle 1.7 3/10 3/10
Opera8.02/50/ 9tp1 2/10 2/10
Opera9tp2/ beta1/2 6/10 6/10
Opera9.00/9.10 8/10 8/10
Opera9.50 alpha 9/10 9/10
Opera9.50 beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 10/10 10/10
Gecko 2.0/ 8.0/ 12.0/ 24.0 10/10 10/10
Test results for Additive Animation
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/19 0/19
KSVG1 0/19 0/19
WebKit 528.16 8/19 8/19
Adobe 16/19 16/19
Squiggle 1.7 9/19 9/19
Opera8.02/50 7/19 7/19
Opera9tp1 8/19 8/19
Opera9tp2/ beta1/2 14/19 14/19
Opera9.00/9.10 16/19 16/19
Opera9.50 alpha 18/19 18/19
Opera9.50 beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 19/19 19/19
Gecko 2.0/ 8.0/ 12.0/ 24.0 18/19 18/19