Examples and Tests for SVG Animation

Animatable Attributes and Properties for SVG Painting

Painting: Filling, Stroking and Marker Symbols

fill properties

fill

e2005-08-27-01: §Q
set animation of the fill property:
The color of several shapes in a group is set from light blue to dark blue after 3 seconds.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51fail not all elements animated
Amaya11.3.1ok -
KSVG1fail no animation, may work for single elements and not groups
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-08-27-02: §Q
animateColor animation of the fill property:
The color of several shapes in a group change from light blue to dark blue in 10 seconds.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51fail not all elements animated
Amaya11.3.1ok -
KSVG1fail no animation, may work for single elements and not groups
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0fail no animation

e2005-08-27-07: §Q
set animation of the fill property:
The fill property of the circle bottom right is set after 3s from none to blue for 3s. Then it returns to none again.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail duration for set ignored
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail circle gets black, not none after blue
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-08-27-08: §Q
discrete animation of the fill property:
The fill property of the circle bottom right is discrete animated from none to dark blue to none to light blue to blue to dark blue to none and so on, begins with the set to dark blue with a begin 3s, the repeated duration is 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail random colors and no repetition
WebKit 528.16fail wrong timing
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail circle gets black instead of none after blue
Opera9tp1fail ignores last value with calcMode discrete
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-08-27-09: §Q
discrete animation of the fill property:
The fill property of the circle bottom right is discrete animated from none to gray to currentColor to gray to none to gray and so on, begins with the set to gray with a begin 3s, the repeated duration is 10s. currentColor is defined by color, animated within 11.1s with the values magenta, blue, dark green, yellow. If something red gets visible, color is not animated.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail random colors and no repetition
WebKit 528.16fail wrong timing
Adobeok -
Squiggle 1.7fail color ignored
Opera8.02/50fail circle gets black, not none
Opera9tp1fail ignores last value with calcMode discrete
Opera9tp2/ beta1/2/ 9.00/9.10fail color not animated
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

This is SVG1.1 or -basic, but not SVG-tiny -
e2005-08-27-10: §Q
discrete animation of the fill property:
The fill property of the circle bottom right is discrete animated from none to gray to currentColor to a linear gradient to none to gray and so on, begins with the set to gray with a begin 3s, the repeated duration is 10s. currentColor is defined by color, animated within 11.1s with the values magenta, blue, dark green, yellow.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail random colors and no repetition
WebKit 528.16fail wrong timing
Adobeok -
Squiggle 1.7fail color ignored
Opera8.02/50fail circle gets black, not none
Opera9tp1fail ignores last value with calcMode discrete
Opera9tp2/ beta1/2/ 9.00/9.10fail color not animated
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2010-07-09-01: §M(2)P
inherited animated fill:
The fill from a group is inherited for the two circles. This fill is animated with a begin of 9.5s and a dur of 10s with some values in the blue range.
The small circle shows the current value of the group for comparison. The large circle has its own animation of fill, beginning at 2s with a dur of 10s with some values in the blue range. The last value is inherit. This means, it interpolates to the current inherited value. After the active duration the value inherit is frozen, this means the fill value is the same as that of the small circle after 12s.
The stroke of the large circle has the same appearance as the fill all the time. But the animation is realised without inheritance and with a simpler values list. A difference between the fill and the stroke of the large circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
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 -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Gecko 60.0ko -

e2010-07-09-02: §M(2)P
inherited animated fill:
The fill from a group is inherited for the two circles. This fill is animated with a begin of 2s and a dur of 10s with three values in the blue range. The small circle shows the current value of the group for comparison. The large circle has its own animation of fill, beginning at 2s with a dur of 10s with the values rgb(0,200,240);inherit and an end at 7s. After the active duration the value of 50 percent rgb(0,200,240) and 50 percent inherit is frozen. The stroke of the large circle has the same appearance as the fill all the time. But the animation is realised without inheritance and with simpler animations. A difference between the fill and the stroke of the large circle indicates an error.

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

e2010-07-10-01: §M(2)P
inherited animated fill:
Discrete animation of the fill property.
The fill from a group is inherited for the two circles. This fill is animated with a begin of 2s and a dur of 12.5s with five values in the blue range.
The small circle shows the current value of the group for comparison. The large circle has its own animation of fill, beginning at 2s with a dur of 15s with the values inherit;rgb(0,200,240);inherit. After the active duration the value is frozen.
The stroke of the large circle has the same appearance as the fill all the time. But the animation is realised without inheritance and with simpler set animations. A difference between the fill and the stroke of the large circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobeok -
Squiggle 1.7fail -
Opera8.02/50/ 9tp1/2/beta1/2fail -
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.0/ 36.0/ 48.0/ 60.0ok (minor timing problems)

e2010-07-11-01: §M(2)P
animated fill with currentColor:
The fill from a group is inherited for the two circles as currentColor. This color is animated with a begin of 9.5s and a dur of 10s with some values in the blue range.
The small circle shows the current value of the group for comparison. The large circle has its own animation of fill, beginning at 2s with a dur of 10s with some values in the blue range. The last value is currentColor. This means, it interpolates to the current color value. After the active duration the value currentColor is frozen, this means the fill value is the same as that of the small circle after 12s.
The stroke of the large circle has the same appearance as the fill all the time. But the animation is realised without inheritance and with a simpler values list. A difference between the fill and the stroke of the large circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
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 -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok (minor timing problems)
Gecko 60.0ko -

e2010-07-11-02: §M(2)P
animated fill with currentColor:
The fill from a group is inherited for the two circles as currentColor. This color is animated with a begin of 2s and a dur of 10s with three values in the blue range. The small circle shows the current value of the group for comparison. The large circle has its own animation of fill, beginning at 2s with a dur of 10s with the values rgb(0,200,240);currentColor and an end at 7s. After the active duration the value of 50 percent rgb(0,200,240) and 50 percent currentColor is frozen. The stroke of the large circle has the same appearance as the fill all the time. But the animation is realised with simpler animations. A difference between the fill and the stroke of the large circle indicates an error.

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

e2010-07-11-03: §M(2)P
animated fill with currentColor:
Discrete animation of the fill property.
The fill from a group is inherited for the two circles as currentColor. This fill is animated with a begin of 2s and a dur of 12.5s with five values in the blue range.
The small circle right below shows the current value of the group for comparison. The large circle has its own animation of fill, beginning at 2s with a dur of 15s with the values currentColor;rgb(0,200,240);currentColor. After the active duration the value is frozen.
The small circle top left indicates the timing of the animation with three values, black for currentColor, gray for the value in the middle.
The stroke of the large circle has the same appearance as the fill all the time. But the animation is realised with simpler set animations. A difference between the fill and the stroke of the large circle indicates an error.

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

e2010-07-11-04: §M(2)P
animated fill with currentColor and inherit:
The fill from a group is inherited for the three circles, one from fill, one from color with currentColor.
The color is animated with a begin of 2s and a dur of 10s. The small circles show the inherited value and the currentColor. The large circle has its own animation of fill, beginning at 2s with a dur of 10s with some values in the blue range. The first value is inherit, the last value is currentColor.
The stroke of the large circle has the same appearance as the fill all the time. But the animation is realised with a simpler values list. A difference between the fill and the stroke of the large circle indicates an error.

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

e2010-07-15-01: §M(2)P
Additive animation of the fill property:
The fill from a group is inherited for a circle.
The circle has its own animation of fill. After the active duration the value is frozen.
The stroke of the circle has the same appearance as the fill all the time. But the animation is realised without inheritance and with simpler set animations. A difference between the fill and the stroke of the circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail wrong frozen value
Opera8.02/50fail no animation
Opera9tp1/2/beta1fail -
Opera9beta2/ 9.00/9.10fail wrong frozen value
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -
Test results fill property
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51 0/13 0/14
Amaya11.3.1 2/13 2/14
KSVG1 0/13 0/14
WebKit 528.16 3/13 3/14
Adobe 7/13 8/14
Squiggle 1.7 4/13 4/14
Opera8.02/50 2/13 2/14
Opera9tp1 3/13 3/13
Opera9tp2/ beta1/2 4/13 4/14
Opera9.00/9.10 8/13 8/14
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 11/13 12/14
Opera11.00/11.60/ 12,00 8/13 9/14
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 12/13 13/14
Gecko 60.0 8/13 9/14

fill-rule

e2005-08-27-03: §M(1)P
set animation of the fill-rule property:
The light blue figure will be covered by the dark blue square completely after 3 seconds. If something red becomes visible, an error is occured.

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

e2005-08-27-04: §M(1)P
discrete animate animation of the fill-rule property:
The light blue figure will be covered by the blue square completely after 3 seconds and will be visible after another 3 seconds and so on. If something red 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.16fail confused animation
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail no animation; Opera bug-174913
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2010-07-16-01: §M(1)P
Animation of fill-rule property and inheritance:
Discrete animate animation of the fill-rule property. The light blue areas will be covered with dark blue completely after 1.5 seconds and will be visible after another 1.5 seconds and so on. The right and the left rectangle change with the same timing, but always with different fill-rule. If something red 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.16fail -
Adobefail -
Squiggle 1.7ok -
Opera8.02/50fail no animation
Opera9tp1fail -
Opera9tp2/beta1/beta2/ 9.00/9.10ok -
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha(ok) minor timing problems
Opera10.0 beta/ 10.0/ 10.60/ 11.00ok -
Opera11.60/ 12,00fail -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -
Test results fill-rule property
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/3 0/3
KSVG1 1/3 1/3
WebKit 528.16 1/3 1/3
Adobe 2/3 2/3
Squiggle 1.7 3/3 3/3
Opera8.02/50 0/3 0/3
Opera9tp1 2/3 2/3
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 3/3 3/3
Opera11.60/ 12,00 2/3 2/3
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 3/3 3/3

fill-opacity

This is SVG1.1 or -basic, but not SVG-tiny -
e2005-08-27-05: set animation of the fill-opacity property:
Several shapes in a group change their fill-opacity from 0.8 to 0.4 after 3s.

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

This is SVG1.1 or -basic, but not SVG-tiny -
e2005-08-27-06: §Q
animate animation of the fill-opacity property:
Several shapes in a group change their fill-opacity from 1 to 0 in 10s.

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

This is SVG1.1 or -basic, but not SVG-tiny -
e2008-03-13-21: §Q
additivity of fill-opacity:
Several shapes in a group are referenced with a use element. This changes its fill-opacity with additive animations on the left. This is compared with a use on the right using simpler animations to get the same effect.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail area of opacity incomplete, wrong animation
Amaya11.3.1fail no animation
KSVG1fail no animation for groups
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail wrong or no 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/ 36.0/ 48.0/ 60.0ok -

This is SVG1.1 or -basic, but not SVG-tiny -
e2008-03-13-22: §Q
additivity of fill-opacity:
Several shapes in a group are referenced with a use element. This changes its fill-opacity with out of range values and fill-opacity with additive animations on the left. This is compared with a use on the right using simpler animations to get the same effect.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail area of opacity incomplete, wrong animation
Amaya11.3.1fail no animation
KSVG1fail no animation for groups
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail wrong or no 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/ 36.0/ 48.0fail wrong animation
Gecko 60.0ok -

This is SVG1.1 or -basic, but not SVG-tiny -
e2010-07-17-01: §M(2)P
inherited animated fill-opacity:
Animation of the fill-opacity property.
The fill-opacity from a group is inherited for the two circles. This fill-opacity is animated with a begin of 9.5s and a dur of 10s with some values. The small circle shows the current value of the group for comparison. The large circle has its own animation of fill-opacity, beginning at 2s with a dur of 10s with some values. The last value is inherit. This means, it interpolates to the current inherited value. After the active duration the value inherit is frozen, this means the fill-opacity value is the same as that of the small circle after 12s.
The stroke of the large circle has the same appearance as the fill all the time. But the animation is realised without inheritance and with a simpler values list. A difference between the fill and the stroke of the large circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
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 -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Gecko 60.0fail -

This is SVG1.1 or -basic, but not SVG-tiny -
e2010-07-17-02: §M(2)P
inherited animated fill-opacity:
Animation of the fill-opacity property.
The fill-opacity from a group is inherited for the two circles. This fill-opacity is animated with a begin of 2s and a dur of 10s with three values. The small circle shows the current value of the group for comparison. The large circle has its own animation of fill-opacity, beginning at 2s with a dur of 10s with the values 0.5;inherit and an end at 7s. After the active duration the value of 50 percent 0.5 and 50 percent inherit is frozen.
The stroke of the large circle has the same appearance as the fill all the time. But the animation is realised without inheritance and with simpler animations. A difference between the fill and the stroke of the large circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
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 -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Gecko 60.0fail -

This is SVG1.1 or -basic, but not SVG-tiny -
e2010-07-17-03: §M(2)P
inherited animated fill-opacity:
Discrete animation of the fill-opacity property.
The fill-opacity from a group is inherited for the two circles. This fill-opacity is animated with a begin of 2s and a dur of 12.5s with five values. The small circle shows the current value of the group for comparison. The large circle has its own animation of fill-opacity, beginning at 2s with a dur of 15s with the values inherit;0.5;inherit. After the active duration the value is frozen.
The stroke of the large circle has the same appearance as the fill all the time. But the animation is realised without inheritance and with simpler set animations. A difference between the fill and the stroke of the large circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
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 -
Gecko 2.0/ 8.0/ 12.0/ 60.0fail minor timing problems
Gecko 24.0/ 36.0/ 48.0ok -
Test results fill-opacity property
user-agentSVG 1.1
user-agentSVG 1.1
Amaya9.51/ 11.3.1 0/7
KSVG1 0/7
WebKit 528.16 4/7
Adobe 4/7
Squiggle 1.7 4/7
Opera8.02/50/ 9tp1 3/7
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 4/7
Gecko 2.0/ 8.0/ 12.0 5/7
Gecko 24.0/ 36.0/ 48.0 6/7
Gecko 60.0 4/7
Test results fill properties
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51 0/16 0/24
Amaya11.3.1 2/16 2/24
KSVG1 1/16 1/24
WebKit 528.16 4/16 8/24
Adobe 9/16 14/24
Squiggle 1.7 7/16 11/24
Opera8.02/50 2/16 4/24
Opera9tp1 5/16 7/24
Opera9tp2/ beta1/2 7/16 11/24
Opera9.00/9.10 9/16 13/24
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 14/16 19/24
Opera11.00 11/16 16/24
Opera11.60/ 12,00 10/16 15/24
Gecko 2.0/ 8.0/ 12.0 15/16 21/24
Gecko 24.0/ 36.0/ 48.0 15/16 22/24
Gecko 60.0 11/16 16/24

stroke properties

stroke

e2005-08-28-01: §Q
set animation of the stroke property:
The stroke of several shapes in a group is set from light blue to blue after 3 seconds and to dark blue after another 3 seconds.

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

e2005-08-28-02: §Q
animateColor animation of the stroke property:
The stroke of several shapes in a group changes from magenta to blue to yellow within 10 seconds.

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

e2005-08-28-25: §Q
set animation of the stroke property:
The stroke property of the circle bottom right is set after 3s from none to blue for 3s. Then it returns to none again.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail duration for set ignored
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail circle gets black, not blue after none
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-08-28-26: §Q
discrete animation of the stroke property:
The stroke property of the circle bottom right is discrete animated from none to blue to none to blue and so on, begins with the set to blue with a begin 3s, the repeated duration is 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail random colors and no repetition
WebKit 528.16fail wrong timing
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail circle gets black, not blue after none
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2010-07-12-01: §M(2)P
inherited animated stroke:
The stroke from a group is inherited for the two circles. This stroke is animated with a begin of 9.5s and a dur of 10s with some values in the blue range.
The small circle shows the current value of the group for comparison. The large circle has its own animation of stroke, beginning at 2s with a dur of 10s with some values in the blue range. The last value is inherit. This means, it interpolates to the current inherited value. After the active duration the value inherit is frozen, this means the stroke value is the same as that of the small circle after 12s.
The fill of the large circle has the same appearance as the stroke all the time. But the animation is realised without inheritance and with a simpler values list. A difference between the fill and the stroke of the large circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51fail no stroke
Amaya11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
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 -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Gecko 60.0fail -

e2010-07-12-02: §M(2)P
inherited animated stroke:
The stroke from a group is inherited for the two circles. This stroke is animated with a begin of 2s and a dur of 10s with three values in the blue range.
The small circle shows the current value of the group for comparison. The large circle has its own animation of stroke, beginning at 2s with a dur of 10s with the values rgb(0,200,240);inherit and an end at 7s. After the active duration the value of 50 percent rgb(0,200,240) and 50 percent inherit is frozen.
The fill of the large circle has the same appearance as the stroke all the time. But the animation is realised without inheritance and with simpler animations. A difference between the stroke and the fill of the large circle indicates an error.

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

e2010-07-12-03: §M(2)P
inherited animated stroke:
Discrete animation of the stroke property.
The stroke from a group is inherited for the two circles. This stroke is animated with a begin of 2s and a dur of 12.5s with five values in the blue range.
The small circle shows the current value of the group for comparison. The large circle has its own animation of stroke, beginning at 2s with a dur of 15s with the values inherit;rgb(0,200,240);inherit. After the active duration the value is frozen.
The fill of the large circle has the same appearance as the stroke all the time. But the animation is realised without inheritance and with simpler set animations. A difference between the stroke and the fill of the large circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51fail no stroke
Amaya11.3.1fail wrong animation
KSVG1fail no animation
WebKit 528.16fail -
Adobeok -
Squiggle 1.7fail -
Opera8.02/50/ 9tp1/2/beta1/2fail -
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.0/ 36.0/ 48.0/ 60.0ok -

e2010-07-13-01: §M(2)P
animated stroke with currentColor:
The stroke from a group is inherited for the two circles as currentColor. This color is animated with a begin of 9.5s and a dur of 10s with some values in the blue range.
The small circle shows the current value of the group for comparison. The large circle has its own animation of stroke, beginning at 2s with a dur of 10s with some values in the blue range. The last value is currentColor. This means, it interpolates to the current color value. After the active duration the value currentColor is frozen, this means the stroke value is the same as that of the small circle after 12s.
The fill of the large circle has the same appearance as the stroke all the time. But the animation is realised without inheritance and with a simpler values list. A difference between the stroke and the fill of the large circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
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 -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Gecko 60.0fail -

e2010-07-13-02: §M(2)P
animated stroke with currentColor:
The stroke from a group is inherited for the two circles as currentColor. This color is animated with a begin of 2s and a dur of 10s with three values in the blue range.
The small circle shows the current value of the group for comparison. The large circle has its own animation of stroke, beginning at 2s with a dur of 10s with the values rgb(0,200,240);currentColor and an end at 7s. After the active duration the value of 50 percent rgb(0,200,240) and 50 percent currentColor is frozen.
The fill of the large circle has the same appearance as the stroke all the time. But the animation is realised with simpler animations. A difference between the stroke and the fill of the large circle indicates an error.

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

e2010-07-13-03: §M(2)P
animated stroke with currentColor:
Discrete animation of the stroke property.
The stroke from a group is inherited for the two circles as currentColor. This stroke is animated with a begin of 2s and a dur of 12.5s with five values in the blue range.
The small circle right below shows the current value of the group for comparison. The large circle has its own animation of stroke, beginning at 2s with a dur of 15s with the values currentColor;rgb(0,200,240);currentColor. After the active duration the value is frozen.
The small circle top left indicates the timing of the animation with three values, black for currentColor, gray for the value in the middle.
The fill of the large circle has the same appearance as the stroke all the time. But the animation is realised with simpler set animations. A difference between the stroke and the fill of the large circle indicates an error.

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

e2010-07-13-04: §M(2)P
animated stroke with currentColor and inherit:
The stroke from a group is inherited for the three circles, one from stroke, one from color with currentColor. The color is animated with a begin of 2s and a dur of 10s. The small circles show the inherited value and the currentColor. The large circle has its own animation of stroke, beginning at 2s with a dur of 10s with some values in the blue range. The first value is inherit, the last value is currentColor.
The fill of the large circle has the same appearance as the stroke all the time. But the animation is realised with a simpler values list. A difference between the stroke and the fill of the large circle indicates an error.

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

e2010-07-18-01: §M(2)P
Additive animation of the stroke property:
The stroke from a group is inherited for a circle.
The circle has its own animation of stroke. After the active duration the value is frozen.
The fill of the circle has the same appearance as the stroke all the time. But the animation is realised without inheritance and with simpler set animations. A difference between the stroke and the fill of the circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail wrong frozen value
Opera8.02/50fail no animation
Opera9tp1/2/beta1fail -
Opera9beta2/ 9.00/9.10fail wrong frozen value
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -
Test results stroke property
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/12 0/12
KSVG1 0/12 0/12
WebKit 528.16 3/12 3/12
Adobe 6/12 6/12
Squiggle 1.7 4/12 4/12
Opera8.02/50 2/12 2/12
Opera9tp1/tp2/ beta1/2 4/12 4/12
Opera9.00/9.10 6/12 6/12
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 10/12 10/12
Opera11.00/11.60/ 12,00 7/12 7/12
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 11/12 11/12
Gecko 60.0 7/12 7/12

stroke-width

e2005-08-28-03: §Q
set animation of the stroke-width property:
The stroke-width of several shapes in a group is set from 2 to 20 after 3 seconds.

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

e2005-08-28-04: §Q
animate animation of the stroke-width property:
The stroke-width of several shapes in a group changes from 2 to 20 within 10 seconds.

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

e2010-07-14-01: §M(1)P
inherited animated stroke-width:
The stroke-width from a group is inherited for circles. This stroke-width is animated with a begin of 9.5s and a dur of 10s with some values. The test circles have their own animation of stroke-width, beginning at 2s with a dur of 10s with some values.
The last value is inherit. This means, it interpolates to the current inherited value. After the active duration the value inherit is frozen.
The stroke-width of the blue top circles have the same appearance than that of the red circles below all the time. 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 no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
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 -
Gecko 2.0fail minor accuracy problems
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Gecko 60.0fail -

e2010-07-14-02: §M(1)P
inherited animated stroke-width:
The stroke from a group is inherited for circles. This stroke-width is animated with a begin of 2s and a dur of 10s with three values.
The test circle have their own animation of stroke-width, beginning at 2s with a dur of 10s with the values 10;inherit and an end at 7s. After the active duration the value of 50 percent of 10 and 50 percent inherit is frozen.
The stroke-width of the blue top circles have the same appearance than that of the red circles below all the time. 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 no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
Opera8.02/50/ 9tp1/2/beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail -
Opera9.00/9.10/ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Gecko 60.0fail -

e2010-07-14-03: §M(1)P
inherited animated stroke-width:
Discrete animation of the stroke-width property.
The stroke-width from a group is inherited for circles. This stroke-width is animated with a begin of 2s and a dur of 12.5s with five values.
The test circles have their own animation of stroke-width, beginning at 2s with a dur of 15s with the values inherit;1;inherit. After the active duration the value is frozen.
The stroke-width of the blue top circles have the same appearance than that of the red circles below all the time. 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 no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
Opera8.02/50/ 9tp1/2/beta1/2fail -
Opera9.00/9.10ok -
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2010-07-19-01: §M(1)P
Additive animation of the stroke-width property.:
The stroke-width from a group is inherited for circles. The test circles have their own animation of stroke-width. After the active duration the value is frozen.
The stroke-width of the blue top circles have the same appearance than that of the red circles below all the time. 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 no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail wrong error messages
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail -
Gecko 2.0/ 60.0ok -
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail -
Test results stroke-width property
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/6 0/6
KSVG1 0/6 0/6
WebKit 528.16 2/6 2/6
Adobe 2/6 2/6
Squiggle 1.7 2/6 2/6
Opera8.02/50/ 9tp1/tp2/ beta1/2 2/6 2/6
Opera9.00/9.10 4/6 4/6
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 2/6 2/6
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 5/6 5/6
Gecko 60.0 4/6 4/6

stroke-linecap

e2005-08-28-05: §Q
simple set animation of the stroke-linecap property:
The stroke-linecap of a line is set from butt to round after 5 seconds for one line and from butt to square for another. The gray parts should be covered completely by blue parts after this 5 seconds.

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

e2005-08-28-06: §Q
set animation of the stroke-linecap property:
The stroke-linecap of several shapes in a group is set from butt to square after 3 seconds and then to round after another 3 seconds.
Note, that stroke-linecap applies just to shapes with open ends like line or polyline, you have to look for details.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation, works for single elements and not groups - see example above
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail no animation; Opera as bug-174718
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-08-28-07: §Q
discrete animate animation of the stroke-linecap property:
The stroke-linecap of several shapes in a group changes from butt to square to round within 6 seconds.
Note, that stroke-linecap applies just to shapes with open ends like line or polyline, you have to look for details.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation, may work for single elements and not groups
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail no animation; Opera bug-174718
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2011-04-01-01: §M(1)P
stroke-linejoin and stroke-linecap round:
The widths of paths with stroke-linejoin and stroke-linecap round are animated and compared with filled paths simulating the shape. If something red gets visible, this indicates an error.

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

e2011-04-01-02: §M(1)P
stroke-linecap round:
The widths of paths with stroke-linecap round are animated and compared with paths and circles simulating the shape. If something red gets visible, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -
Test results stroke-linecap property
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/5 0/5
KSVG1 1/5 1/5
WebKit 528.16 5/5 5/5
Adobe 5/5 5/5
Squiggle 1.7 5/5 5/5
Opera8.02/50 2/5 2/5
Opera 9tp1/tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 5/5 5/5
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 5/5 5/5

stroke-linejoin

e2005-08-28-08: §Q
simple set animation of the stroke-linejoin property:
The stroke-linejoin of a simple path is set from bevel to miter after 5 seconds. The gray parts should be covered completely by blue parts after this 5 seconds.

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

e2005-08-28-09: §Q
set animation of the stroke-linejoin property:
The stroke-linejoin of several shapes in a group is set from from bevel to round after 3 seconds an then to miter after another 3 seconds.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation, works for single elements and not groups - see example above
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail no animation; Opera bug-174719
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-08-28-10: §Q
discrete animate animation of the stroke-linejoin property:
The stroke-linejoin of several shapes in a group changes from bevel to round to miter in 6 seconds.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation, may work for single elements and not groups
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail no animation; Opera bug-174719
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2011-04-02-01: §M(1)P
stroke-linejoin bevel:
Paths with stroke-linejoin bevel are animated and compared with filled paths simulating the bevel shape. If something red gets visible, the bevel is displayed wrong.
The bevel corners are given with the points, that would appear, if there would be no linejoin, but two separated paths instead. The two related points are simply connected. The inner linejoin is always the intersection of the two strokes.

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

e2011-04-02-02: §M(1)P
stroke-linejoin bevel:
The widths of paths with stroke-linejoin bevel are animated and compared with filled paths simulating the bevel shape. If something red gets visible, the bevel is displayed wrong.
The bevel corners are given with the points, that would appear, if there would be no linejoin, but two separated paths instead. The two related points are simply connected. The inner linejoin is always the intersection of the two strokes.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16(ok) (minor disturbances)
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -
Test results stroke-linejoin property
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/5 0/5
KSVG1 1/5 1/5
WebKit 528.16 5/5 5/5
Adobe 5/5 5/5
Squiggle 1.7 5/5 5/5
Opera8.02/50 2/5 2/5
Opera 9tp1/tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 5/5 5/5
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 5/5 5/5

stroke-miterlimit

e2005-08-28-11: §Q
set animation of the stroke-miterlimit property:
The stroke-miterlimit of a simple path is set from 1 to 10 after 5 seconds. The gray parts should be covered completely by blue parts after this 5 seconds.

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

e2005-08-28-12: §Q
animate animation of the stroke-miterlimit property:
The stroke-miterlimit of a group of simple paths changes from 1 to 60 within 5 seconds. Because stroke-miterlimit is a number, it is given as a linear animation, not a discrete, anyway the effect is a discrete switch according to the nature of this property. The visible effect is, that the paths get spikes in the center, from top to bottom.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation of groups, but works for single elements
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50fail no animation; Opera bug-174720
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2011-04-03-01: §M(1)P
stroke-miterlimit:
If the relative miter length of a corner would become longer than the value of the stroke-miterlimit property, the stroke-linejoin turns effectively from miter to bevel.
Two simple test paths are animated together with the stroke-miterlimit. On top, the stroke-linejoin remains the default miter. Below the stroke-miterlimit is always smaller than the relative miter length of the corner, therefore the stroke-linejoin is effectively always bevel.
For both test paths there are comparison paths with a not animated stroke-miterlimit, on top larger than the animated value of the test path, below it is set to 1, therefore never larger than the animated value of the test path.
The resulting effect are two visible blue paths. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no display
KSVG1fail no animation
WebKit 528.16failinitially wrong, minor disturbances
Adobefail top wrong
Squiggle 1.7fail completely wrong
Opera8.02/50fail completely wrong
Opera9tp1fail bottom wrong
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0/ 10.60(ok) (minor initial problems)
Opera10.0 alpha/beta/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0fail accuracy problems
Test results stroke-miterlimit property
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/3 0/3
KSVG1 1/3 1/3
WebKit 528.16 2/3 2/3
Adobe 2/3 2/3
Squiggle 1.7 2/3 2/3
Opera8.02/50 0/3 0/3
Opera 9tp1 2/3 2/3
Opera 9tp2/ 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 3/3 3/3
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 2/3 2/3

stroke-dasharray

e2005-08-28-13: §Q
set animation of the stroke-dasharray property:
The stroke-dasharray of a rect is set from 10,90 to 50,50 after 5 seconds. The gray parts should be covered completely by blue parts after this 5 seconds.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail element ignored
KSVG1ok -
WebKit 528.16ok -
Adobefail no animation
Squiggle 1.7(ok) minor problems with the corners with some window sizes
Opera8.02/50fail no animation; Opera bug-174721
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-08-28-14: §Q
animate animation of the stroke-dasharray property:
The stroke-dasharray of a rect changes from 10,90 to 50,50 within 10 seconds. The gray parts should be covered completely by blue parts after this 10 seconds. Because stroke-dasharray are numbers, it is given as a linear animation, not a discrete.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail element ignored
KSVG1fail no animation, crashes browser
WebKit 528.16ok -
Adobefail no animation
Squiggle 1.7fail discrete animation, not linear
Opera8.02/50fail no animation; Opera bug-174721
Opera9tp1/2/ beta1/2/ 9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail painting problems in the edges, but animates correct.
Opera9.00fail wrong stroke-dasharray.
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 48.0/ 60.0ok -
Gecko 36.0fail painting problems in the edges, but animates correct.

e2006-08-12-01: §M(2)PX
animation of the stroke-dasharray property:
Animation of stroke-dasharray of a blue path containing subpaths. The path is divided in five paths of the same length, altogether with a length of 4000. stroke-dasharray is animated from 0,4000 to 4000,0 in 10s. This means, the complete path is at the beginning invisible and is painted completely visible to the end. Light blue paths are animated simulating the animation just for comparison. Is the stroke-dasharray continued with the beginning of a new subpath or restarted with the initial dash?
In the stroke-dasharray section of the specification (1.1) it is not mentioned, how to handle the continuation of dasharray in subpaths, but in the path chapter we find in the moveto section (8.3.2):
'The "moveto" commands (M or m) establish a new current point. The effect is as if the "pen" were lifted and moved to a new location.'
This sounds more as a continuation of dasharray as like a restart, but it is a very weak hint, anyway it is the only useful behaviour. Anyway the W3C SVG working group leaves this explicitely open in SVG1.2tiny.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail element ignored
KSVG1fail no animation, crashes browser
WebKit 528.16fail discrete animation
Adobefail no animation
Squiggle 1.7fail discrete animation, not linear
Opera8.02/50fail no animation; Opera bug-174721
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0fail wrong animation

e2008-03-14-21: §UA(I)
Lorenz Attractor:
Animation of the Lorenz-Attractor. The trajectory is approximately painted using an animation of the stroke-dasharray property. Additionally for comparison a small circle is moved along the same path using animateMotion. Both have the same timing.
The buttons bottom right (or the related GET parameters) can be used to influence, whether the animation continues manually or automatically or if it restarts.
In case of need the GET parameters can be used to define the start position and other parameters. s is a parameter for scaling, dur the duration in seconds (optional anz the number of animation points, per default 20*dur).
Differential equation:
dx/dt = k(y-x)
dy/dt = l x - y - x z
dz/dt = x y - m z
The problem is rotated with an angle o (in degree) around the direction (x, y, z).

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation, incomplete display
KSVG1fail no animation, crashes browser
WebKit 528.16fail display nonsense
Adobefail no animation of stroke-dasharray
Squiggle 1.7fail wrong timing of stroke-dasharray animation, discrete animation
Opera8.02/50/ 9tp2/ beta1/2/fail no animation; Opera bug-174721
Opera9tp1/ 9.00/9.10(ok) poor interpolation at the end of the 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/ 60.0ok -
Gecko 24.0/ 36.0/ 48.0(ok) timing problems at the end of the animation

e2008-03-15-01: §P
discrete stroke-dasharray animation:
stroke-dasharray is animated discrete with different list item number lengths as values. Because stroke-dasharray is defined as a pattern, each list item can be expanded to the least common multiple for comparison. The blue test case has always the same pattern as the dark blue reference pattern behind it using an expanded list. A light blue pattern on top indicates the same pattern using simple set animations of display. If the blue test case is not always between the reference pattern and the reference pattern not always below and on top of the test case, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation, no stroke-dasharray
KSVG1fail no animation, crashes browser
WebKit 528.16fail partly wrong animation
Adobefail no animation of stroke-dasharray
Squiggle 1.7fail slightly wrong pathLength
Opera8.02/50fail no animation; Opera bug-174721
Opera9tp1/2/ beta1/2/ 9.00/9.10fail wrong animation
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2008-03-15-02: §P
stroke-dasharray animation:
stroke-dasharray is animated linear with different list item number lengths as values. Because stroke-dasharray is defined as a pattern, each list item can be expanded to the least common multiple for comparison and for a continuous animation. The blue test case has always the same pattern as the dark blue reference pattern behind it using an expanded list. A light blue pattern on top indicates the same pattern using simple from-to animations for each interpolation step. If the blue test case is not always between the reference pattern and the reference pattern not always below and on top of the test case, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation, no stroke-dasharray
KSVG1fail no animation, crashes browser
WebKit 528.16fail wrong animation
Adobefail no animation of stroke-dasharray
Squiggle 1.7fail discrete animation, slightly wrong pathLength
Opera8.02/50fail no animation; Opera bug-174721
Opera9tp1fail discrete animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail mixture of continuous and discrete animation
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0ok -
Gecko 24.0fail dark blue comparison not animated, instabilities for test case

e2008-03-15-03: §P
stroke-dasharray and rectangle:
A blue rectangle with rounded corners is painted within 20s. The shape is given in gray for comparison. A black arrow and a thin black line show the starting point and the direction of the animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51fail crashes browser
Amaya11.3.1fail no animation
KSVG1fail no animation, crashes browser
WebKit 528.16fail confused animation
Adobefail no animation of stroke-dasharray
Squiggle 1.7fail discrete animation, wrong start position
Opera8.02/50fail no animation; Opera bug-174721
Opera9tp1fail wrong start position and direction, stroke incomplete
Opera9tp2/ beta1/2fail no animation
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail curious centered hole
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Gecko 60.0fail curious centered hole

e2008-03-15-04: §P
stroke-dasharray and circle:
stroke-dasharray and circle 2:
A blue circle is painted within 20s (60s). The shape is given in gray for comparison. A black arrow and a thin black line show the starting point and the direction of the animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51fail crashes browser
Amaya11.3.1fail no animation
KSVG1fail no animation, crashes browser
WebKit 528.16fail confused animation
Adobefail no animation of stroke-dasharray
Squiggle 1.7fail discrete animation, slightly wrong start position
Opera8.02/50fail no animation; Opera bug-174721
Opera9tp1fail wrong start position and direction, stroke incomplete
Opera9tp2/ beta1/2/fail no animation
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail slightly wrong start position, curious centered hole
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail second example incomplete rendering
Gecko 60.0fail curious centered hole

e2008-03-15-05: §P
stroke-dasharray and ellipse:
stroke-dasharray and ellipse 2:
A blue ellipse is painted within 20s (60s). The shape is given in gray for comparison. A black arrow and a thin black line show the starting point and the direction of the animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51fail crashes browser
Amaya11.3.1fail no animation
KSVG1fail no animation, crashes browser
WebKit 528.16fail confused animation (second sample frozen)
Adobefail no animation of stroke-dasharray
Squiggle 1.7fail discrete animation, slightly wrong start position
Opera8.02/50fail no animation; Opera bug-174721
Opera9tp1fail wrong start position and direction, stroke incomplete
Opera9tp2/ beta1/2/fail no animation
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail slightly wrong start position, curious centered hole
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail second example incomplete rendering
Gecko 60.0fail curious centered hole

e2008-03-15-06: §P
stroke-dasharray and polygon:
A blue polygon with the shape of a triangle is painted within 20s. The shape is given in gray for comparison. A black arrow and a thin black line show the starting point and the direction of the animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51fail crashes browser
Amaya11.3.1fail no animation
KSVG1fail no animation, crashes browser
WebKit 528.16fail confused animation
Adobefail no animation of stroke-dasharray
Squiggle 1.7fail discrete animation, stroke incomplete
Opera8.02/50fail no animation; Opera bug-174721
Opera9tp1fail wrong start position, stroke incomplete
Opera9tp2/ beta1/2/fail no animation
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail flickering starting area
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -
Test results stroke-dasharray property
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/10 0/10
KSVG1 1/10 1/10
WebKit 528.16 2/10 2/10
Adobe 0/10 0/10
Squiggle 1.7 1/10 1/10
Opera8.02/50 0/10 0/10
Opera 9tp1 6/10 6/10
Opera 9tp2/ beta1/2 1/10 1/10
Opera 9.00/9.10 1/10 2/10
Opera 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 3/10 3/10
Gecko 2.0/ 8.0/ 12.0/ 48.0 7/10 7/10
Gecko 24.0/ 36.0/ 60.0 6/10 6/10

stroke-dashoffset

e2005-08-28-15: §Q
set animation of the stroke-dashoffset property:
The stroke-dashoffset of a rect is set from 0 to 50 after 5 seconds. The gray parts should be covered completely by blue parts after this 5 seconds.

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

* The behaviour for corners ist not well defined, the visible results can be different.

e2005-08-28-16: §M(2)P
animate animation of the stroke-dashoffset property:
The stroke-dashoffset of a rect is changed in a way that it looks like the shape of the rect is painted within 20s. The shape is given in gray for comparison. A black arrow shows the starting point and the direction of the animation.

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

e2005-08-28-17: §M(2)P
animate animation of the stroke-dashoffset property:
The stroke-dashoffset of a path is changed in a way that it looks like the shape of the rect is painted within 20s. The shape is given in gray for comparison. A black arrow shows the starting point and the direction of the animation.

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

e2005-08-28-18: §M(2)P
animate animation of the stroke-dashoffset property:
A blue line is painted within 20s. The shape is given in gray for comparison. A black arrow shows the starting point and the direction of the animation.

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

e2005-08-28-19: §M(2)P
animate animation of the stroke-dashoffset property:
A blue rectangle with rounded corners is painted within 20s. The shape is given in gray for comparison. A black arrow shows the starting point and the direction of the animation.

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

e2005-08-28-20: §M(2)P
animate animation of the stroke-dashoffset property:
A blue triangle is painted within 20s (using path and pathLength). The shape is given in gray for comparison. A black arrow shows the starting point and the direction of the animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail pathLength ignored and therefore incomplete animation
WebKit 528.16fail initially wrong and pathLength ignored
AdobefailpathLength ignored and therefore incomplete animation
Squiggle 1.7failwrong start, pathLength ignored and therefore incomplete animation
Opera8.02/50failpathLength ignored and therefore incomplete animation
Opera9tp1/2faillast edge not painted
Opera 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/ 36.0/ 48.0/ 60.0failpathLength ignored and therefore incomplete animation
Gecko 24.0ok -

e2005-08-28-21: §M(2)P
animate animation of the stroke-dashoffset property:
A blue circle is painted within 20s. The shape is given in gray for comparison. A black arrow shows the starting point and the direction of the animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1ok -
WebKit 528.16ok -
Adobefail wrong starting point
Squiggle 1.7ok -
Opera8.02/50fail wrong direction of animation
Opera9tp1fail wrong direction of 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/ 36.0/ 48.0/ 60.0ok -

e2005-08-28-22: §M(2)P
animate animation of the stroke-dashoffset property:
A blue ellipse is painted within 20s. The shape is given in gray for comparison. A black arrow shows the starting point and the direction of the animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1ok -
WebKit 528.16ok -
Adobefail wrong starting point
Squiggle 1.7ok -
Opera8.02/50fail wrong direction of animation
Opera9tp1fail wrong direction of 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/ 36.0/ 48.0/ 60.0ok -

e2005-08-28-23: §M(2)P
animate animation of the stroke-dashoffset property:
A blue polyline is painted within 20s. The shape is given in gray for comparison. A black arrow shows the starting point and the direction of the animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1ok -
WebKit 528.16fail wrong behaviour for last part of the path
Adobeok -
Squiggle 1.7ok -
Opera8.02/50(ok) minor problems at the animation begin
Opera9tp1(ok) minor problems at the animation begin
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-08-28-24: §Q
set animation of several stroke and fill properties:
To be fair to the abilities of KSVG, this is a more simple set animation to single elements.
Each 3s another stroke or fill property is set to another value. Animated properties: stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray, stroke-dashoffset, fill, fill-rule.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1(ok) *
WebKit 528.16(ok) *
Adobefail no animation of stroke-dasharray *
Squiggle 1.7(ok) *
Opera8.02/50fail no animation of several properties *
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok *
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok *

* wrong combination of stroke-linecap and stroke-dasharray, stroke-dasharray is a pattern and defines no subpaths, therefore the stroke-linecap has only applied to the caps of the line and not to all dashes of the stroke-dasharray.

Test results stroke-dashoffset property
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/10 0/10
KSVG1 7/10 7/10
WebKit 528.16 8/10 8/10
Adobe 6/10 6/10
Squiggle 1.7 8/10 8/10
Opera8.02/50 4/10 4/10
Opera 9tp1 6/10 6/10
Opera 9tp2 8/10 8/10
Opera 9beta1 9/10 9/10
Opera 9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10/10 10/10
Opera 10.60/ 11.00/11.60/ 12,00 9/10 9/10
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 9/10 9/10
Gecko 24.0 10/10 10/10

stroke-opacity

This is SVG1.1 or -basic, but not SVG-tiny -
e2005-08-28-31: §Q
set animation of the stroke-opacity property:
Several shapes in a group change their stroke-opacity from 0.8 to 0.5 after 3s.

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

This is SVG1.1 or -basic, but not SVG-tiny -
e2005-08-28-32: §Q
animate animation of the stroke-opacity property:
Several shapes in a group change their stroke-opacity from 1 to 0 in 10s.

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

This is SVG1.1 or -basic, but not SVG-tiny -
e2008-03-13-31: §Q
additivity of stroke-opacity:
Several shapes in a group are referenced with a use element. This changes its stroke-opacity with additive animations on the left. This is compared with a use on the right using simpler animations to get the same effect.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail area of opacity incomplete, no animation
KSVG1fail no animation for groups
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail wrong or no 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/ 36.0/ 48.0/ 60.0ok -

This is SVG1.1 or -basic, but not SVG-tiny -
e2008-03-13-32: §Q
additivity of stroke-opacity:
Several shapes in a group are referenced with a use element. This changes its stroke-opacity with out of range values and stroke-opacity with additive animations on the left. This is compared with a use on the right using simpler animations to get the same effect.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail area of opacity incomplete, no animation
KSVG1fail no animation for groups
WebKit 528.16ok -
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail wrong or no 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/ 36.0/ 48.0fail wrong animation
Gecko 60.0ok -

This is SVG1.1 or -basic, but not SVG-tiny -
e2010-07-20-01: §M(2)P
inherited animated stroke-opacity:
Animation of the stroke-opacity property.
The stroke-opacity from a group is inherited for the two circles. This fill is animated with a begin of 9.5s and a dur of 10s with some values. The small circle shows the current value of the group for comparison. The large circle has its own animation of stroke-opacity, beginning at 2s with a dur of 10s with some values. The last value is inherit. This means, it interpolates to the current inherited value. After the active duration the value inherit is frozen, this means the stroke-opacity value is the same as that of the small circle after 12s.
The fill of the large circle has the same appearance as the stroke all the time. But the animation is realised without inheritance and with a simpler values list. A difference between the fill and the stroke of the large circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
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 -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Gecko 60.0fail -

This is SVG1.1 or -basic, but not SVG-tiny -
e2010-07-20-02: §M(2)P
inherited animated stroke-opacity:
Animation of the stroke-opacity property.
The stroke-opacity from a group is inherited for the two circles. This stroke-opacity is animated with a begin of 2s and a dur of 10s with three values. The small circle shows the current value of the group for comparison. The large circle has its own animation of stroke-opacity, beginning at 2s with a dur of 10s with the values 0.5;inherit and an end at 7s. After the active duration the value of 50 percent 0.5 and 50 percent inherit is frozen.
The fill of the large circle has the same appearance as the stroke all the time. But the animation is realised without inheritance and with simpler animations. A difference between the fill and the stroke of the large circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
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 -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -
Gecko 60.0fail -

This is SVG1.1 or -basic, but not SVG-tiny -
e2010-07-20-03: §M(2)P
inherited animated stroke-opacity:
Discrete animation of the stroke-opacity property.
The stroke-opacity from a group is inherited for the two circles. This stroke-opacity is animated with a begin of 2s and a dur of 12.5s with five values. The small circle shows the current value of the group for comparison. The large circle has its own animation of stroke-opacity, beginning at 2s with a dur of 15s with the values inherit;0.5;inherit. After the active duration the value is frozen.
The fill of the large circle has the same appearance as the stroke all the time. But the animation is realised without inheritance and with simpler set animations. A difference between the fill and the stroke of the large circle indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail no animation
WebKit 528.16fail -
Adobefail -
Squiggle 1.7fail -
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 -
Gecko 2.0/ 8.0/ 60.0fail minor timing problems
Gecko 12.0/ 24.0/ 36.0/ 48.0ok -
Test results stroke-opacity property
user-agentSVG 1.1
user-agentSVG 1.1
Amaya9.51/ 11.3.1 0/7
KSVG1 0/7
WebKit 528.16 4/7
Adobe 4/7
Squiggle 1.7 4/7
Opera8.02/50/ 9tp1 2/7
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 4/7
Gecko 2.0/ 8.0 5/7
Gecko 12.0/ 24.0/ 36.0/ 48.0 6/7
Gecko 60.0 4/7
Test results stroke properties
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/51 0/58
KSVG1 11/51 11/58
WebKit 528.16 27/51 31/58
Adobe 26/51 30/58
Squiggle 1.7 27/51 31/58
Opera8.02/50 12/51 14/58
Opera9tp1 25/51 27/58
Opera9tp2 28/51 32/58
Opera9 beta1 29/51 33/58
Opera9 beta2 30/51 34/58
Opera9.00/9.10 35/51 39/58
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 36/51 40/58
Opera10.60 35/51 39/58
Opera11.00/11.60/ 12,00 32/51 36/58
Gecko 2.0/ 8.0 44/51 50/58
Gecko 12.0/ 24.0/ 48.0 44/51 51/58
Gecko 36.0 43/51 50/58
Gecko 60.0 38/51 42/58

Visibility and display properties

visibility

e2005-08-28-41: §Q
set animation of the visibility property:
The visibility of a circle is set to hidden after 3s for 6s.

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

e2005-08-28-42: §Q
animate animation of the visibility property:
The visibility of a circle is set to collapse after 3s for 3s. This is repeated.

Test results
user-agentresultcomment
W3C-ValidatorokSVG tiny 1.1
Amaya9.51/ 11.3.1fail no animation
KSVG1fail circle disappears forever without waiting 3s
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/ 36.0/ 48.0/ 60.0ok -

display

e2005-08-28-51: §Q
set animation of the display property:
The display of a circle is set to none after 3s for 6s.

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

e2005-08-28-52: §Q
animate animation of the display property:
The display of a circle is set to none after 3s for 3s. This is repeated.

Note, that display has much more values than 'none', 'block' and 'inline' used in these examples, but the others seem to be not very important for SVG.

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

Rendering Properties

e2005-08-28-71: §Q
animateColor animation of the color-rendering property:
A fast color animation is applied to two rectangles, one on the left, one on the right. Within 0.1s several colors are animated. With a discrete animation the values of the color-rendering property are changed all 5s . If this attribute is supported somehow, there have to be differences between the left and the right rectangle for 5s and other differences after this again for 5s, after this it has to be 5s the same. Then the animation is repeated. Overall there have to be some differences between left and right within 15s.
Note: For a perfect and very fast user-agent there should be no difference at all, maybe you have to use an old computer or you have to slow down your processor to avoid too much perfection ;o)

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

* even with an old computer or a display with ssh there was no difference, but sometimes there are disturbances in both rectangles equally, not just in one. Therefore I am quite sure, this attribute is not supported. In the documentation of Opera9 beta is noted, that this is not supported.

This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-01: §Q
animation of the color-interpolation property:
A fast color animation is applied to two rectangles, one on the left, one on the right. Within 0.1s several colors are animated. With a discrete animation the values of the color-interpolation property are changed all 5s. If this attribute is supported somehow, there have to be differences between the left and the right rectangle between for 5s and other differences after this again for 5s, after this it has to be 5s the same. Then the animation is repeated.

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

* No visible effect, either this user-agents are able to give optimal results for any condition or they simply ignore this properties. If anybody knows a better test, please send me an email.

color-interpolation-filters property: see filter section.

This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-02: §Q
animation of the shape-rendering property:
Each second the shape-rendering is changed. The values are: auto;geometricPrecision;crispEdges;optimizeSpeed. With geometricPrecision the shapes are exact as defined in the document, with crispEdges the user agent shall attempt to emphasize the contrast for example by switching off the anti-aliasing, here especially for the thin red line on top. optimizeSpeed may simplify the rendering of the shapes. auto may be close to the rendering of geometricPrecision. fill of a circle is changed between gray and black just for timing.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail no animation *
WebKit 528.16ok (maybe no difference between auto and geometricPrecision on one side and crispEdges and optimizeSpeed on the other side, but a clear difference between both groups)
Adobeok (maybe no difference between auto and geometricPrecision on one side and crispEdges and optimizeSpeed on the other side, but a clear difference between both groups)
Squiggle 1.7ok just geometricPrecision results in different rendering, auto seems to be related to the previous value
Opera8.02/50/ 9tp1/2/ beta2/ 9.00/9.10/ 9.50 alpha/betafail no animation * (partly fixed in 9.50 beta2)
Opera9 beta1fail crashes immediately
Opera9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail animates, but still the blue path has corners *
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok (maybe no difference between auto and geometricPrecision on one side and crispEdges and optimizeSpeed on the other side, but a clear difference between both groups)

* For KSVG and Opera the quality of the rendered path is very poor. There is no corner in center top, the path is a continuously differentiable curve without edges and corners.

This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-03: §Q
animation of the text-rendering property:
Each second the text-rendering is changed. The values are: auto;optimizeSpeed;optimizeLegibility;geometricPrecision
With geometricPrecision the shapes are exact as defined in the font, with optimizeLegibility the user agent shall attempt to emphasize the contrast for example by switching on the anti-aliasing or changing the font. optimizeSpeed may simplify the rendering of the shapes. auto may be close to the rendering of optimizeLegibility. fill of a circle is changed between gray and black just for timing.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail no animation
WebKit 528.16fail no animation
Adobeok (maybe no difference between optimizeSpeed and optimizeLegibility)
Squiggle 1.7(ok) (maybe no difference between some values)
Opera8.02/50 9tp1/2/ 10.0 alpha/beta/ 10.0fail no animation
Opera9 beta1fail crashes immediately
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.60/ 11.00/11.60/ 12,00(ok) (maybe no difference between some values)
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok (only optimizeLegibility different)

This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-04: §Q
animation of the image-rendering property:
Each second the image-rendering is changed. The values are: auto;optimizeSpeed;optimizeQuality With optimizeQuality the image should the resampled more sophisticated, resuling in a smoother rendering. optimizeSpeed may simplify the rendering of the image. auto may be close to the rendering of optimizeQuality. fill of a circle is changed between gray and black just for timing.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail no animation
WebKit 528.16fail no animation
Adobeok (maybe no difference between auto and optimizeQuality)
Squiggle 1.7ok (maybe no difference between auto and optimizeQuality)
Opera8.02/50/ 9tp1fail no 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 (maybe no difference between auto and optimizeQuality)
Gecko 2.0/ 24.0/ 60.0ok (maybe no difference between auto and optimizeQuality)
Gecko 8.0/ 12.0/ 36.0/ 48.0fail no animation

This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-05: §Q
animation of the color-rendering property for a linearGradient:
color-rendering is set from optimizeQuality to optimizeSpeed after 3s and to auto after another 3s.

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

This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-06: §Q
animation of the color-interpolation property for a linearGradient:
color-interpolation is set from auto to linearRGB after 3s and to sRGB after another 3s and then to auto again. When the animation is finished, the fill is set to yellow.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail no animation
WebKit 528.16fail no animation
Adobeok no difference between auto and sRGB, this is ok according to the specification
Squiggle 1.7fail no animation
Opera8.02/50/ 9tp1/2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail no animation
Opera9 beta1fail crashes immediately
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0fail no animation

This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-07: §Q
animation of the color-interpolation property with opacity:
A fast color animation is applied to two rectangles, one on the left, one on the right. Within 0.1s several colors are animated. With a discrete animation the values of the color-interpolation property are changed all 5s . If this attribute is supported somehow, there have to be differences between the left and the right rectangle between for 5s and other differences after this again for 5s, after this it has to be 5s the same. Then the animation is repeated. opacity is animated from 0.3 to 1 in 5s with repetition.

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

This is SVG or SVG basic, but not SVG tiny:
e2005-10-06-08: §Q
animation of the color-rendering property with opacity:
A fast color animation is applied to two rectangles, one on the left, one on the right. Within 0.1s several colors are animated. With a discrete animation the values of the color-rendering property are changed all 5s . If this attribute is supported somehow, there have to be differences between the left and the right rectangle between for 5s and other differences after this again for 5s, after this it has to be 5s the same. Then the animation is repeated. opacity is animated from 0.3 to 1 in 5s with repetition.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail no animation
WebKit 528.16fail no animation
Adobefail no visible difference
Squiggle 1.7fail no animation
Opera8.02/50/ 9tp1/2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00failno visible difference
Opera9 beta1fail crashes immediately
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0fail no visible difference
Test results rendering properties
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51/ 11.3.1 0/1 0/9
KSVG1 0/1 0/9
WebKit 528.16 0/1 1/9
Adobe 0/1 4/9
Squiggle 1.7 0/1 3/9
Opera8.02/50 0/1 0/9
Opera9tp1 0/1 0/9
Opera9tp2/ beta1 0/1 1/9
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.60/ 11.00/11.60/ 12,00 0/1 2/9
Opera10.0 alpha/beta/ 10.0 0/1 1/9
Gecko 2.0/ 24.0/ 60.0 0/1 3/9
Gecko 8.0/ 12.0/ 36.0/ 48.0 0/1 2/9

Markers

Markers are not part of SVG tiny or basic.

e2005-10-02-01: §Q
set animation of the markerUnits attribute:
The markerUnits attribute is set from strokeWidth to userSpaceOnUse after 3s for 3s. The marker becomes very small in these 3s.

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

e2005-10-02-02: §M(2)P
set animation of the refX and refY attributes:
refX and refY of the marker element are set to different values after 3s and 6s for 6s and 3s. Positions of the marker are given in light gray.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail just one set, not both
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50/ 9tp1fail element ignored
Opera9tp2/ beta1fail property overflow wrong in animation
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-10-02-03: §Q
animation of the refX and refY attributes:
refX and refY of the marker element are animated with a duration of 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail no animation
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50/ 9tp1fail element ignored
Opera9tp2/ beta1fail property overflow wrong in animation
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-10-02-04: §Q
set animation of the markerWidth and markerHeight attributes:
markerWidth and markerHeight of the marker element are set to different values after 3s and 6s for 6s and 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail just one set, not both
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50/ 9tp1fail element ignored
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-10-02-05: §M(2)P
animation of the markerWidth and markerHeight attributes:
markerWidth and markerHeight of the marker element are animated with a duration of 10s. Gray markers show the initial and final values.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail no animation
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50/ 9tp1fail element ignored
Opera9tp2/ beta1fail property overflow wrong in animation
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-10-02-06: §Q
set animation of the orient attribute:
orient of the marker element are set from 0 to 180 after 3s for 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail animated, but result seems to have a strange clipping path
WebKit 528.16fail wrong marker position
Adobefail no animation
Squiggle 1.7fail no animation (including error messages)
Opera8.02/50/ 9tp1fail element ignored
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-10-02-07: §Q
animation of the orient attribute:
orient of the marker element are changes from 0 to 360 in 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail no animation
WebKit 528.16fail wrong marker position
Adobefail no animation
Squiggle 1.7fail no animation (including error messages)
Opera8.02/50/ 9tp1fail element ignored
Opera9tp2/ beta1fail no animation
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-10-02-08: §Q
animateTransform of a marker path:
The path in a marker element is rotated with animateTransform in 10s with repetition.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail ignored
Amaya11.3.1fail completely confused
KSVG1fail no animation
WebKit 528.16fail wrong marker position, no animation
Adobeok -
Squiggle 1.7fail no animation
Opera8.02/50/ 9tp1fail element ignored
Opera9tp2/ beta1fail property overflow wrong in animation
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 48.0/ 60.0ok -
Gecko 24.0/ 36.0fail no animation

e2005-10-02-09: §Q
set animation of the marker-end property:
The marker-end property is set from one marker to another after 3s for 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail animated, but result seems to have a strange clipping path
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail element ignored
Opera9tp2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9 beta1fail property overflow wrong in animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-10-02-10: §Q
set animation of the marker-start property:
The marker-start property is set from one marker to another after 3s for 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail animated, but result seems to have a strange clipping path
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail element ignored
Opera9tp2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9 beta1fail property overflow wrong in animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-10-02-11: §Q
set animation of the marker-mid property:
The marker-mid property is set from one marker to another after 3s for 3s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail animated, but result seems to have a strange clipping path
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail element ignored
Opera9tp2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Opera9 beta1fail property overflow wrong in animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2005-10-02-12: §Q
set animation of the marker property:
The marker property is set from one marker to another after 3s for 3s.
According to the DTD, this property is only available with CSS, not with XML.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51/ 11.3.1fail ignored
KSVG1fail animated, but result seems to have a strange clipping path
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7fail no animation, wrong error message
Opera8.02/50/ 9tp1/2fail element or property ignored
Opera9 beta1fail property overflow wrong in animation
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0ok -

e2009-08-06-01: §Q
marker and animated path:
A path with marker elements is animated within 60s. The markers are always aligned along the path.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail ignored
Amaya11.3.1fail position confused, no animation
KSVG1fail no marker, no animation
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7ok -
Opera8.02/50/ 9tp1fail no marker
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/ 48.0/ 60.0ok -
Gecko 24.0/ 36.0fail path for a short time cut/incomplete

e2009-08-06-02: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s. The markers are always aligned along the path. There is no visible change of the path appearance, but there are underlying red triangles indicating the position and alignment. The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail ignored
Amaya11.3.1fail position confused, no animation
KSVG1fail crashes
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7fail wrong marker alignment
Opera8.02/50/ 9tp1fail no marker
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 marker alignment
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0fail wrong marker alignment
Gecko 48.0/ 60.0ok -

e2009-08-06-03: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s. The markers are always aligned along the path. There are underlying red triangles indicating the position and alignment. The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail ignored
Amaya11.3.1fail position confused, no animation
KSVG1fail crashes
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7fail wrong marker alignment
Opera8.02/50/ 9tp1fail no marker
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 marker alignment
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0fail wrong marker alignment
Gecko 48.0/ 60.0ok -

e2009-08-06-04: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s. The markers are always aligned along the path. There is no visible change of the path appearance, but there are underlying red triangles indicating the position and alignment. The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail ignored
Amaya11.3.1fail position confused, no animation
KSVG1fail crashes
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7fail wrong marker alignment
Opera8.02/50/ 9tp1fail no marker
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 marker alignment
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0fail wrong marker alignment
Gecko 48.0/ 60.0ok -

e2009-08-06-05: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s. The markers are always aligned along the path. There are underlying red triangles indicating the position and alignment. The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail ignored
Amaya11.3.1fail position confused, no animation
KSVG1fail crashes
WebKit 528.16fail wrong marker position
Adobeok -
Squiggle 1.7fail wrong marker alignment
Opera8.02/50/ 9tp1fail no marker
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 marker alignment
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0fail wrong marker alignment
Gecko 48.0/ 60.0ok -

e2009-08-08-01: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s. The markers are always aligned along the path. For an intermediate time of 10s two markers have no direction, therefore they point to the right. There are underlying red triangles indicating the position and alignment. The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail ignored
Amaya11.3.1fail position confused, no animation
KSVG1fail no animation
WebKit 528.16fail wrong marker position and alignment
Adobefail bottom one wrong
Squiggle 1.7fail partly missing markers
Opera8.02/50/ 9tp1fail no marker
Opera9tp2/ beta1/2/ 9.00/9.10fail wrong marker alignment
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0fail wrong marker alignment

e2009-08-09-01: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s. The markers are always aligned along the path. The control points and the path are indicated in gray. There are underlying red triangles indicating the position and alignment. The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail ignored
Amaya11.3.1fail position confused, no animation
KSVG1fail crashes
WebKit 528.16fail wrong marker position and alignment
Adobeok -
Squiggle 1.7fail wrong and partly missing markers
Opera8.02/50/ 9tp1fail no marker
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 marker alignment
Gecko 2.0/ 8.0/ 12.0ok -
Gecko 24.0/ 36.0fail wrong marker alignment
Gecko 48.0/ 60.0ok -

e2009-08-10-01: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s. The markers are always aligned along the path. The control points and the path are indicated in gray. There are underlying red triangles indicating the position and alignment. The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail ignored
Amaya11.3.1fail position confused, no animation
KSVG1fail crashes
WebKit 528.16fail wrong marker position and alignment
Adobeok -
Squiggle 1.7fail wrong and partly missing markers
Opera8.02/50/ 9tp1fail no marker
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok -
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0fail wrong marker alignment

e2009-08-11-01: §M(1)P
marker and animated path:
A path with marker elements is animated within 30s. The markers are always aligned along the path. The control points and the path are indicated in gray. There are underlying red triangles indicating the position and alignment. The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail ignored
Amaya11.3.1fail position confused, no animation
KSVG1fail crashes
WebKit 528.16fail wrong marker position and alignment
Adobefail wrong alignment
Squiggle 1.7fail wrong and partly missing markers
Opera8.02/50/ 9tp1fail no marker
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 marker alignment
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0fail wrong marker alignment

e2009-08-12-01: §M(1)P
marker and animated path:
Paths with marker elements are animated within 30s. The markers are always aligned along the path.
There are underlying red triangles indicating the position and alignment. The markers have to cover the red triangles always completely.
If something red gets visible, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Amaya9.51fail ignored
Amaya11.3.1fail position confused, no animation
KSVG1fail crashes
WebKit 528.16fail wrong marker position and alignment
Adobefail top left wrong alignment
Squiggle 1.7fail wrong and partly missing markers
Opera8.02/50/ 9tp1fail no marker
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 marker alignment
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0fail wrong marker alignment
Test results Markers
user-agentSVG 1.1
user-agentSVG 1.1
Amaya9.51/ 11.3.1 0/22
KSVG1 1/22
WebKit 528.16 1/22
Adobe 17/22
Squiggle 1.7 4/22
Opera8.02/50/ 9tp1 0/22
Opera9tp2 8/22
Opera9 beta1 5/22
Opera9 beta2/ 9.00/9.10 14/22
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 15/22
Gecko 2.0/ 8.0/ 12.0 14/22
Gecko 24.0/ 36.0 10/22
Gecko 48.0/ 60.0 17/22
Test results filling, stroking etc
user-agentSVG tiny 1.1SVG 1.1
user-agentSVG tiny 1.1SVG 1.1
Amaya9.51 0/72 0/117
Amaya11.3.1 2/72 2/117
KSVG1 12/72 13/117
WebKit 528.16 34/72 44/117
Adobe 38/72 68/117
Squiggle 1.7 38/72 54/117
Opera8.02/50 18/72 22/117
Opera9tp1 34/72 38/117
Opera9tp2 39/72 56/117
Opera9 beta1 40/72 54/117
Opera9 beta2 41/72 65/117
Opera9.00/9.10 48/72 72/117
Opera9.50 alpha/beta/ 9.52 54/72 80/117
Opera10.0 alpha/beta/ 10.0 54/72 79/117
Opera10.60 53/72 79/117
Opera11.00 47/72 73/117
Opera11.60/ 12,00 46/72 72/117
Gecko 2.0 62/72 90/117
Gecko 8.0 62/72 89/117
Gecko 12.0 62/72 90/117
Gecko 24.0 62/72 87/117
Gecko 36.0 61/72 85/117
Gecko 48.0 62/72 93/117
Gecko 60.0 53/72 82/117