e2005-08-21-01: §M(2)P
set animation of specific attributes of the circle-element:
cx is set from left to right after 3s.
cy is set from top to bottom after 6s.
r is set from small to big after 9s.
Gray shapes show the correct positions.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | ok | - |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-21-02: §M(2)P
animate animation of specific attributes of the circle-element:
cx moves from left to right in 9s,
cy moves from top to
bottom in 9s.
The radius r changes from small to big in 9s and freezes.
Altogether the circle animates from top left to bottom right
while its size is enlarged.
Gray shapes show some typical positions.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | ok | - |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2010-07-07-01: §M(2)P
values animation of specific circle attributes:
values animation of cx, cy, r.
Gray shapes show some typical positions.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | crashes |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-21-03: §M(2)P
set animation of specific attributes of the ellipse-element:
cx is set from left to right after 3s.
rx is set from small to big after 6s.
cy is set from top to bottom after 9s.
ry is set from small to big after 12s.
Gray shapes show the correct positions.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | ok | - |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-21-04: §M(2)P
animate animation of specific attributes of the ellipse-element:
cx moves from left to right in 18s and freezes.
cy moves from top to bottom in 9s and repeats two times with repeatCount.
rx changes from small to big in 18s and freezes.
ry changes from small to big in 9s and repeats two times with repeatDur.
Gray shapes show some typical positions.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | repetitions missing |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2010-07-08-01: §M(2)P
values animation of specific ellipse attributes:
values animation of cx, cy, rx, ry.
Gray shapes show some typical positions.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | crashes |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-21-05: §M(2)P
set animation of specific attributes of the line-element:
x1 is set from left to right after 3s.
y1 is set from top to bottom after 6s.
x2 is set from right to left after 9s.
y2 is set from bottom to top after 12s.
Gray shapes show the correct positions.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | ok | - |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-21-06: §M(2)P
animate animation of specific attributes of the line-element:
x1 moves from left to right in 18s and freezes.
y1 moves from top to bottom in 9s and repeats two times with repeatCount.
y2 moves from bottom to top in 18s and freezes.
x2 moves from right to left in 9s and repeats two times with repeatDur.
Gray shapes show some typical positions.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | repetitions missing |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-21-07: §M(2)P
set animation of the points attribute of the polyline element:
points is set from a shape of one square to two squares after 3s.
The initial and the final polyline is given as a thin gray shape.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation; Opera bug-174477 |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-21-08: §M(2)P
animate animation of the points attribute of the polyline element:
points is animated from a shape of one square to two squares after 10s
an restarts again. The initial and the final polyline is given as a thin gray shape.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | discrete animation |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation; Opera bug-174477 |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-14-01: §M(2)P
discrete animate points with different list item numbers:
The points attribute of polyline is animated showing a painting of the house of Nikolaus.
The polylines are given in gray in the background for comparison.
The dark blue stroked polyline is animated discrete with animate,
the light blue stroked polyline is animated with set animations.
Because SVGT1.1 does not specify, that a polyline must be rendered in a way that produces
the same result as if the related path is specified, discrete animation is possible, even if the
values have different numbers of points.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | crash/frozen |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | displays initial single point |
Opera8.02/50/ 9tp1/2/ beta1/2 | fail | no animation; Opera bug-174477 |
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-14-02: §M(1)P
discrete animate points with different list item numbers:
The points attribute of polyline is animated showing a painting of the house of Nikolaus.
The polylines are given in gray in the background for comparison.
The blue stroked polyline is animated discrete with animate by default,
a red stroked polyline below is animated with set animations
with the same timing. If something red gets visible, this indicates
an error.
Because SVGT1.1 does not specify, that a polyline must be rendered in a way that produces
the same result as if the related path is specified, discrete animation is possible, even if the
values have different numbers of points.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | crash/frozen |
WebKit 528.16 | fail | wrong timing |
Adobe | fail | mixture of continuous and discrete animation, wrong timing |
Squiggle 1.7 | fail | displays initial single point, mixture of continuous and discrete animation, wrong timing |
Opera8.02/50/ 9tp1/2/ beta1/2/ | fail | no animation; Opera bug-174477 |
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | mixture of continuous and discrete animation, wrong timing |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | mixture of continuous and discrete animation |
e2005-08-21-09: §M(2)P
set animation of the points attribute of the polygon element:
points is set from a shape of one square to two squares after 3s.
The initial and the final polyline is given as a thin gray shape.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation; Opera bug-174477 |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-21-10: §M(2)P
animate animation of specific attributes of the polygon element:
points is animated from a shape of one square to two squares after 10s
and restarts again. The initial and the final polyline is given as a thin gray shape.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | discrete animation |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation; Opera bug-174477 |
Opera9tp1/2/ beta 1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-15-01: §M(2)P
discrete animation of points with different list item numbers:
The points attribute of polygon is animated showing regular polygons.
The polygons are given in gray in the background for comparison.
The dark blue stroked polygon is animated discrete with animate,
the light blue stroked polygon is animated with set animations.
Because SVGT1.1 does not specify, that a polygon must be rendered
in a way that produces the same result as if the related path is specified,
discrete animation is possible, even if the values have different numbers
of points.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | crash/frozen |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/ beta1/2/ | fail | no animation; Opera bug-174477 |
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-15-02: §M(1)P
discrete animate points with different list item numbers:
The points attribute of polygon is animated showing regular polygons.
The polygons are given in gray in the background for comparison.
The blue stroked polygon is animated discrete with animate by default,
a red stroked polygon below is animated with set animations
with the same timing. If something red gets visible, this indicates
an error.
Because SVGT1.1 does not specify, that a polygon must be rendered
in a way that produces the same result as if the related path
is specified, discrete animation is possible, even if the values have different
numbers of points.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | crash/frozen |
WebKit 528.16 | fail | wrong timing |
Adobe | fail | mixture of continuous and discrete animation, wrong timing |
Squiggle 1.7 | fail | mixture of continuous and discrete animation, wrong timing |
Opera8.02/50 | fail | no animation; Opera bug-174477 |
Opera9tp1/2/ beta1/2 | fail | mixture of continuous and no animation |
Opera9.00/9.10 | fail | mixture of continuous and discrete animation, wrong timing |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | mixture of continuous and discrete animation |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | mixture of continuous and discrete animation |
e2005-08-21-11: §M(2)P
set animation of specific attributes of the rect-element:
x is set from left to right after 3s.
width is set from small to big after 6s.
rx is set from small to big after 9s.
y is set from top to bottom after 12s.
height is set from small to big after 15s.
ry is set from small to big after 18s.
Gray shapes show the correct positions.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51 | fail | no animation |
Amaya11.3.1 | fail | wrong animation |
KSVG1 | ok | - |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-21-12: §M(2)P
animate animation of specific attributes of the rect-element:
x moves from left to center in 18s and freezes.
y moves from top to middle in 9s and repeats two times with repeatCount.
width moves from small to big in 18s and freezes.
height moves from small to big in 9s and repeats two times with repeatCount.
rx changes from zero to big in 18s and freezes.
ry changes from zero to big in 9s and repeats two times with repeatDur.
Gray shapes show the some positions.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | repetitions missing |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-07-01: §M(2)P
rx and ry corrections:
For two blue rectangles the attributes rx and ry are animated.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | wrong and incomplete animation |
WebKit 528.16 | fail | no implied values |
Adobe | ok | - |
Squiggle 1.7 | fail | not specified attribute not implied for last animation |
Opera8.02/50 | fail | not specified attribute not implied for last animation |
Opera9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-07-02: §M(2)P
rx and ry corrections:
For two blue rectangles the attributes rx and ry are animated.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | wrong and incomplete animation |
WebKit 528.16 | fail | no implied values |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-07-03: §M(2)P
rx and ry corrections:
For two blue rectangles the attributes rx and ry are animated.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | wrong and incomplete animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-07-04: §M(2)P
rx and ry corrections:
For two blue rectangles the attributes rx and ry are animated.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | wrong and incomplete animation |
WebKit 528.16 | fail | no implied values |
Adobe | ok | - |
Squiggle 1.7 | fail | wrong animation |
Opera8.02/50 | fail | wrong animation |
Opera9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-07-05: §M(2)P
rx and ry corrections:
For two blue rectangles the attributes rx and ry are animated.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | wrong and incomplete animation |
WebKit 528.16 | fail | no implied values |
Adobe | ok | - |
Squiggle 1.7 | fail | wrong animation |
Opera8.02/50 | fail | wrong frozen values |
Opera9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-07-06: §M(2)P
rx and ry corrections:
For two blue rectangles the attributes rx and ry are animated.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | wrong and incomplete animation |
WebKit 528.16 | fail | no implied values |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | wrong animation |
Opera9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-10-01: §M(2)P
rx and ry corrections:
For two blue rectangles the attributes width and height are animated and
either rx or ry given explicitly.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
Because the correction rules to imply the other r is before that of the rule
for the corrections for width or height, the width/height correction is applied
to the implied value and not the width/height corrected r is implied.
Here the implied r remains constant, the other is corrected.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | (ok) | test ok, no animation for the ellipses |
KSVG1 | ok | - |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1 | ok | - |
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | fail | wrong correction order |
Opera11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-10-02: §M(2)P
rx and ry corrections:
For two blue rectangles the attributes width and height are animated and
either rx or ry given explicitly.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | (ok) | test ok, no animation for the ellipses |
KSVG1 | ok | - |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta | fail | completely wrong shape (fixed in 9.50 beta2) |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-10-03: §M(2)P
rx and ry corrections:
For two blue rectangles the attributes width and height are animated and
rx and ry given explicitly.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | (ok) | test ok, no animation for the ellipses |
KSVG1 | ok | - |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-10-04: §M(2)P
rx and ry corrections:
For two blue rectangles the attributes width and height are animated and
neither rx nor ry are given explicitly, but either rx or ry is animated.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
Because the correction rules to imply the other r is before that of the rule
for the corrections for width or height, the width/height correction is applied
to the implied value and not the width/height corrected r is implied.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | no implied values |
Adobe | (ok) | finally two lines left |
Squiggle 1.7 | fail | animated values not implied |
Opera8.02/50 | fail | not all values implied as required |
Opera9tp1/2/ beta1/ 11.60/ 12,00 | ok | - |
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | fail | completely wrong shapes, wrong correction order |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-30-01: §M(2)P
additive rx or ry:
For two blue rectangles the attributes rx and ry are animated with additive sum.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | not additive |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-30-02: §M(2)P
additive rx or ry:
For two blue rectangles the attributes rx and ry are animated with additive sum.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | not additive |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | correction wrong |
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-30-03: §M(2)PS
additive rx or ry:
For two blue rectangles the attributes rx and ry are animated with additive sum.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
In the specification it is not mentioned, which value is the underlying value,
if there is no lower priority animation or a static value. Here it is assumed to
be 0. The other explicitely given r value cannot be used as underlying value,
when the correction is only done on the presentation value as usual for
SMIL animations.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | not additive |
WebKit 528.16 | fail | no implied values |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | minor timing problem at the end |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-04-30-04: §M(2)PS
additive rx or ry:
For two blue rectangles the attributes rx and ry are animated with additive sum.
The animation is compared for the top left corner of each
rectangle with an animated ellipse with the same rx and ry.
If the top left quarters of the stroked ellipses do not fit exactly
to the top left rounded corner of the related rectangle, an error
is occured.
In the specification it is not mentioned, which value is the underlying value,
if there is no lower priority animation or a static value. Here it is assumed to
be 0. The other explicitely given r value cannot be used as underlying value,
when the correction is only done on the presentation value as usual for
SMIL animations.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | not additive |
WebKit 528.16 | fail | no implied values |
Adobe | ok | - |
Squiggle 1.7 | fail | wrong corrections |
Opera8.02/50 | fail | minor timing problem and wrong final value |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51/ 11.3.1 | 3/32 | 3/32 |
KSVG1 | 8/32 | 8/32 |
WebKit 528.16 | 20/32 | 20/32 |
Adobe | 30/32 | 30/32 |
Squiggle 1.7 | 21/32 | 21/32 |
Opera8.02/50 | 17/32 | 17/32 |
Opera9tp1/2/ beta1 | 28/32 | 28/32 |
Opera9beta2 | 25/32 | 25/32 |
Opera9.00/9.10/ 9.50 alpha/beta | 27/32 | 27/32 |
Opera9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | 28/32 | 28/32 |
Opera11.60/ 12,00 | 30/32 | 30/32 |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 30/32 | 30/32 |
e2005-08-22-01: §M(2)P
set animation of the pathLength
attribute of the path element:
pathLength is set from 5280 to 4320 after 3s.
This rescales the stroke-dasharray a little bit.
Often the pathLength is ignored by user-agents, note that the calculated pathLength
should be 4800 - only with this value there are some symmetries.
For 5280 or 4320 the symmetries are vanished. If you see symmetries, your user-agent
ignores already the pathLength attribute and not just the animation.
Initial and final dasharray is marked in gray.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | ignores attribute completely |
WebKit 528.16 | fail | ignores attribute completely |
Adobe | fail | ignores attribute completely |
Squiggle 1.7 | fail | ignores attribute completely, mysterious error messages |
Opera8.02/50 | fail | ignores attribute completely; Opera bug-174914 |
Opera9tp1/2 | fail | minor Problems in the edges of the figure, but not with the pathLength itself. |
Opera9 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 | fail | connects initial and final point, but no problems with the pathLength itself. bug-203951 |
Gecko 2.0 | fail | no animation |
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-22-02: §M(2)P
animate animation of the pathLength
attribute of the path element:
pathLength changes from 5280 to 4320 in 10s.
This rescales the stroke-dasharray a little bit.
Often the pathLength is ignored by user-agents, note that the calculated pathLength
should be 4800 - only with this value there are some symmetries.
For 5280 or 4320 the symmetries are vanished. If you see symmetries not just at
5s animation time, your user-agent ignores already the pathLength attibute and
not just the animation.
Initial and final dasharray is marked in gray.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | ignores attribute completely |
WebKit 528.16 | fail | ignores attribute completely |
Adobe | fail | ignores attribute completely |
Squiggle 1.7 | fail | ignores attribute completely, mysterious error messages |
Opera8.02/50 | fail | ignores attribute completely; Opera bug-174914 |
Opera9tp1/2 | fail | minor Problems in the edges of the figure, but not with the pathLength itself. |
Opera9 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 | fail | connects initial and final point, minor Problems in the edges of the figure, but not with the pathLength itself. bug-203951 |
Gecko 2.0 | fail | no animation |
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-02-11-01: §M(2)P
animation of a path with pathLength
and stroke-dasharray:
A path with a given pathLength and stroke-dasharray is
animated. The visible effect is similar to a rotation of
two lines around the center of the SVG. Thin gray squares
mark the paths for the ends of the two visible dashes.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | ignores attribute pathLength completely |
Adobe | fail | ignores attribute pathLength completely |
Squiggle 1.7 | fail | ignores attribute pathLength completely |
Opera8.02/50 | fail | ignores attribute pathLength completely; Opera bug-174914 |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0 | fail | ignores attribute pathLength completely |
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2006-02-21-01: §M(1)P
animation to zero path length
and stroke-linecap round:
Animation of a path with the commands M and L and stroke-linecap round,
is reduced in the end to a path of length zero painted as a circle in the
center of the SVG.
If something red is getting visible, an error occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | (ok) | (minor accuracy problem) |
Opera8.02/50 | fail | final path with length zero not painted, Opera bug-196705 |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | final path with length zero not painted, Opera bug-196705 |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2008-03-14-01: §P
Distance along a path:
Distance along a path and pathLength including animation.
The main indication for a failed test is that the smaller light blue
paths are not always completely above the dark blue paths and
the dark blue paths not always below light blue paths.
The test is finished with the appearance of 'finished!' behind 'timing'
at 28s.
For the long paths top-right and bottom-left first the pathLength
is explicitly set with a set animation as underlying value.
Then set animations are tested for pathLength and stroke-dasharray,
combined in such a way that there is no visible change.
Then at 15s and 22s animate animations for pathLength and
stroke-dasharray is tested. A stroke-dasharray animation is compared with
a stroke-dashoffset animation with the same visible effect.
The effect is as if the path is painted within the animation.
The curved path in the middle uses no set animation as underlying
value and tests pathLength, stroke-dashoffset and stroke-dasharray
animations.
Short straight dashed path fragments test that the M command does not
contribute to the pathLength, a longer straight path tests that negative
values for pathLength are unsupported and therefore ignored.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | wrong or no animation, pathLength ignored |
WebKit 528.16 | fail | wrong animations, pahLength ignored |
Adobe | fail | wrong or no animation, pathLength ignored |
Squiggle 1.7 | fail | error messages, no animation |
Opera8.02/50 | fail | wrong or no animation, pathLength ignored |
Opera9tp1/2 beta1/2/ | fail | wrong or no animation, help text not displayed |
Opera9.00/9.10 | fail | wrong animation |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0 | fail | wrong animations, pathLength ignored |
Gecko 8.0/ 12.0/ 24.0/ 36.0 | fail | combination of pathLength and stroke-dasharray wrong |
Gecko 48.0 | (ok) | wrong font-size |
Gecko 60.0 | ok | - |
e2009-06-03-01: §M(2)P
set animation of specific
commands of the d attribute:
d is set from a shape of two squares to two other squares after 3s.
d contains the commands M and Z.
The initial and the final path is given as a thin gray shape.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-03-02: §M(2)P
animate animation of specific
commands of the d attribute:
d is changed from a shape from two squares to two other squares in 10s.
d contains the commands M and Z.
The initial, middle and final path shape is given as a thin gray shape.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-03-03: §M(2)P
animate animation of specific
commands of the d attribute:
d is changed from a shape from two squares to two other squares in 10s.
d contains the command m.
The initial, middle and the final path shape is given as a thin gray shape.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-03-04: §M(2)P
animate animation of specific
commands of the d attribute:
d is changed from a shape from two squares to two other squares in 10s.
d contains the command m (with multiple moves and implied lineto commands).
The initial, middle and the final path shape is given as a thin gray shape.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/beta1 | fail | wrong animation |
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-22-03: §M(2)P
set animation of specific
commands of the d attribute:
d is set from a shape of two squares to two other squares after 3s.
d contains the commands M, L, z, M, V, H.
The initial and the final path is given as a thin gray shape.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-22-04: §M(2)P
animate animation of specific
commands of the d attribute:
d changes from a shape from two squares to two other squares in 10s.
d contains the commands M, L, z, M, V, H.
The initial, middle and the final path is given as a thin gray shape.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-22-05: §M(2)P
animate animation of specific
commands of the d attribute:
d changes from a shape from two squares to two other squares in 10s.
d contains the commands m, l, z, M, v, h.
The initial, middle and the final path shape is given as a thin gray shape.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-22-06: §M(2)P
set animation of specific
commands of the d attribute:
d (represented by a blue curve)
is set from the dark gray curve to the light gray curve after 3s.
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands M, Q, T,
corresponding to quadratic Bézier curves.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | wrong curve shape in animation; Opera bug-174479 |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-22-07: §M(2)P
set animation of specific
commands of the d attribute:
d (represented by a blue curve)
is set from the dark gray curve to the light gray curve after 3s.
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands M, q, t,
corresponding to quadratic Bézier curves.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | wrong curve shape in animation; Opera bug-174479 |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-22-08: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands M, Q, T,
corresponding to quadratic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | wrong curve shape in animation; Opera bug-174479 |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-22-09: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve after 10s.
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands M, q, t,
corresponding to quadratic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | wrong curve shape in animation; Opera bug-174479 |
Opera9tp1 | fail | wrong curve shape in animation; Opera bug-174479 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-22-10: §M(2)P
set animation of specific
commands of the d attribute:
d (represented by a blue curve)
is set from the dark gray curve to the light gray curve in 3s.
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands M, C, S,
corresponding to cubic Bézier curves.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation; Opera bug-174479 |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-22-11: §M(2)P
set animation of specific
commands of the d attribute:
d (represented by a blue curve)
is set from the dark gray curve to the light gray curve in 3s.
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands M, c, s,
corresponding to cubic Bézier curves.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation; Opera bug-174479 |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-22-12: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the dark gray curve to the light gray curve in 10s.
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands M, C, S,
corresponding to cubic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation; Opera bug-174479 |
Opera9tp1 | fail | wrong curve shape in animation; Opera bug-174479 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-22-13: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the dark gray curve to the light gray curve in 10s.
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands M, c, s,
corresponding to cubic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation; Opera bug-174479 |
Opera9tp1 | fail | wrong curve shape in animation; Opera bug-174479 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-07-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands M, T
corresponding to quadratic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-07-02: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands m, t
corresponding to quadratic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation |
Opera9tp2/beta1/2/ 9.00/9.10/ | fail | wrong animation |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-07-03: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands M, S
corresponding to cubic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-07-04: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands m, s
corresponding to cubic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-07-05: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands M, C, S, T
corresponding to cubic and quadratic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-07-06: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands m, c, s, t
corresponding to cubic and quadratic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation |
Opera9tp2/beta1/2/ 9.00/9.10/ | fail | wrong animation |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-07-07: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands M, Q, T, S
corresponding to quadratic and cubic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-07-08: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands m, q, t, s
corresponding to quadratic and cubic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation |
Opera9tp2/beta1/2/ 9.00/9.10/ | fail | wrong animation |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-11-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands M, V, H, L and Z.
Some Z commands are immediately
followed by other commands V, H or L.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/ beta2/ 9.00/9.10 | ok | - |
Opera9beta1 | fail | wrong path |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong animation |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-11-02: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands m, v, h, l and z.
Some z commands are immediately
followed by other commands v, h or l.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/ beta2/ 9.00/9.10/ | ok | - |
Opera9beta1 | fail | wrong path |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | wrong animation |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-11-03: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands M, Q, T and Z.
Some Z commands are immediately
followed by other commands Q or T.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | path wrong |
Squiggle 1.7 | fail | path wrong |
Opera8.02/50/ 9beta1 | fail | wrong path |
Opera9tp1/2/ beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0 | fail | minor rendering errors |
Gecko 48.0/ 60.0 | ok | - |
e2009-06-11-04: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands m, q, t and z.
Some z commands are immediately
followed by other commands q or t.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | path wrong |
Squiggle 1.7 | fail | path wrong |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | path wrong |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0 | fail | minor rendering errors |
Gecko 48.0/ 60.0 | ok | - |
e2009-06-11-05: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands M, C, S and Z.
Some Z commands are immediately
followed by other commands C or S.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | path wrong |
Squiggle 1.7 | fail | path wrong |
Opera8.02/50 | fail | no animation |
Opera9tp1/ beta1 | fail | path wrong |
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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-11-06: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands m, c, s and z.
Some z commands are immediately
followed by other commands c or s.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | path wrong |
Squiggle 1.7 | fail | path wrong |
Opera8.02/50 | fail | no animation |
Opera9tp2/beta2/ 9.00/9.10/ | ok | - |
Opera9tp1/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | path wrong |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-12-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands M, V, H with multiple points provided.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | some linejoins ignored |
Adobe | ok | - |
Squiggle 1.7 | fail | some linejoins ignored |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ | fail | some linejoins ignored |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-12-02: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands m, v, h with multiple points provided.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | some linejoins ignored |
Adobe | ok | - |
Squiggle 1.7 | fail | some linejoins ignored |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ | fail | some linejoins ignored |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-13-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands M, m,l, L especially to test different
combinations of M/m commands.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | ok | - |
Opera9tp1/2/beta1/2/ 9.00/9.10/ | fail | wrong path, frozen path not displayed |
Opera9.50 alpha/beta | fail | additional path fragments displayed |
Opera9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-13-02: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the command M with coordinates partly in scientific notation
mainly to check the interpretation of several combinations of scientific notation.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no test path |
KSVG1 | fail | freezes, no display |
WebKit 528.16 | fail | no test path |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-14-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the command M with coordinates in unusual but
allowed notations.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no test path |
KSVG1 | fail | freezes, no display |
WebKit 528.16 | fail | no test path, funny residuals from animateTransform |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | ok | - |
Opera9tp1/2/beta1 | fail | animateTransform wrong |
Opera9beta2/ 9.00/9.109.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-15-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands M, C, S, s
corresponding to cubic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-15-02: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands M, c, s, S
corresponding to cubic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-15-03: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands M, Q, T, t
corresponding to quadratic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-15-04: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the commands M, q, t, T
corresponding to quadratic Bézier curves.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-16-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the command v with several combinations with
other commands M, V, H, L, Q, T, v, h, l, q, t.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation, minor problems with path |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | path wrong |
Opera9tp1 | fail | no animation |
Opera9tp2/beta1/2/ 9.00/9.10/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9.50 alpha/beta/ 9.52 | fail | minor path problem |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-16-02: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the command h with several combinations with
other commands M, V, H, L, Q, T, v, h, l, q, t.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation, minor problems with path |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | path wrong |
Opera9tp1 | fail | no animation |
Opera9tp2/beta1/2/ 9.00/9.10/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9.50 alpha/beta/ 9.52 | fail | minor path problem |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-17-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the command V with several combinations with
other commands M, V, H, L, Q, T, v, h, l, q, t.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation, minor problems with path |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | path wrong |
Opera9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-17-02: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the command H with several combinations with
other commands M, V, H, L, Q, T, v, h, l, q, t.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation, minor problems with path |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | path wrong |
Opera9tp1 | fail | no animation |
Opera9tp2/beta1/2/ 9.00/9.10/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9.50 alpha/beta/ 9.52 | fail | minor path problem |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-18-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the command L with several combinations with
other commands M, L, Q, T, C, S, l, q, t, c, s.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation |
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52 | fail | wrong path |
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-18-02: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the command l with several combinations with
other commands M, L, Q, T, C, S, l, q, t, c, s.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation |
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52 | fail | wrong path |
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-19-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the command v or h with several combinations with
other commands M, C, S, c, s.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | wrong path |
Opera9beta1 | fail | animation interrupted |
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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-19-02: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains the command V or H with several combinations with
other commands M, C, S, c, s.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | wrong path |
Opera9beta1 | fail | animation interrupted |
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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-20-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains several combinations of the
commands C, S, Q, T, q, t.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation, minor paths problem |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation |
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52 | fail | wrong path |
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0 | fail | rendering problems |
Gecko 48.0/ 60.0 | ok | - |
e2009-06-21-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains several combinations of the
commands c, s, Q, T, q, t.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but paths ok |
KSVG1 | fail | no animation, wrong path |
WebKit 528.16 | ok | - |
Adobe | fail | wrong path |
Squiggle 1.7 | fail | wrong path |
Opera8.02/50/ 9tp1 | fail | no animation |
Opera9tp2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52 | fail | wrong path |
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0 | fail | rendering problems |
Gecko 48.0/ 60.0 | ok | - |
e2009-06-22-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains several combinations of the command m with several
commands V, v, H, h, L, l, T, t, Q, q, C, c, S, s.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, wrong path |
KSVG1 | fail | no animation, wrong path |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/ 9beta1 | fail | no animation, wrong path |
Opera9tp2/ 9beta2 | fail | discrete animation, wrong path |
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52 | fail | wrong path |
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-22-02: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
d contains several combinations of the command M with several
commands V, v, H, h, L, l, T, t, Q, q, C, c, S, s.
For comparison an animateTransform of a red path is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red path completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation, wrong path |
Opera9tp2 | fail | discrete animation, wrong path |
Opera9beta1 | fail | stops animation in the middle, wrong path |
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52 | fail | wrong path |
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2009-06-23-01: §M(1)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
moves from the dark gray curve to the light gray curve in 10s.
Paths of zero lengths are generated with several combinations
of the commands M, m, Z, z.
For comparison an animateTransform of red circles is provided,
due to the specific choice of the path data, this has the same visual
effect. The blue path has to cover the red circles completely.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no path |
KSVG1 | fail | no path |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2 9beta1/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 | fail | no path |
Gecko 2.0/ 8.0/ 12.0/ 24.0 | fail | wrong animation |
Gecko 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2005-08-22-14: §M(2)P
set animation of specific
commands of the d attribute:
d (represented by a blue curve)
is set from the dark gray curve to the light gray curve in 3s.
The yellow circles belong to the initial
curve and the cyan circles belong
to the final curve.
d contains the commands M, A, a,
corresponding to elliptical arcs.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2005-08-22-15: §M(2)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the dark gray curve to the light gray curve in 10s.
The yellow circles belong to the initial
curve and the cyan circles belong
to the final curve.
d contains the commands M, A, a,
corresponding to elliptical arcs.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong animation (something like set instead of animate) |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9 beta2/ 9.00/9.10 | fail | wrong animation, bug-211231 |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | discrete animation |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2005-08-22-16: §M(2)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the dark gray curve to the light gray curve in 10s.
The yellow circles belong to the initial
curve and the cyan circles belong
to the final curve.
d contains the commands M, A, a,
corresponding to elliptical arcs.
The same flags are used for easier animation.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong animation (something like set instead of animate) |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9 beta2/ 9.00/9.10 | fail | wrong animation, bug-211231 |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2009-06-07-11: §M(2)P
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes with three animations testing different bolean flag combinations.
Provided values are shown in dark gray when they apply, an intermediate interpolation
value is shown in light gray for each animation for a second (a half second before to a half
second after those value applies).
The yellow and orange circles belong to the initial
curve and the cyan and cyan-green circles belong
to the final curve.
d contains the commands M, A, a
corresponding to elliptical arcs.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong animation (something like set instead of animate) |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9 beta2/ 9.00/9.10 | fail | wrong animation, bug-211231 |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | discrete animation |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2009-08-01-01: §M(2)Q
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the thick light gray curve to the thin dark gray curve in 60s with the
gray position (indicated with a circle) at 30s and two intermediate curves for 15s and 45s.
d contains the commands M, A, L, l, H, h, V, v.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong and discrete animation |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9 beta2/ 9.00/9.10 | fail | wrong path |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2009-08-01-02: §M(2)Q
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the thick light gray curve to the thin dark gray curve in 60s with the
gray position (indicated with a circle) at 30s and two intermediate curves for 15s and 45s.
d contains the commands M, A, C, c.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong and discrete animation |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9 beta2/ 9.00/9.10 | fail | wrong path |
Gecko 2.0 | ok | - |
Gecko 8.0/ 12.0/ 24.0/ 36.0 | fail | minor residuals |
Gecko 48.0/ 60.0 | ok | - |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2009-08-01-03: §M(2)Q
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the thick light gray curve to the thin dark gray curve in 60s with the
gray position (indicated with a circle) at 30s and two intermediate curves for 15s and 45s.
d contains the commands M, A, S, s, C, c.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong and discrete animation |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | wrong path |
Opera9tp2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9 beta2/ 9.00/9.10 | fail | wrong path |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2009-08-01-04: §M(2)Q
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the thick light gray curve to the thin dark gray curve in 60s with the
gray position (indicated with a circle) at 30s and two intermediate curves for 15s and 45s.
d contains the commands M, A, Q, q.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong and discrete animation |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9 beta2/ 9.00/9.10 | fail | wrong path |
Gecko 2.0 | ok | - |
Gecko 8.0/ 12.0/ 24.0/ 36.0 | fail | minor residuals |
Gecko 48.0/ 60.0 | ok | - |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2009-08-01-05: §M(2)Q
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the thick light gray curve to the thin dark gray curve in 60s with the
gray position (indicated with a circle) at 30s and two intermediate curves for 15s and 45s.
d contains the commands M, A, T, t, Q, q.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong and discrete animation |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | wrong path |
Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | wrong path |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2009-08-01-06: §M(2)Q
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the thick light gray curve to the thin dark gray curve in 60s with the
gray position (indicated with a circle) at 30s and two intermediate curves for 15s and 45s.
d contains the commands M, a, L, l, H, h, V, v.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong and discrete animation |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9 beta2/ 9.00/9.10 | fail | wrong path |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2009-08-01-07: §M(2)Q
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the thick light gray curve to the thin dark gray curve in 60s with the
gray position (indicated with a circle) at 30s and two intermediate curves for 15s and 45s.
d contains the commands M, a, C, c.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong and discrete animation |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9 beta2/ 9.00/9.10 | fail | wrong path |
Gecko 2.0/ 8.0 | ok | - |
Gecko 12.0/ 24.0/ 36.0 | fail | minor residuals |
Gecko 48.0/ 60.0 | ok | - |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2009-08-01-08: §M(2)Q
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the thick light gray curve to the thin dark gray curve in 60s with the
gray position (indicated with a circle) at 30s and two intermediate curves for 15s and 45s.
d contains the commands M, a, S, s, C, c.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong and discrete animation |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | wrong path |
Opera9tp2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9 beta2/ 9.00/9.10 | fail | wrong path |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2009-08-01-09: §M(2)Q
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the thick light gray curve to the thin dark gray curve in 60s with the
gray position (indicated with a circle) at 30s and two intermediate curves for 15s and 45s.
d contains the commands M, a, Q, q.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong and discrete animation |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1/2/ beta1/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9 beta2/ 9.00/9.10 | fail | wrong path |
Gecko 2.0 | ok | - |
Gecko 8.0/ 12.0/ 24.0/ 36.0 | fail | minor residuals |
Gecko 48.0/ 60.0 | ok | - |
This is SVG1.1, but not SVG-mobile (tiny or basic) -
e2009-08-01-10: §M(2)Q
animate animation of specific
commands of the d attribute:
d (represented by a blue curve)
changes from the thick light gray curve to the thin dark gray curve in 60s with the
gray position (indicated with a circle) at 30s and two intermediate curves for 15s and 45s.
d contains the commands M, a, T, t, Q, q.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | wrong and discrete animation |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | wrong path |
Opera9tp1/2/ beta1/2/ 9.00/9.10 | fail | wrong path |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51/ 11.3.1 | 0/56 | 0/70 |
KSVG1 | 0/56 | 0/70 |
WebKit 528.16 | 48/56 | 62/70 |
Adobe | 47/56 | 49/70 |
Squiggle 1.7 | 44/56 | 58/70 |
Opera8.02/50 | 8/56 | 8/70 |
Opera9tp1 | 16/56 | 26/70 |
Opera9tp2 | 35/56 | 47/70 |
Opera9 beta1 | 28/56 | 40/70 |
Opera9 beta2 | 37/56 | 38/70 |
Opera9.00/9.10 | 38/56 | 39/70 |
Opera9.50 alpha/beta | 38/56 | 52/70 |
Opera9.52 | 39/56 | 53/70 |
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | 48/56 | 62/70 |
Gecko 2.0 | 47/56 | 59/70 |
Gecko 8.0 | 50/56 | 59/70 |
Gecko 12.0/ 24.0 | 50/56 | 58/70 |
Gecko 36.0 | 51/56 | 59/70 |
Gecko 48.0/ 60.0 | 54/56 | 66/70 |
e2005-08-23-01: §Q
set animation of width
and height attribute of the svg element:
The initial size of the SVG is 200 x 200.
After 2 seconds it switches to 400 x 400 by
changing width and height of the outermost svg-element.
The shown circle doubles its diameter and the rectangle as the
background doubles its height and width.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | wrong animation |
KSVG1 | fail | animation wrong |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | slightly confused in both modes - with and without fitting window to the document size |
Opera8.02/50/ 9tp1 | fail | no animation; Opera bug-178162 |
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 | ok | - |
Gecko 2.0/ 8.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Gecko 12.0 | fail | no animation |
e2005-08-23-02: §Q
animate animation of width
and height attribute of the svg element:
The initial size of the SVG is 200 x 200.
Within 10 seconds it scales to 400 x 400 by
changing width and height of the outermost svg-element.
The shown circle doubles its diameter and the rectangle as the
background doubles its height and width.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | initial size of animation is wrong |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation; Opera bug-178162 |
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 | ok | - |
Gecko 2.0/ 8.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Gecko 12.0 | fail | no animation |
This is SVG1.1 or -basic, but not SVG-tiny -
e2005-08-23-03: §Q
set animation of x
and y attribute of the svg element:
This SVG-document contains another embedded svg element
The initial location of the SVG is x=100, y=100.
After 2 seconds it switches to x=300 y=300 by
changing x and y of the embedded svg-element.
The shown circle and the rectangle as the
background move to the right and to bottom.
The initial and the final elements are given as thin gray shapes.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | wrong animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation |
Opera9tp2 | fail | copied not moved |
Opera9 beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG1.1 or -basic, but not SVG-tiny -
e2005-08-23-04: §Q
animate animation of x
and y attribute of the svg element:
This SVG-document contains another embedded svg element
The initial location of the SVG is x=100, y=100.
Within 10 seconds it changes to x=300 y=300 by
changing x and y of the embedded svg-element.
The shown circle and the rectangle as the
background move to the right and to bottom.
The initial and the final elements are given as thin gray shapes.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
No attribute specific for g is animatable. But many non-specific attributes and properties can be applied to the g element, which are animatable, see the following sections.
No attribute specific for defs is animatable. But see 'use' for animation in a defs area.
No attribute specific for title is animatable, but anyway the title element and
the desc element are the most important elements for SVG because they give an
alternative access to the content. The author has the chance to describe and to give
an impression of the intention of the SVG. Even if the user-agent does not
support animation, the author can offer almost the same information with a
good title and description. Authors can profit from the imagination of the user,
if they offer titles and description. Often it is much easier to describe an idea than
to give a detailed image. An image can be more illustrative than thousand
words, but a few words can describe more than thousend images.
Each container element and each graphics element can contain the elements
desc and title, authors should really use them and give attention to them.
e2006-07-02-01: §Q
using the title elements in
a document with animation (1):
Are titles of the elements svg, rect and ellipse accessible somehow?
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | (ok) | Amaya offers an alternate text view, but the titles are only strcutured by using a new line for every title. |
KSVG1 | (ok) | KSVG is far away from perfect presentation of title and desc - together with the graphics it displays the last title and description (if it is short enough). But Konqueror offers an alternate view without graphics, which can be used to get access to all titles and descriptions, unfortunately it is not a structured text. Structure and text are available with another alternate view-tool (KXML-editor). |
WebKit 528.16 | fail | just the document title displayed, further titles ignored |
Adobe | fail | title completely ignored. |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/ beta1 | fail | just the document title displayed, further titles ignored, even with user modes like 'emulate text browser' and 'accessability layout'. bug-174502 |
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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2006-07-02-02: §Q
using the title elements in
a document with animation (2):
If an element changes size or position, is still a correct title displayed?
For example if the title is only displayed, if the pointer is above the element,
this relation may change with a moved pointer or a moved or resized object.
Is the title information still valid? If the information from title is accessible
for example with a submenue or an alternate view - does this change in a
useful way with the ongoing animation?
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, but Amaya offers an alternate text view, but the titles are only strcutured by using a new line for every title. |
KSVG1 | (ok) | KSVG is far away from perfect presentation of title and desc - together with the graphics it displays the last title and description (if it is short enough). But Konqueror offers an alternate view without graphics, which can be used to get access to all titles and descriptions, unfortunately it is not a structured text. Structure and text are available with another alternate view-tool (KXML-editor). The advantage of this is, that the display of titles is correct independent on animation effects. |
WebKit 528.16 | fail | just the document title displayed, further titles ignored |
Adobe | fail | title completely ignored. |
Squiggle 1.7 | (ok) | needs pointer motion to get correct display of the title if the element moves away from the pointer. Could be wrong too. |
Opera8.02/50/ 9tp1/2/ beta1 | fail | just the document title displayed, further titles ignored, even with user modes like 'emulate text browser' and 'accessability layout'. bug-174502 |
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,00 | (ok) | needs pointer motion to get correct display of the title if the element moves away from the pointer. Could be wrong too. |
Gecko 2.0/ 8.0/ 12.0/ 24.0 | (ok) | needs pointer motion to get correct display of the title if the element moves away from the pointer. Could be wrong too. |
Gecko 36.0/ 48.0/ 60.0 | ok | - |
e2006-07-02-03: §Q
using the title elements in
a document with animation (3):
The xlink:href is exchanged all 4s between two colour animated
ellipses - does the accessible title change too, if displayed somehow?
Should change between 'First green-white ellipse' and 'Second cyan-blue ellipse'.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | Content not exchanged. |
WebKit 528.16 | fail | just the document title displayed, further titles ignored |
Adobe | fail | title completely ignored. |
Squiggle 1.7 | (ok) | removes only old title and needs pointer motion to display the new one. |
Opera8.02/50/ 9tp1/2/ beta1 | fail | just the document title displayed, further titles ignored, even with user modes like 'emulate text browser' and 'accessability layout'. bug-174502. xlink:href not animated in 8 and 9tp1. |
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,00 | (ok) | needs pointer motion to get correct display of the title if the element is exchanged. Could be wrong too. |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | title ignored. |
e2006-07-02-04: §IQ
using the title elements in
a document with animation (4):
title of the element and xlink:title for an a element around it - both
accessible somehow? title of the element is: 'An ellipse with title element',
xlink:title is 'Click to set colour to cyan for 10s'.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no interactivity |
KSVG1 | fail | no interactivity |
WebKit 528.16 | fail | only xlink:href displayed |
Adobe | fail | xlink:title and title completely ignored. |
Squiggle 1.7 | fail | only title is displayed. |
Opera8.02/50/ 9tp1/2/ beta1 | fail | just the document title displayed, further titles ignored, even with user modes like 'emulate text browser' and 'accessability layout'. bug-174502. Since 9tp2 the xlink:title is displayed. |
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,00 | fail | only xlink:href is displayed. |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | only title is displayed. |
e2006-07-02-05: §Q
using the title elements in
a document with animation (5):
A group of two animated circles: The group itself and each
circle has a title element - are they all accessible somehow?
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation. |
WebKit 528.16 | fail | just the document title displayed, further titles ignored |
Adobe | fail | title completely ignored. |
Squiggle 1.7 | fail | group title not accessible. |
Opera8.02/50/ 9tp1/2/ beta1 | fail | just the document title displayed, further titles ignored, even with user modes like 'emulate text browser' and 'accessability layout'. bug-174502. |
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,00 | fail | group title not accessible. |
Gecko 2.0/ 8.0 | fail | group title not accessible. |
Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2007-12-06-01: §Q
using the title elements in
a document with animation (6):
A group with an animated circle:
For the group the colour is animated with animateColor
having a title element.
For the circle the radius is animated with animate having
a title element too.
From the structure of the document it can be expected, that
the title for animateColor is available for the complete document.
The title for animate is available only within the circle.
Are the titles accessible somehow?
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation. |
WebKit 528.16 | fail | just the document title displayed, further titles ignored |
Adobe | fail | title completely ignored. |
Squiggle 1.7 | fail | title inside animation elements completely ignored |
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | title inside animation elements completely ignored |
Gecko 2.0/ 8.0 | fail | title completely ignored. |
Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51/ 11.3.1 | 1/6 | 1/6 |
KSVG1 | 2/6 | 2/6 |
WebKit 528.16 | 0/6 | 0/6 |
Adobe | 0/6 | 0/6 |
Squiggle 1.7 | 3/6 | 3/6 |
Opera8.02/50/ 9tp1/2/ beta1 | 0/6 | 0/6 |
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,00 | 3/6 | 3/6 |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 * | 1/6 | 1/6 |
* Note, that since version 12.0 Gecko has an option to explore elements. With
this one has access to title
elements as well. Funnily in 12.0 one has to use
the button 'HTML' to get access to the source code of such elements.
Access to referenced Elements though, for example placed in defs
,
is only inconveniently via the parent element possible, not via the referencing
element.
No attribute specific for desc is animatable, but see comment at the section of the title element.
e2006-01-15-01: §Q
using title and desc elements in
a document with animation:
The document contains a general title with description for the whole document.
Further it contains a transformed group element with a title and an animated
polygon including title and desc.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | KSVG crashes with this example, but this is not related to title or desc. KSVG is far away from perfect presentation of title and desc, but it is the best we can get up to now if it does not crash - together with the graphics it displays the last title and description (if it is short enough). But Konqueror offers an alternate view without graphics, which can be used to get access to all titles and descriptions, unfortunately it is not a structured text. Structure and text are available with another alternate view-tool (KXML-editor). |
WebKit 528.16 | fail | desc completely ignored (and polygon animtated discrete) |
Adobe | fail | titles and descriptions completely ignored. |
Squiggle 1.7 | fail | not all title and desc elements accessible, only for the background and the polygon. |
Opera8.02/50 | fail | just the document title displayed, description and further titles ignored, even with user modes like 'emulate text browser' and 'accessability layout'. The polygon shape is not animated. bug-174502 |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | see comment for the example for the title element. bug-174502 |
Gecko 2.0/ 8.0 | fail | desc completely ignored |
Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
This is SVG or SVG basic, but not SVG tiny:
e2006-01-15-02: §Q
using title and desc elements in
a document with animation (2):
The document contains a general title with description for the whole document.
Further it contains a transformed group element with a title and an animated
path including title and desc.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | KSVG does not animate the example, but this is not related to title or desc. KSVG is far away from perfect presentation of title and desc, but it is the best we can get up to now if it does not crash - together with the graphics it displays the last title and description (if it is short enough). But Konqueror offers an alternate view without graphics, which can be used to get access to all titles and descriptions, unfortunately it is not a structured text. Structure and text are available with another alternate view-tool (KXML-editor). |
WebKit 528.16 | fail | desc completely ignored |
Adobe | fail | titles and descriptions completely ignored. |
Squiggle 1.7 | fail | not all title and desc elements accessible, only for the background and the polygon. |
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 | fail | see comment for the example for the title element. bug-174502 |
Gecko 2.0/ 8.0 | fail | desc completely ignored |
Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
e2007-12-06-11: §Q
using the title and desc elements in
a document with animation (3):
A group with an animated circle:
For the group the colour is animated with animateColor
having a title and a desc element.
For the circle the radius is animated with animate having
a title and a desc element too.
From the structure of the document it can be expected, that
title and a desc for animateColor is available for the complete document.
Title and a desc for animate is available only within the circle.
Are the titles and descriptions accessible somehow?
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation. |
WebKit 528.16 | fail | desc completely ignored |
Adobe | fail | title and desc completely ignored. |
Squiggle 1.7 | fail | title and desc inside animation elements completely ignored |
Opera8.02/50/ 9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | title and desc inside animation elements completely ignored |
Gecko 2.0/ 8.0 | fail | title and desc completely ignored, no animateColor |
Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animateColor |
No attribute specific for symbol is animatable, but for example viewBox and preserveAspectRatio can be applied to symbol.
This is SVG or SVG basic, but not SVG tiny:
e2006-01-16-01: §M(1)P
animated symbol:
In a symbol, consisting of three ellipses the ellipses
are animated in rx and ry. The symbol is referenced
four times with different sizes with use elements.
The ellipses are in the blue range and are partly transparent.
They cover exactly red ellipses. This results in a visible appearence
of blue to magenta ellipses. Red indicates an error.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50 | fail | no display, no animation |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2005-08-24-01: §Q
set animation of x
and y attribute of the use element:
A defs element contains a g element with a rectangle and
a circle. It is referenced by an use-element.
The initial location of the use is x=100, y=100.
After 2 seconds it switches to x=300 y=300 by
changing x and y of the use-element.
The shown circle and the rectangle as the
background move to the right and to bottom.
The initial and the final elements are given as thin gray shapes.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | ok | - |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | ok | - |
Opera9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-24-02:
animate animation of x
and y attribute of the use element:
A defs element contains a g element with a rectangle and
a circle. It is referenced by an use-element.
The initial location of the use is x=100, y=100.
Within 10 seconds it changes to x=300 y=300 by
changing x and y of the use-element.
The shown circle and the rectangle as the
background move to the right and to bottom.
The initial and the final elements are given as thin gray shapes.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | ok | - |
Opera9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-24-03: §M(2)P
set animation of xlink:href
attribute of the use element:
A defs element contains a gray and a blue circle element.
The gray one is referenced by an use-element.
After 5 seconds it switches to the blue one.
To show the timing the stroke is set to blue at the same time.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | display incomplete |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation; Opera bug-174476 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-24-04: §QA
set animation of xlink:href
attribute of the use element:
A defs element contains a yellow and a blue circle element.
Both are referenced by use-elements.
After 5 seconds the references are exchanged.
This means, first is the blue circle on top, after 5 seconds
the yellow one. This is an exchange of the rendering order.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation; Opera bug-174476 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-24-05: §QA
discrete animate animation of xlink:href
attribute of the use element:
A defs element contains a yellow and a blue circle element.
Both are referenced by use-elements.
All 2 seconds the references are exchanged.
This means, first the blue circle is on top, after 2 seconds
the yellow one, then the blue one again and so on.
This is an exchange of the rendering order.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation; Opera bug-174476 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-12-09-01: §M(2)P
animate href from xlink for use:
The namespace for xlink is choosen as xmlns:x="http://www.w3.org/1999/xlink",
therefore the typical use of the prefix xlink is replaced by simply x.
The prefix xlink is defined for xmlns:xlink="http://www.w3.org/1999/xhtml"
for test purposes only.
A defs element contains a gray and a blue circle element.
The gray one is referenced by an use-element.
After 3 seconds it switches to the blue one.
To show the timing the stroke is set to blue at the same time.
If the colour switches to red at 4s, the prefix is interpreted wrong.
user-agent | result | comment |
---|---|---|
W3C-Validator | fail | SVG tiny 1.1; in this case, the validator is not able to identify the modified prefix |
Amaya9.51/ 11.3.1 | fail | namespace ignored |
KSVG1 | fail | namespace ignored |
WebKit 528.16 | ok | - |
Adobe | fail | namespace ignored |
Squiggle 1.7 | fail | namespace ignored |
Opera8.02/50/ 9tp1 | fail | namespace 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG or SVG basic, but not SVG tiny:
e2007-12-09-11: §QA
animate xlink:href with external source:
Animation of the xlink:href attribute of a use-element with external sources.
The document usehref03.svg contains a yellow and a blue circle element.
Both are referenced by use-elements.
After 2 seconds the references are exchanged.
This means, first is the blue circle on top, after 2 seconds
the yellow one. This is an exchange of the rendering order.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | no display |
Adobe | fail | no display |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | no display |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-03-15-01: §M(2)QA
use simulates animation of transform matrix:
Even if attributes or properties are not directly animatable,
it is possible to animate them indirectly and discrete or
frame-based with an animation of xlink:href of a use element.
In this example an animation of the matrix type of transform
is simulated using random transform type values.
The interpolation values are indicated as gray
shapes (scale, rotate, skewX).
Blue is the simulated animation between these
shapes. The simulation uses 400 'frames' for a duration of
20s.
use simulates animation of transform matrix:
The same using random matrices for interpolation values.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation; Opera bug-174476 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-24-06: §P
set animation of
width and height attributes of the use element:
A defs element contains a g element with a rectangle and
a circle. It is referenced by an use-element.
The initial location of the use is x=100, y=100.
After 2 seconds for a duration of 2s the
width of the use is set to 0.
The shown circle and the rectangle
vanish for 2s.
After 6 seconds for a duration of 2s the
height of the use is set to 0.
The shown circle and the rectangle
vanish for 2s.
The fill of a small circle top left has an animation with the same timing for comparison.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | (ok) | test ok, but top left fill animation wrong |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | no animation |
Adobe | fail | no animation |
Squiggle 1.7 | fail | no animation |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | 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 | ok | - |
Opera11.60/ 12,00 | fail | no animation |
Gecko 2.0 | fail | no animation |
Gecko 8.0/ 12.0 | fail | vanishes only once |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG or SVG basic, but not SVG tiny:
e2007-02-10-01: §M(1)P
animation of width and
height of a use element for a symbol
:
In a symbol, consisting of three ellipses, the ellipses
are animated in rx and ry. The symbol is referenced
with an use element with animated width and height.
The ellipses are in the blue range and are partly transparent.
They cover exactly red ellipses. This results in a visible appearence
of blue to magenta ellipses. Red indicates an error.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no symbol |
Opera9tp1 | fail | no animation of use |
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 | ok | - |
Gecko 2.0/ 8.0 | fail | no animation |
Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG or SVG basic, but not SVG tiny:
e2007-02-10-02: §M(1)P
animation of width and
height of a use element for an element svg
:
In an element svg, containing three ellipses, the ellipses
are animated in rx and ry. The svg is referenced
with an use element with animated width and height.
The ellipses are in the blue range and are partly transparent.
They cover exactly red ellipses. This results in a visible appearence
of blue to magenta ellipses. Red indicates an error.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation of use |
Opera9tp1/2 | fail | no svg |
Opera9 beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0 | fail | no animation |
Gecko 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG or SVG basic, but not SVG tiny:
e2007-02-10-03: §M(1)P
animation of width and
height of a use element for an element g
:
In an element g, containing three ellipses, the ellipses
are animated in rx and ry. The g is referenced
with an use element with animated width and height.
Note that the animation of width and height of the use
element has no visible effect if as here no symbol or svg
is referenced.
The ellipses are in the blue range and are partly transparent.
They cover exactly red ellipses. This results in a visible appearence
of blue to magenta ellipses. Red indicates an error.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-24-07: §M(1)P
referenced animation:
The radius of a circle in a defs-area is animated and then
referred several times with use.
A red comparison is available without use.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no repetition |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-24-08: §M(1)P
animation of referenced element:
The radius of a circle in a defs-area is animated and is
referred several times with use. The animation element is outside the defs area.
A red comparison is available without use.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2005-08-24-09: §M(1)P
referenced animation:
The radius of a circle in a defs-area is animated and this is
referred as a group several times with use.
A red comparison is available without use.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
e2007-02-09-01: §M(1)P
animation, defs and use:
A g element inside defs is scaled with an animation.
The g element includes a circle referenced by a use element.
The scale of the g is not applied to the output of the use,
therefore there is no visible effect of the animation.
If something red gets visible, an error is occured.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | ok | - |
KSVG1 | ok | - |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG or SVG basic, but not SVG tiny:
e2011-04-04-01: §UA
IFS Fractal-Ballet:
Animated IFS Fractal (Iterated Function System).
A transformed use element is used as a base for an IFS.
After 10 seconds it switches from a square to a triangle,
then switching every 56.5s between these two shapes.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | IFS not animated |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50/ 9tp1 | fail | rectangle not replaced |
Opera9tp2/beta1/2/ 9.00/9.10 | ok | - |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | not all rectangles replaced |
Gecko 2.0/ 8.0/ 12.0/ 24.0 | ok | - |
Gecko 36.0/ 48.0/ 60.0 | fail | rectangle not replaced |
This is SVG or SVG basic, but not SVG tiny:
e2011-04-05-01: §UA
Animated Penrose Pattern:
An animated Penrose pattern is realised with a larger amount of
use elements referencing other use elements.
The shapes of kites and darts are changed with animations of the
attribute d of the referenced paths. The animations start after
five seconds with a duration of two minutes and they are repeated.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50 | fail | wrong paths |
Opera9tp1 | fail | wrong viewBox |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
Note, that according to the specification it is not possible to refer with use directly to an animate, set, animateMotion or
animateTransform element. Therefore it is not possible to re-use animation elements directly.
This would be a nice improvement for later SVG versions to reduce source code of documents.
But already now it should be possible to use a XML namespace extension - definition of an ENTITY
including the animation elements or just attributes.
In general this can be an alternative to use with similar behaviour.
For repeated long values of attributes this may be the only method to reduce source code.
e2006-01-13-01: §Q
reuse of an animation:
A set animation is reused with an DTD entity.
All circles are set from top to bottom after 3s.
The red one uses a normal embedded set element,
the magenta and the blue use the same shortcut from an
DTD extension.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | ok | - |
WebKit 528.16 | fail | no reuse |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51/ 11.3.1 | 3/13 | 3/19 |
KSVG1 | 2/13 | 2/19 |
WebKit 528.16 | 11/13 | 15/19 |
Adobe | 11/13 | 16/19 |
Squiggle 1.7 | 9/13 | 13/19 |
Opera8.02/50 | 7/13 | 8/19 |
Opera9tp1 | 5/13 | 6/19 |
Opera9tp2 | 13/13 | 17/19 |
Opera9 beta1/beta2/ 9.00/9.10 | 13/13 | 18/19 |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | 13/13 | 18/19 |
Opera11.60/ 12,00 | 12/13 | 17/19 |
Gecko 2.0/ 8.0 | 11/13 | 14/19 |
Gecko 12.0 | 11/13 | 16/19 |
Gecko 24.0 | 12/13 | 17/19 |
Gecko 36.0/ 48.0/ 60.0 | 12/13 | 16/19 |
e2005-08-25-01: §M(2)P
set animation of specific
attributes of the image element:
The position and size of an image with a rectangle and
a circle is animated with a set element.
x and y are set from 600 to 100, width and height are
set from 300 to 100, all after 3 seconds.
The initial and the final shape is given in gray.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | ok | - |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-25-02: §M(2)P
animate animation of specific
attributes of the image element:
The position and size of an image with a rectangle and
a circle is animated with a animate element.
x and y change from 600 to 100, width and height change
from 300 to 100, within 10 seconds.
The initial and the final shape is given in gray.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-25-03: §Q
set-Animation of the
xlink:href attribute of the image element:
The referenced image is exchanged with a set-animation
after 5 seconds.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-25-04: §Q
discrete animate animation of the
xlink:href attribute of the image element:
The referenced image is exchanged with a discrete animate-animation
every 5 seconds.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no animation |
Opera9tp1 | fail | no animation |
Opera9tp2/beta 1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-25-05: §P
animate animation of specific
attributes of the image element:
The position and size of an image is animated with a animate element.
x and y change from 600 to 100, width and height change
from 300 to 100, within 10 seconds.
The referenced image is a simple PNG directly embedded in the document.
The initial and the final shape is given in gray.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation, no display of embedded PNG |
KSVG1 | fail | no animation, display ok |
WebKit 528.16 | ok | - |
Adobe | fail | no display, but JPEG works |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | no display, but JPEG works |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG or SVG basic, but not SVG tiny:
e2005-08-25-06: §P
animated SVG referenced
by an image element:
The animated SVG circle01.svg is referenced with the
image element. The border of the image is given with a blue stroked
rectangle.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | (ok) | well, not really ok, sometimes it works, sometimes KSVG crashes |
WebKit 528.16 | ok | - |
Adobe | fail | no animation |
Squiggle 1.7 | fail | no animation |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10 | fail | no display, no animation. bug-205735 |
Opera9.50 alpha/beta/ 9.52 | ok | - |
Opera 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | no animation |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
No attribute specific for switch is animatable, but it is important, if user-agents do not support animation or other features, because authors can use this to offer alternate content. Another possibility is conditional processing dependent on the language or on extensions.
e2006-01-14-01: §Q
using switch in
a document with animation:
Even if a user-agent is not able to present animation,
it should be able to present some alternate content.
Therefore an author should use the switch element to
offer the main information of important documents in an alternative way.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51 | ok | displays alternate content |
Amaya11.3.1 | fail | crashes |
KSVG1 | fail | uses always the first alternative |
WebKit 528.16 | (ok) | lies about the BasicStructure feature support, of title and desc, could be wrong too |
Adobe | fail | claims not to support any feature |
Squiggle 1.7 | ok | - |
Opera8.02/50 | fail | last switch ignored? |
Opera9tp1/2/ beta1 | (ok) | lies a little bit about the BasicStructure feature support, of title and desc, could be wrong too |
Opera9beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | (ok) | title already supported in parts, therefore better as previous versions |
Gecko 2.0/ 8.0/ 12.0 | (ok) | lies about the BasicStructure feature support, of title and desc, could be wrong too |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | fail | uses always the first alternative, but ignores animateColor |
e2007-12-08-01: §M(1)P
switch animation:
A switch is used with systemLanguage on a set element.
The set switches the color of a gray square to blue at 2s,
not to red as the alternative set would do, if the systemLanguage
is not supported. Red indicates an error.
The systemLanguage is derived from the related
parameter HTTP_ACCEPT_LANGUAGE from the viewer.
An additional string of a supported systemLanguage
can be given manually with the GET parameter 'lang'.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | switch ignored |
WebKit 528.16 | fail | switch ignored |
Adobe | fail | switch ignored |
Squiggle 1.7 | fail | switch ignored |
Opera8.02/50/ 9tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | switch ignored |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | switch ignored |
e2007-12-08-02: §M(1)P
switch animation:
A switch is used with systemLanguage on a set element.
The set enlarges the width of a red square.
The following alternative set element enlarges the height
of the same rectangle.
It is assumed, that a viewer does not support the required
systemLanguage, therefore the alternative set has to be used.
A blue comparison is provided on top of the red one,
if the red test rectangle gets visible, this indicates
an error.
The systemLanguage is something experimental 'x-xl'
by default.
Alternatively a string of an unsupported systemLanguage
can be given manually with the GET parameter 'lang'.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | switch ignored |
WebKit 528.16 | fail | switch ignored |
Adobe | fail | switch ignored |
Squiggle 1.7 | fail | switch ignored |
Opera8.02/50 | fail | switch ignored |
Opera9tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | more than one set applied |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | switch ignored |
e2007-12-08-03: §M(1)P
switch animation:
A switch is used with systemLanguage on a g element containing a circle and a set element.
The set switches the color of a gray square to blue at 2s,
not to red as the alternative set would do, if the systemLanguage
is not supported. Red indicates an error.
The systemLanguage is derived from the related
parameter HTTP_ACCEPT_LANGUAGE from the viewer.
An additional string of a supported systemLanguage
can be given manually with the GET parameter 'lang'.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51 | fail | no animation |
Amaya11.3.1 | fail | crashes |
KSVG1 | fail | switch ignored |
WebKit 528.16 | fail | switch ignored |
Adobe | fail | switch ignored |
Squiggle 1.7 | fail | switch ignored |
Opera8.02/50/ 9tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | switch ignored |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | switch ignoriert |
e2007-12-08-04: §M(1)P
switch animation:
A switch is used with systemLanguage on a g element containing a circle and a set element.
The set enlarges the width of a red square.
The following alternative set element enlarges the height
of the same rectangle.
It is assumed, that a viewer does not support the required
systemLanguage, therefore the alternative set has to be used.
A blue comparison is provided on top of the red one,
if the red test rectangle gets visible, this indicates
an error.
The systemLanguage is something experimental 'x-xl'
by default.
Alternatively a string of an unsupported systemLanguage
can be given manually with the GET parameter 'lang'.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51 | fail | no animation |
Amaya11.3.1 | fail | crashes |
KSVG1 | fail | switch ignored |
WebKit 528.16 | fail | switch ignored |
Adobe | fail | switch ignored |
Squiggle 1.7 | fail | switch ignored |
Opera8.02/50/ 9tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | switch ignored |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | switch ignored |
e2007-12-08-05: §M(1)P
switch animation:
A switch is used with systemLanguage on a g element containing a set element in a circle.
The set switches the color of a gray square to blue at 2s,
not to red as the alternative set would do, if the systemLanguage
is not supported. Red indicates an error.
The systemLanguage is derived from the related
parameter HTTP_ACCEPT_LANGUAGE from the viewer.
An additional string of a supported systemLanguage
can be given manually with the GET parameter 'lang'.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51 | fail | no animation |
Amaya11.3.1 | fail | crashes |
KSVG1 | fail | switch ignored |
WebKit 528.16 | fail | switch ignored |
Adobe | fail | switch ignored |
Squiggle 1.7 | fail | switch ignored |
Opera8.02/50/ 9tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | switch ignored |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | switch ignored |
e2007-12-08-06: §M(1)P
switch animation:
A switch is used with systemLanguage on a g element containing a set element in a circle.
The set enlarges the width of a red square.
The following alternative set element enlarges the height
of the same rectangle.
It is assumed, that a viewer does not support the required
systemLanguage, therefore the alternative set has to be used.
A blue comparison is provided on top of the red one,
if the red test rectangle gets visible, this indicates
an error.
The systemLanguage is something experimental 'x-xl'
by default.
Alternatively a string of an unsupported systemLanguage
can be given manually with the GET parameter 'lang'.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51 | fail | no animation |
Amaya11.3.1 | fail | crashes |
KSVG1 | fail | switch ignored |
WebKit 528.16 | fail | switch ignored |
Adobe | fail | switch ignored |
Squiggle 1.7 | fail | switch ignored |
Opera8.02/50/ 9tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | fail | switch ignored |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | switch ignored |
e2007-12-08-07: §M(1)P
conditional processing and animation:
Conditional processing is used without switch and with systemLanguage on a set element.
The set switches the color of a gray square to blue at 2s,
not to red as an overwritten set does, if the systemLanguage
is not supported. Red indicates an error.
The systemLanguage is derived from the related
parameter HTTP_ACCEPT_LANGUAGE from the viewer.
An additional string of a supported systemLanguage
can be given manually with the GET parameter 'lang'.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | wrong animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2007-12-08-08: §M(1)P
conditional processing and animation:
Conditional processing is used without switch and with systemLanguage on a set element.
The set enlarges the width of a red square.
The following alternative set element enlarges the height
of the same rectangle.
It is assumed, that a viewer does not support the required
systemLanguage, therefore the alternative set has to be used.
A blue comparison is provided on top of the red one,
if the red test rectangle gets visible, this indicates
an error.
The systemLanguage is something experimental 'x-xl'
by default.
Alternatively a string of an unsupported systemLanguage
can be given manually with the GET parameter 'lang'.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | conditional processing ignored |
WebKit 528.16 | fail | switch ignored |
Adobe | fail | conditional processing ignored |
Squiggle 1.7 | fail | conditional processing ignored |
Opera8.02/50 | fail | conditional processing ignored |
Opera9tp1/2/ beta1/beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0 | fail | switch ignored |
Gecko 24.0 | fail | no animation |
Gecko 36.0/ 48.0/ 60.0 | ok | - |
e2006-08-18-10: §QA
using switch in
a document with animation:
If scripting is supported - for example, if it is not disabled -
the user gets a red warning. If not, there will be some text and
animation. Note that the featureString gives an information, wether
the feature is supported for this document or not, not if it is in
general possible that the feature can be supported under some
specific conditions, in this case only if scripting is enabled.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51 | ok | - |
Amaya11.3.1 | fail | crashes |
KSVG1 | fail | uses always the first alternative |
WebKit 528.16 | fail | claims to support scripting, even it is disabled |
Adobe | fail | scripting cannot be disabled in this viewer, this is a big security issue, but Adobe claims not to support scripting and shows the alternative |
Squiggle 1.7 | fail | claims to support scripting, even it is disabled |
Opera8.02/50/ 9tp1 | ok | - |
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 | fail | claims to support scripting, even if it is disabled |
Gecko 2.0/ 36.0/ 48.0/ 60.0 | fail | claims to support scripting, even it is disabled |
Gecko 8.0/ 12.0/ 24.0 | ok | - |
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51 | 1/9 | 2/10 |
Amaya11.3.1 | 0/9 | 0/10 |
KSVG1 | 0/9 | 0/10 |
WebKit 528.16 | 2/9 | 2/10 |
Adobe | 1/9 | 1/10 |
Squiggle 1.7 | 2/9 | 2/10 |
Opera8.02/50 | 1/9 | 2/10 |
Opera9tp1 | 4/9 | 4/10 |
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 | 3/9 | 3/10 |
Gecko 2.0 | 2/9 | 2/10 |
Gecko 8.0/ 12.0 | 2/9 | 3/10 |
Gecko 24.0 | 1/9 | 2/10 |
Gecko 36.0/ 48.0/ 60.0 | 2/9 | 2/10 |
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51 | 5/38 | 7/49 |
Amaya11.3.1 | 4/38 | 5/49 |
KSVG1 | 5/38 | 5/49 |
WebKit 528.16 | 18/38 | 28/49 |
Adobe | 17/38 | 25/49 |
Squiggle 1.7 | 20/38 | 26/49 |
Opera8.02/50 | 9/38 | 12/49 |
Opera9tp1 | 11/38 | 14/49 |
Opera9tp2 | 25/38 | 29/49 |
Opera9 beta1 | 25/38 | 31/49 |
Opera9 beta2/ 9.00/9.10 | 25/38 | 34/49 |
Opera9.50 alpha/beta/ 9.52 | 26/38 | 35/49 |
Opera10.0 alpha/beta/ 10.0/ 10.60/ 11.00 | 25/38 | 34/49 |
Opera11.60/ 12,00 | 24/38 | 33/49 |
Gecko 2.0 | 22/38 | 27/49 |
Gecko 8.0 | 22/38 | 28/49 |
Gecko 12.0 | 21/38 | 29/49 |
Gecko 24.0 | 23/38 | 31/49 |
Gecko 36.0/ 48.0/ 60.0 | 24/38 | 30/49 |
The matrix type is not animatable.
e2005-08-29-01: §Q
discrete animation of the transform type scale:
A translated, mirrored and scaled group of several shapes
is scaled and mirrored from the right to the left within 3s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | continuous animation |
Adobe | ok | - |
Squiggle 1.7 | fail | animation ok, error messages nonsense |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0 | fail | no animation |
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-29-02: §Q
animateTransform animation of the transform type scale:
A translated, mirrored and scaled group of several shapes
is scaled and mirrored from the right to the left within 10s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | wrong animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0 | fail | wrong animation of test |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-29-03: §Q
discrete animation of the transform type translate:
A translated, mirrored and scaled group of several shapes
is translated from the top right to the bottom left within 3s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | continuous animation |
Adobe | ok | - |
Squiggle 1.7 | fail | animation ok, error messages nonsense |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0 | fail | no animation |
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-29-04: §Q
animateTransform animation of the transform type translate:
A translated, mirrored and scaled group of several shapes
is translated from the top right to the bottom left within 10s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | (ok) | large steps and poor quality of display |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-29-05: §Q
discrete animation of the transform type skewX:
A translated, mirrored and scaled group of several shapes
is skewed in x from the right to the left within 3s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | continuous animation, text stroke wrong skewed |
Adobe | ok | - |
Squiggle 1.7 | fail | animation ok, error messages nonsense |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0 | fail | no animation |
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-29-06: §Q
animateTransform animation of the transform type skewX:
A translated, mirrored and scaled group of several shapes
is skewd in x from the right to the left within 10s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | (ok) | large steps and poor quality of display |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | text stroke wrong skewed |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-29-07: §Q
discrete animation of the transform type skewY:
A translated, mirrored and scaled group of several shapes
is skewed in y from the right to the left within 3s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | continuous animation, text stroke wrong skewed |
Adobe | ok | - |
Squiggle 1.7 | fail | animation ok, error messages nonsense |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0 | fail | no animation |
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-29-08: §Q
animateTransform animation of the transform type skewY:
A translated, mirrored and scaled group of several shapes
is skewd in y from the right to the left within 10s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | (ok) | large steps and poor quality of display |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | continuous animation, text stroke wrong skewed |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-29-09: §Q
discrete animation of the transform type rotate:
A translated, mirrored and scaled group of several shapes
is rotated 30 degrees within 3s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | continuous animation, text stroke wrong rotation |
Adobe | ok | - |
Squiggle 1.7 | fail | animation ok, error messages nonsense |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0 | fail | no animation |
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-29-10: §Q
animateTransform animation of the transform type rotate:
A translated, mirrored and scaled group of several shapes
is rotated from -10 to 30 degree within 10s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | (ok) | large steps and poor quality of display |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | text stroke wrong rotation |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-29-11: §Q
discrete animation of the transform type rotate:
A translated, mirrored and scaled group of several shapes
is rotated 160 degrees around the center of the image within 3s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | continuous animation, text stroke wrong transformation |
Adobe | ok | - |
Squiggle 1.7 | fail | animation ok, error messages nonsense |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0 | fail | no animation |
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-29-12: §Q
animateTransform animation of the transform type rotate:
A translated, mirrored and scaled group of several shapes
is rotated 360 degree within 10s. The center of the rotation
is moved from bottom-left from the center of the image to the top-right.
The animation is repeated.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51 | fail | wrong animation |
Amaya11.3.1 | (ok) | large steps and poor quality of display |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | text stroke wrong transformation |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-13-01: §Q
animateTransform of a JPG:
A centered image is scaled with several values in 30s with repetition.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-13-02: §Q
animateTransform of a JPG:
A centered image is translated with several values in 30s with repetition.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-13-03: §Q
animateTransform of a JPG:
A centered image is transformed with several skewX and skewY values in 30s respectively 31s with repetition.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-13-04: §Q
animateTransform of a JPG:
A centered image is rotated with several values in 30s with repetition.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-13-05: §Q
animateTransform of a JPG:
A centered image is rotated around different centers with values in 30s with repetition.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-13-06: §QU
animateTransform of a JPG:
A centered image is transform with several
types additive and several durations.
The fill attribute of a rectangle as background is
animated between some colors of the JPG.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1/2/beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51 | 4/18 | 4/18 |
Amaya11.3.1 | 5/18 | 5/18 |
KSVG1 | 0/18 | 0/18 |
WebKit 528.16 | 8/18 | 8/18 |
Adobe | 18/18 | 18/18 |
Squiggle 1.7 | 12/18 | 12/18 |
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 | 18/18 | 18/18 |
Gecko 2.0 | 11/18 | 11/18 |
Gecko 8.0/ 12.0 | 17/18 | 17/18 |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | 18/18 | 18/18 |
There is a contradiction between the DTD and the specification of SVG.
In the specification is mentioned, 'All elements that establish a new viewport ... have attribute viewBox'.
But obviously the DTD does not contain it for foreignObject and image, which establish according to the specification
a new viewport, image if referencing a SVG.
Therefore such examples cannot be tested with the validator and are not published here.
But this attribute would be useful for any image for
displaying just a part of the referenced image.
e2005-08-30-01: §Q
set-Animation of the viewBox attribute:
First just a part of a large circle is seen
at the bottom right. After 3 seconds the
viewBox is doubled in x- and y-direction.
The circle can be seen completely and
centered, but just with the half diameter.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | wrong or not supported |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation; Opera bug-178161 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-30-02: §Q
animate animation of the viewBox attribute:
First just a part of a large circle is seen
at the bottom right. Within 10 seconds the
viewBox is doubled in x- and y-direction.
The size and center of the circle changes and
can be seen completely and centered after 10 seconds.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | wrong or not supported |
WebKit 528.16 | fail | discrete animation |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation; Opera bug-178161 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-30-03: §Q
set-Animation of the viewBox attribute:
First just a part of a large circle is seen
at the bottom right. After 3 seconds the
viewBox is doubled in x- and y-direction.
min-x and min-y are set from 0 to 200.
The visual effect is, that the radius of the
circle is halved and set from the bottom right
corner to the top left corner and
the circle gets the half diameter.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | wrong or not supported |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation; Opera bug-178161 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-30-04: §Q
animate animation of the viewBox attribute:
First just a part of a large circle is seen
at the bottom right. Within 10 seconds the
viewBox is doubled in x- and y-direction.
min-x and min-y are set from 0 to 200.
The visual effect is, that the radius of the
circle is halved and set from the bottom right
corner to the top left corner and
the circle gets the half diameter.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | wrong or not supported |
WebKit 528.16 | fail | discrete animation |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation; Opera bug-178161 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG or SVG basic, but not SVG tiny:
e2006-01-16-11: §Q
animation of the viewBox attribute of a symbol:
A symbol consists of three ellipses.
The viewBox of the symbol is animated, resulting in a resizing of the symbol
within 47s with repetition.
The symbol is referenced four times with different sizes with use elements.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | discrete animation, nonsense display |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation, mysterious error messages |
Opera8.02/50 | fail | no animation, no display |
Opera9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
This is SVG or SVG basic, but not SVG tiny:
e2006-01-16-12: §Q
animation of the viewBox attribute of a marker:
The viewBox attribute is animated for a marker element
with several values within 30s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | ignored |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | discrete animation |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation, wrong error messages |
Opera8.02/50/ 9tp1 | fail | no animation, no display |
Opera9tp2/ beta1 | fail | overflow property ignored |
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG or SVG basic, but not SVG tiny:
e2006-01-16-13: §Q
animation of the viewBox attribute of a pattern:
The viewBox attribute is animated for a pattern element
with several values within 30s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | ignored |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | no pattern at all |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation, mysterious error messages |
Opera8.02/50 | fail | no animation, no display |
Opera9tp1/2/ beta1 | fail | no animation, no display of pattern |
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,00 | ok | - |
Gecko 2.0 | fail | no animation |
Gecko 8.0/ 12.0 | fail | wrong interpretation of viewBox |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG or SVG basic, but not SVG tiny:
e2006-01-16-14: §IQ
animation of the viewBox attribute of a view:
The viewBox attribute is animated for a view element
with several values within 30s and repetition.
Click on the circle to see the animated view.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | ignored |
KSVG1 | fail | no animation, element ignored |
WebKit 528.16 | ok | - |
Adobe | fail | no animation |
Squiggle 1.7 | fail | no animation, mysterious error messages |
Opera8.02/50 | fail | no animation, element ignored |
Opera9tp1/2/ beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 | fail | no animation, element ignored (tp1, 9.50 alpha) |
Opera9.00/9.10/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0 | fail | no animation |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51/ 11.3.1 | 0/4 | 0/8 |
KSVG1 | 0/4 | 0/8 |
WebKit 528.16 | 2/4 | 3/8 |
Adobe | 4/4 | 7/8 |
Squiggle 1.7 | 4/4 | 4/8 |
Opera8.02/50/ 9tp1 | 0/4 | 0/8 |
Opera9tp2/ beta1 | 4/4 | 5/8 |
Opera9 beta2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 | 4/4 | 7/8 |
Opera9.00/9.10/ 10.60/ 11.00/11.60/ 12,00 | 4/4 | 8/8 |
Gecko 2.0/ 8.0/ 12.0 | 4/4 | 5/8 |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | 4/4 | 7/8 |
e2005-08-30-05: §Q
set-Animation of the preserveAspectRatio attribute:
A blue circle switches into an ellipse after 3s by changing the attribute
preserveAspectRatio of the svg-element.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | no animation; Opera bug-178160 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-30-06: §Q
animate animation of the preserveAspectRatio attribute:
A blue circle switches into an ellipse after 3s by changing the attribute
preserveAspectRatio of the svg-element. The animation is repeated.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | wrong viewBox |
Opera8.02/50/ 9tp1 | fail | no animation; Opera bug-178160 |
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 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-08-30-07: §Q
set-Animation of the preserveAspectRatio attribute:
An image with a blue ellipse on a blue rectangle
switches into an circle on a blue square after 3s by changing the attribute
preserveAspectRatio of the image-element.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | no animation |
Squiggle 1.7 | fail | no animation, wrong error message |
Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
Gecko 24.0 | fail | no animation |
e2005-08-30-08: §Q
animate animation of the preserveAspectRatio attribute:
An image with a blue ellipse on a blue rectangle
switches into a circle on a blue square after 3s by changing the attribute
preserveAspectRatio of the image-element. The animation is repeated.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | no animation |
Squiggle 1.7 | fail | no animation, wrong error message |
Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
Gecko 24.0 | fail | no animation |
This is SVG or SVG basic, but not SVG tiny:
e2005-10-07-01: §Q
animation of the preserveAspectRatio attribute:
Each second the preserveAspectRatio attribute is changed
for a JPG between the values:
xMinYMin meet; xMinYMid meet;xMinYMax meet
Top left is the same JPG with the original preserveAspectRatio.
fill of a circle is changed between gray and black just for timing.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | attribute ignored, no animation |
WebKit 528.16 | ok | - |
Adobe | fail | attribute ignored, no animation |
Squiggle 1.7 | fail | no animation, wrong error message |
Opera8.02/50 | fail | attribute ignored, no animation |
Opera9tp1 | fail | attribute ignored, 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
Gecko 24.0 | fail | no animation |
This is SVG or SVG basic, but not SVG tiny:
e2005-10-07-02: §Q
animation of the preserveAspectRatio attribute:
Each second the preserveAspectRatio attribute is changed
for a JPG between the values:
xMidYMin meet; xMidYMid meet;xMidYMax meet
Top left is the same JPG with the original preserveAspectRatio.
fill of a circle is changed between gray and black just for timing.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | attribute ignored, no animation |
WebKit 528.16 | ok | - |
Adobe | fail | attribute ignored, no animation |
Squiggle 1.7 | fail | no animation, wrong error message |
Opera8.02/50 | fail | attribute ignored, no animation |
Opera9tp1 | fail | attribute ignored, 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
Gecko 24.0 | fail | no animation |
This is SVG or SVG basic, but not SVG tiny:
e2005-10-07-03: §Q
animation of the preserveAspectRatio attribute:
Each second the preserveAspectRatio attribute is changed
for a JPG between the values:
xMaxYMin meet; xMaxYMid meet;xMaxYMax meet
Top left is the same JPG with the original preserveAspectRatio.
fill of a circle is changed between gray and black just for timing.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | attribute ignored, no animation |
WebKit 528.16 | ok | - |
Adobe | fail | attribute ignored, no animation |
Squiggle 1.7 | fail | no animation, wrong error message |
Opera8.02/50 | fail | attribute ignored, no animation |
Opera9tp1 | fail | attribute ignored, 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
Gecko 24.0 | fail | no animation |
This is SVG or SVG basic, but not SVG tiny:
e2005-10-07-04: §Q
animation of the preserveAspectRatio attribute:
Each second the preserveAspectRatio attribute is changed
for a JPG between the values:
xMinYMin slice; xMinYMid slice;xMinYMax slice
Top left is the same JPG with the original preserveAspectRatio.
fill of a circle is changed between gray and black just for timing.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | attribute ignored, no animation |
WebKit 528.16 | fail | wrong animation, partly no display |
Adobe | fail | attribute ignored, no animation |
Squiggle 1.7 | fail | no animation, wrong error message |
Opera8.02/50 | fail | attribute ignored, no animation |
Opera9tp1 | fail | attribute ignored, 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
Gecko 24.0 | fail | no animation |
This is SVG or SVG basic, but not SVG tiny:
e2005-10-07-05: §Q
animation of the preserveAspectRatio attribute:
Each second the preserveAspectRatio attribute is changed
for a JPG between the values:
xMidYMin slice; xMidYMid slice;xMidYMax slice
Top left is the same JPG with the original preserveAspectRatio.
fill of a circle is changed between gray and black just for timing.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | attribute ignored, no animation |
WebKit 528.16 | fail | wrong animation, partly no display |
Adobe | fail | attribute ignored, no animation |
Squiggle 1.7 | fail | no animation, wrong error message |
Opera8.02/50 | fail | attribute ignored, no animation |
Opera9tp1 | fail | attribute ignored, 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
Gecko 24.0 | fail | no animation |
This is SVG or SVG basic, but not SVG tiny:
e2005-10-07-06: §Q
animation of the preserveAspectRatio attribute:
Each second the preserveAspectRatio attribute is changed
for a JPG between the values:
xMaxYMin slice; xMaxYMid slice;xMaxYMax slice
Top left is the same JPG with the original preserveAspectRatio.
fill of a circle is changed between gray and black just for timing.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | attribute ignored, no animation |
WebKit 528.16 | fail | wrong animation, partly no display |
Adobe | fail | attribute ignored, no animation |
Squiggle 1.7 | fail | no animation, wrong error message |
Opera8.02/50 | fail | attribute ignored, no animation |
Opera9tp1 | fail | attribute ignored, 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 36.0/ 48.0/ 60.0 | ok | - |
Gecko 24.0 | fail | no animation |
Note, that the not animated example in the specification with included SVGs is OK for KSVG1 but Adobe and Opera show completely nonsense.
This is SVG or SVG basic, but not SVG tiny:
e2006-01-17-01: §Q
animation of the preserveAspectRatio attribute of a symbol:
A symbol consists of three ellipses.
The preserveAspectRatio of the symbol is set from none to xMaxYMax after 3s for 5s.
Then it is set for 5s to xMinYMin.
The symbol is referenced four times with different sizes with use elements.
The colour of a circle is just changed to give the timing.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | nonsense display |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50 | fail | element ignored, no animation |
Opera9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
This is SVG or SVG basic, but not SVG tiny:
e2006-01-18-01: §Q
animation of the preserveAspectRatio attribute of a marker:
preserveAspectRatio is set from none to xMinYMin meet after
3s and to xMaxYMax slice after 8s for 5s. overflow is visible.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | ignored |
KSVG1 | fail | second set ignored |
WebKit 528.16 | fail | wrong animation |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50/ 9tp1 | fail | element ignored, no animation |
Opera9tp2/ beta1 | fail | property overflow ignored |
Opera9 beta2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
This is SVG or SVG basic, but not SVG tiny:
e2006-01-18-02: §Q
animation of the preserveAspectRatio attribute of a pattern:
preserveAspectRatio is set from none to xMaxYMax after
3s and to xMinYMin after 8s for 5s.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | ignored |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | no pattern at all |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50/ 9tp1/2/ beta1 | fail | element ignored, 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,00 | ok | - |
Gecko 2.0 | fail | second set ignored |
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | wrong viexBox |
This is SVG or SVG basic, but not SVG tiny:
e2006-01-18-03: §IQ
animation of the preserveAspectRatio attribute of a view:
preserveAspectRatio is set from none to xMinYMin after
10s and to xMaxYMax after 20s for 10s.
Click the circle to see the animated view before 10s after begin.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | ignored |
KSVG1 | fail | no animation, view ignored |
WebKit 528.16 | ok | - |
Adobe | fail | wrong or no animation |
Squiggle 1.7 | fail | no animation |
Opera8.02/50 | fail | element ignored, no animation |
Opera9tp1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 | fail | element ignored (tp1, Opera9.50 alpha), no animation |
Opera9 beta1/2 | fail | wrong or no animation |
Opera9.00/9.10/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0 | fail | no animation |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51/ 11.3.1 | 0/4 | 0/14 |
KSVG1 | 0/4 | 0/14 |
WebKit 528.16 | 4/4 | 8/14 |
Adobe | 2/4 | 5/14 |
Squiggle 1.7 | 1/4 | 1/14 |
Opera8.02/50/ 9tp1 | 0/4 | 0/14 |
Opera9tp2/ beta1 | 4/4 | 11/14 |
Opera9 beta2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 | 4/4 | 13/14 |
Opera9.00/9.10/ 10.60/ 11.00/11.60/ 12,00 | 4/4 | 14/14 |
Gecko 2.0/ 8.0/ 12.0 | 4/4 | 11/14 |
Gecko 24.0 | 2/4 | 3/14 |
Gecko 36.0/ 48.0/ 60.0 | 4/4 | 11/14 |
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51 | 4/26 | 4/40 |
Amaya11.3.1 | 5/26 | 5/40 |
KSVG1 | 0/26 | 0/40 |
WebKit 528.16 | 14/26 | 19/40 |
Adobe | 24/26 | 30/40 |
Squiggle 1.7 | 17/26 | 17/40 |
Opera8.02/50/ 9tp1 | 18/26 | 18/40 |
Opera9tp2/ beta1 | 26/26 | 34/40 |
Opera9 beta2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 | 26/26 | 38/40 |
Opera9.00/9.10/ 10.60/ 11.00/11.60/ 12,00 | 26/26 | 40/40 |
Gecko 2.0 | 19/26 | 30/40 |
Gecko 8.0/ 12.0 | 25/26 | 36/40 |
Gecko 24.0 | 24/26 | 28/40 |
Gecko 36.0/ 48.0/ 60.0 | 26/26 | 36/40 |
e2005-09-01-21: §IQ
set-Animation of the xlink:href attribute of the a element:
At the beginning the value of xlink:href is circle01.svg.
After 5s it is set to rect01.svg. A click on the displayed
circle depending on time will show different files.
The content of the files - see above, one is an animated circle, the
other one an animated rectangle.
Not part of the test, but just for timing the fill attribute
of the circle is set from light blue to dark blue.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-01-22: §IQ
discrete animation of the xlink:href attribute of the a element:
At the beginning the value of xlink:href is circle01.svg.
After 5s it is set to rect01.svg. A click on the displayed
circle depending on time will show different files.
The content of the files - see above, one is an animated circle, the
other one an animated rectangle.
Not part of the test, but just for timing the fill attribute
of the circle is set from light blue to dark blue. The animation is repeated.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | fill animation continuous |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-01-23: §IQ
set-Animation of the target attribute of the a element:
At the beginning the value of target is _blank.
After 5s it is set to _self. A click on the displayed
circle depending on time will show the document first
in a new window, then in the same window.
Not part of the test, but just for timing the fill attribute
of the circle is changed from light blue to dark blue.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-01-24: §IQ
discrete animation of the target attribute of the a element:
At the beginning the value of target is _blank.
After 5s it is set to _self. A click on the displayed
circle depending on time will show the document first
in a new window, then in the same window.
Not part of the test, but just for timing the fill attribute
of the circle is changed from light blue to dark blue.
The animation is repeated.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | fill animation continuous |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50/ 9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
There are no animatable attributes or properties specific for the view element. But in full SVG or SVG basic a view element can be the target of an animated a element.
e2005-10-13-01: §IQ
views as targets of an animated a element:
Four views are given as targets of an animated xlink:href attribute
of an a element. Colors are changed just to give a timing.
Click on the circle to see the target view.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | element ignored |
Opera9tp2/ beta1/2/ 9.00/9.10/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 | fail | no animation |
Gecko 2.0/ 8.0/ 12.0 | fail | no animation |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-13-02: §IQ
views as targets of an animated a element:
Four views in the document view01.svg are given as targets of an
animated xlink:href attribute of an a element.
Colors are changed just to give a timing.
Click on the circle to see the target view.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | element ignored |
Opera9tp2/ beta1/2/ 9.00/9.10/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 | fail | no animation |
Gecko 2.0/ 8.0/ 12.0 | fail | no animation |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-13-03: §IQ
views as targets of an animated a element:
Four views are given directly with SVG specific fragment identifiers
as targets of an animated xlink:href attribute
of an a element. Colors are changed just to give a timing.
Click on the circle to see the target view.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | fail | element ignored |
Squiggle 1.7 | ok | - |
Opera8.02/50/ 9tp1 | fail | element ignored |
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | (minor problems in 9.50 beta/ 9.52) |
Opera9.50 alpha | fail | display nonsense |
Gecko 2.0/ 8.0/ 12.0 | fail | no animation |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-10-13-04: §IQ
views as targets of an animated a element:
Four views are given directly with SVG specific fragment identifiers
as targets of an animated xlink:href attribute
of an a element. Colors are changed just to give a timing.
Click on the circle to see the target view.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51/ 11.3.1 | fail | no animation |
KSVG1 | fail | no animation |
WebKit 528.16 | fail | targets ignored |
Adobe | fail | not all views supported |
Squiggle 1.7 | fail | second view ignored |
Opera8.02/50/ 9tp1 | fail | element ignored |
Opera9tp2 | ok | - |
Opera9beta1/2/ 9.00/9.10 | fail | not all views supported. bug-211239 |
Opera9.50 alpha | fail | display nonsense |
Opera9.50 beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | (ok) | (minor display problems outside of the viewport) |
Gecko 2.0/ 8.0/ 12.0 | fail | no animation |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | fail | not all views supported. |
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51/ 11.3.1 | 0/4 | 0/8 |
KSVG1 | 0/4 | 0/8 |
WebKit 528.16 | 2/4 | 5/8 |
Adobe | 4/4 | 6/8 |
Squiggle 1.7 | 2/4 | 5/8 |
Opera8.02/50/ 9tp1 | 0/4 | 0/8 |
Opera9tp2 | 4/4 | 8/8 |
Opera9 beta1/2/ 9.00/9.10 | 4/4 | 7/8 |
Opera9.50 alpha | 4/4 | 4/8 |
Opera9.50 beta/ 9.52/ 10.0 alpha/beta/ 10.0 | 4/4 | 6/8 |
Opera10.60/ 11.00/11.60/ 12,00 | 4/4 | 8/8 |
Gecko 2.0/ 8.0/ 12.0 | 4/4 | 4/8 |
Gecko 24.0/ 36.0/ 48.0/ 60.0 | 4/4 | 7/8 |
Attributes in the animation chapter are not animatable, but they have of course influence on animations. This is explained in the animation chapter separately.
e2005-09-02-01: §Q
set-Animation of the color property:
The color of several shapes in a group is set from light blue to dark blue
after 3 seconds.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | element ignored |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50 | fail | element ignored |
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | ok | - |
e2005-09-02-02: §Q
animateColor animation of the
color property:
The color of several shapes in a group change from light blue to dark blue
in 10 seconds.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG tiny 1.1 |
Amaya9.51/ 11.3.1 | fail | element ignored |
KSVG1 | fail | no animation |
WebKit 528.16 | ok | - |
Adobe | ok | - |
Squiggle 1.7 | fail | no animation |
Opera8.02/50 | fail | element ignored |
Opera9tp1 | fail | 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,00 | ok | - |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | fail | no animation |
The color-profile element has no specific animatable attributes or properties.
The color-profile property is animatable, but is not part of SVG tiny. If somebody provides me two color-profile source documents, I will offer a sample for animation.
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51/ 11.3.1 | 0/2 | 0/2 |
KSVG1 | 0/2 | 0/2 |
WebKit 528.16 | 2/2 | 2/2 |
Adobe | 2/2 | 2/2 |
Squiggle 1.7 | 0/2 | 0/2 |
Opera8.02/50 | 0/2 | 0/2 |
Opera9tp1 | 1/2 | 1/2 |
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 | 2/2 | 2/2 |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 1/2 | 1/2 |
The color property is not animated in general from KSVG and Opera 8. Opera 8 ignores it for stroke.
There are no animatable attributes or properties in the fonts chapter. However note, that the glyph definitions can contain animated shapes.
There are no animatable attributes or properties in the scripting chapter,
but as shown in the example in the animation section of the specification it is
possible to use scripting for animation purposes, too.
Animation using the SVG DOM is similar to set-Animation, but with the
possibility of repetition, therefore it is a more frame-based technique and not
time-based as SVG animation. The timing accuracy is lower than with
declarative animation and it is not available for SVG tiny and maybe not
available for user-agents with higher security settings, but the author
can use conditional processing and complex user interactivity.
Of course, this is just useful for personal application or in a LAN with
well known user-agents, which support scripting. For general internet application
this is not known and server-sided scripting like PHP or PERL in combination with
declarative animation is much more relyable than user-sided scripting.
But this is already well known from XHTML applications, where scripting may be
only useful for decorative and not functional purposes, as CSS.
The information of a document should be accessable without scripting or
CSS. If an animation contains information, scripting is the wrong way in the
internet.
Because declarative animation is time based, the accuracy is higher and with
server sided scripting calculation can be clearly separated from presentation.
The user-agent can concentrate on the presentation.
e2007-03-04-01: §IQ
script example:
Simple example using switch, feature string and ecma-script.
The display of this document depends on a switch of
the feature string for script and on ecma-script.
First case: feature string returns true for script
and scripting is active - the user gets a request
to switch off scripting to continue with the test.
Second case: feature string returns true for script
and scripting is not active - the user gets an
information about an error. The documents
contains only ecma-script. If the viewer is not
able to interprete this, it should have returned
fail for the feature string for this document.
Third case: feature string returns fail for script
and scripting is active anyway - the user will
see an animation and an information about
an error - scripting should be not available, if
the feature string returns fail in general.
Fouth case: feature string returns fail for script
and scripting is not active - the user will see
an animation.
Note that the featureString gives an information, wether
the feature is supported for this document or not, not if it is in
general possible that the feature can be supported under some
specific conditions, in this case only if scripting is enabled.
If feature strings have any benefit for authors, the return value
of the feature string has to depend on the specific current
conditions for the related document and user preferences,
not on a general philosophical statement of the viewer.
The scripting used in this document is similar to set animations
of the display property to none, respectively to block to display
the additional information to the user related to scripting.
user-agent | result | comment |
---|---|---|
W3C-Validator | ok | SVG 1.1 |
Amaya9.51 | fail | no scripting available, ignores only display none for a warning |
Amaya11.3.1 | fail | crashes |
KSVG1 | fail | scripting always active, even if switch off in the preferences, security problem |
WebKit 528.16 | fail | returns true for feature string script, even if scripting is switched off |
Adobe | fail | not possible to switch off scripting, security problem |
Squiggle 1.7 | fail | if scripting switched off, only error message, no display |
Opera8.02/50 | (ok) | no scripting available for SVG, displays correct content for this case |
Opera9tp1 | fail | displays no scripting even if scripting is active |
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 | fail | returns true for feature string script, even if scripting is switched off |
Gecko 2.0/ 36.0/ 48.0/ 60.0 | fail | returns true for feature string script, even if scripting is switched off |
Gecko 8.0/ 12.0/ 24.0 | ok | - |
There are no animatable attributes or properties in the metadata chapter.
Up to know I have no useful and correct example for foreignObject with just a SVG tiny doctype
even without animation.
If you have one, maybe you can send me by email. Animation is similar to that of an image
element for the attributes x, y, width, height and maybe in SVG tiny 1.2 xlink:href.
Note, that the example in the Specification SVG 1.1 seems to be wrong. The doctype is missing
and W3C validator does not like it. Which doctype has to be used? This from XHTML+MathML+SVG
working-draft?
I offer this here with the base-profile tiny for SVG and it does not contain more than SVG tiny from the
SVG part:
e2005-09-02-03: §P
set-Animation of specific attributes
of the foreignObject element:
The foreignObject contains a small XHTML document containing a small blue circle from SVG.
x and y are set from 500 to 100 in 3s.
width and height are set from 400 to 700 in 3s.
The initial dimensions of the foreignObject are given with a
light gray stroked rectangle, the final dimensions are given with a
dark gray stroked rectangle.
What should happen, depends on the XHTML abilities of the user-agent. If it knows XHTML, it should display
both XHTML and the circle from SVG, if not, it should display the circle as a minimum.
The animation is applied to the foreignObject. This moves the circle and the XHTML as a visible effect.
The animation of the foreignObject is ok, if the SVG circle is visible and moves.
Test - W3C-Validator XML ok
with root namespace:
http://www.w3.org/2000/svg
other namespaces:
http://www.w3.org/1999/xhtml
http://www.w3.org/1998/Math/MathML (not used in this example)
http://www.w3.org/1999/xlink
e2005-09-02-04: §P
animate animation of specific attributes
of the foreignObject element:
The foreignObject contains a small XHTML document containing a small blue circle from SVG.
x and y change from 500 to 100 in 3s.
width and height change from 400 to 700 in 3s.
The initial dimensions of the foreignObject are given with a
light gray stroked rectangle, the final dimensions are given with a
dark gray stroked rectangle.
What should happen, depends on the XHTML abilities of the user-agent. If it knows XHTML, it should display
both XHTML and the circle from SVG, if not, it should display the circle as a minimum.
The animation is applied to the foreignObject. This moves the circle and the xhtml as a visible effect.
The animation of the foreignObject is ok, if the SVG circle is visible and moves.
Test - W3C-Validator XML ok
with root namespace:
http://www.w3.org/2000/svg
other namespaces:
http://www.w3.org/1999/xhtml
http://www.w3.org/1998/Math/MathML (not used in this example)
http://www.w3.org/1999/xlink
user-agent | SVG tiny 1.1 | SVG 1.1 |
---|---|---|
user-agent | SVG tiny 1.1 | SVG 1.1 |
Amaya9.51/ 11.3.1 | 0/2 | 0/2 |
KSVG1 | 0/2 | 0/2 |
WebKit 528.16 | 1/2 | 1/2 |
Adobe | 0/2 | 0/2 |
Squiggle 1.7 | 0/2 | 0/2 |
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 | 0/2 | 0/2 |
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0/ 60.0 | 2/2 | 2/2 |
Amaya is able to display the foreignObject completely correct, but the second example is
not animated and in the first example x and y are not animated.
The extensibility is ignored in general from KSVG, Adobe, Squiggle and Opera 8 (bug-205048) and
therefore for the first two the possible animation is ignored, too.
Opera9tp2 animates a chequered rectangle instead of the expected content.
Ok, Adobe offers just a plugin,
but there is no reason, why Konqueror+KSVG and Opera are not able to display
this, because they are able to display SVG+XHTML, if the root document is XHTML.
Anyway all of them should be able to display the SVG-circle inside the foreignObject.
It seems to be a long way to complete SVG tiny support.
Opera9.50 alpha displays the foreignObject all in black and crashes while running the animation or while
closing the document. Opera 9.50 beta displays and animates the XHTML content, but does not
display the SVG inside the XHTML.
In the set example WebKit animates it correct, but the XHTML sentence vanishes. The continuous
sample is wrong.