Examples and Tests for SVG Animation

Animatable SVG filter attributes and properties, not part of SVG tiny

Filter effects

Amaya 9.51/11.3.1, KSVG 1, WebKit 528.16 and Opera 8.x ignore filter effects completely, therefore they are not mentioned. Squiggle 1.7 displays most filters, but does not animate it. Only one property is animated, this is mentioned as a test result, all others are failed.

Note, that most filter effects are just useful if combined with each other. The effect of several single filter primitives can be realised easier with other elements and methods of svg, but the combination of several filter primitives can cause interesting additional effects. Anyway some single filter primitives can already cause interesting effects without a combination with other filters. Here the filter effects are just tested, therefore most examples are simple without complex combinations of several filters. The combination of filters might cause additional problems, not in the focus of these tests.
Often is is not easy to test a correct behaviour of a filter primitve quantitatively, therefore most tests are just qualitatively. If differences between the presentation of different user agents occur, this might be a hint of a quantitative error in one or both of them.

Attributes specific for the filter element

e2005-12-18-01: 判
set animation of the filterUnits attribute:
filterUnits is animated from objectBoundingBox to userSpaceOnUse after 3s for 5s. In this situation it means, the filter feGaussianBlur is first just applied to the circle in the center of the svg and then it is expanded to the complete viewBox and after 5s back again to the initial smaller sized structure.
A gray stroked square indicates the filter area.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1fail no display for objectBoundingBox, change to userSpaceOnUse with the set animation works
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0fail no animation
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-18-02: 利
set animation of the primitiveUnits attribute:
primitiveUnits is animated from objectBoundingBox to userSpaceOnUse after 3s for 5s. In this situation it means, the filter feGaussianBlur is first just applied to the circle in the center of the svg and then it is expanded to the complete viewBox and after 5s back again to the initial smaller sized structure.
The filter primitive subregion is indicated with a gray stroked square. Note, that the standard deviation of the feGaussianBlur changes too with the animation.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailfilter primitive subregion wrong
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0fail standard deviation of the feGaussianBlur unchanged
Opera10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok -

e2005-12-18-03: 判
animation of the x and y attributes:
x and y are animated within 5s and are frozen. They are changed from 0 to 0.5, this means from top left to the center.
A gray stroked square indicates the filter area in userSpaceOnUse.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno display
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0fail no animation
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2009-07-06-01: 判
animation of the x and y attributes:
x and y are animated within 5s and are frozen. They are changed from 0 to 0.5, this means from top left to the center.
A gray stroked square indicates the filter area in objectBoundingBox.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno display
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0fail no animation
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-18-04: 判
animation of the width and height attributes:
width and height are animated within 5s and are frozen. They are changed from 0 to 1, this means from no display to full display, expanding from top left.
A gray stroked square indicates the filter area in userSpaceOnUse.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0fail no animation
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2009-07-07-01: 判
animation of the width and height attributes:
width and height are animated within 5s and are frozen. They are changed from 0 to 1, this means from no display to full display, expanding from top left.
A gray stroked square indicates the filter area in objectBoundingBox.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0fail no animation
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-18-05: 利
animation of the filterRes attribute:
filterRes animated within 30s and is frozen. It is changed with the values 1 5;10 500;100 50;400 200; 500 500, this means a change and finally a refining of the filter resolution. Note that at the first values resolution for x and y differ. A black stroked rectangle top left with roughly the same width and height as one filter dot is provided for comparison.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Opera9tp2/ beta1/2failattribute ignored
Gecko 2.0fail no animation
Gecko 8.0/ 24.0/ 36.0fail filter area wrong
Gecko 12.0ok -
Gecko 48.0failattribute ignored

e2009-07-11-01: 利
animation of the filterRes attribute:
filterRes animated discrete within 60s and is frozen. It is changed with the values 0.5;1 1;2 2;3 3;4 4;5 5;6 6;7 7;8 8;9 9;10 10;11 11;12 12;8 4;2 4;4 2;4.2 4.8.
The filter is applied to a chequered blue area with 16 squares. This raster is indicated black stroked for comparison. For a filterRes of 4, 8 or 12 (etc) the filtered pattern has to fit exactly into the raster, for other filterRes there have to be artifacts from the non fitting resolution. Due to the symmetries of the chequer pattern the filterRes 0.5, 1, 2, 2 4, 4 2 etc have to result in only one color (the same for all) for the complete area.
Gray rectangles top left indicate the size of one filter unit corresponding to the filterRes. Note, that the specification does not require positive integers as values, only numbers.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailthe resulting colors look sometimes wrong, for example '2 4' and '4 2' should result in just one color for the complete area
Opera9tp1/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00failthe resulting colors look sometimes wrong, for example '2 4' and '4 2' should result in just one color for the complete area
Opera9tp2/ beta1/2failattribute ignored
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0fail no animation
Gecko 48.0failattribute ignored

e2005-12-18-06: 冶(1)P
animation of the xlink:href attribute:
xlink:href is set to another filter source after 3s for 5s, resulting in another offset in this time.
The blue stroked test circle has always to cover the red comparison circle. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefail attribute ignored
Opera9tp1fail attribute 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,00fail minor offset error
Gecko 2.0/ 8.0/ 12.0fail attribute ignored
Gecko 24.0/ 36.0/ 48.0ok -
Test results attributes specific for the filter element
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 6/9
Opera9tp1 4/9
Opera9tp2/ beta1/2 5/9
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 6/9
Opera10.60/ 11.00/11.60/ 12,00 7/9
Gecko 2.0 1/9
Gecko 8.0 6/9
Gecko 12.0/ 24.0/ 36.0/ 48.0 7/9

The filter property

e2005-12-18-21: 冶(1)P
animation of the filter property:
The filter property is set to another filter source after 3s for 5s, resulting in another offset in this time.
The blue stroked test circle has always to cover the red comparison circle. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Squiggle 1.7ok-
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,00failminor offset error
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failstrange clipping

Filter primitives

Common attributes of filter primitives

e2005-12-19-01: 判
animation of the x and y attributes of a filter primitive:
x and y of feGaussianBlur are animated within 5s and are frozen. They are changed from 0 to 0.5, this means from top left to the center.
A gray stroked square indicates the filter primitive subregion in userSpaceOnUse.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0ok-
Gecko 12.0/ 24.0/ 36.0/ 48.0ok-

e2009-07-08-01: 判
animation of the x and y attributes of a filter primitive:
x and y of feGaussianBlur are animated within 5s and are frozen. They are changed from 0 to 0.5, this means from top left to the center.
A gray stroked square indicates the filter primitive subregion in userSpaceOnUse.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailattribute 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,00ok-
Gecko 2.0/ 8.0failminor rendering problems
Gecko 12.0/ 48.0ok-
Gecko 24.0/ 36.0failwrong filter area

e2005-12-19-02: 判
animation of the width and height attributes of a filter primitive:
width and height of feGaussianBlur are animated within 5s and are frozen. They are changed from 0 to 1, this means from no display to full display, expanding from top left.
A gray stroked square indicates the filter primitive subregion in userSpaceOnUse.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2009-07-09-01: 判
animation of the width and height attributes of a filter primitive:
width and height of feGaussianBlur are animated within 5s and are frozen. They are changed from 0 to 1, this means from no display to full display, expanding from top left.
A gray stroked square indicates the filter primitive subregion in objectBoundingBox.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailattribute 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,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-19-10: 利
animation of the in attribute of a filter primitive:
in of feGaussianBlur is set after 5s from SourceGraphic to SourceAlpha for 5s. This results in a change from a coloured graphic to a grayscale and back to colour.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-19-11: 利
animation of the in attribute of a filter primitive:
in of feGaussianBlur is changed in 12s using the values SourceGraphic;SourceAlpha;FillPaint;StrokePaint.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0failpartially missing filter sources
Gecko 24.0/ 36.0/ 48.0ok-

e2005-12-19-12: 利
animation of the in attribute of a filter primitive:
in of feGaussianBlur is set after 5s from BackgroundImage to BackgroundAlpha for 5s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
AdobeokNote, that the example in the specification for background image is incorrect presented in Adobe, but this simple example is correct, therefore Adobes behaviour is not really reliable for background image.
Opera9tp1failno animation, but presentation of background image is correct.
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failno animation

e2005-12-19-13: 冶(1)P
animation of the in attribute of a filter primitive:
in of feOffset is changed between the 9 values from several other feOffset elements with positive or negative shifts for dx and dy.
The blue stroked test circle has always to cover the red comparison circle. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0failminor rendering problems
Gecko 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-19-20: 冶(1)P
animation of the result attribute of a filter primitive:
result of a feOffset is set after 5s for 5s to the name of a previous feOffet result and therefore overrides it. This is taken as the input for a feOffset with the visible effect of a shift for this 5s.
The blue stroked test circle has always to cover the red comparison circle. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0failminor rendering problems
Gecko 12.0/ 24.0/ 36.0/ 48.0ok-
Test results for common attributes
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 7/9
Opera9tp1 4/9
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 9/9
Gecko 2.0/ 8.0 4/9
Gecko 12.0/ 24.0/ 36.0 7/9
Gecko 48.0 8/9

feOffset

feOffset moves the filtered object by dx and dy relative to the source.

e2005-12-19-30: 冶(1)P
animation of the dx and dy attributes of a feOffset:
dx and dy of a feOffset are changed between several values with repetition, resulting in a moving object. Note that dx and dy have positive and negative values. The first move is from the center to top right.
Note that this example is just useful to test the attributes of this filter primitive, to realise such motion either the cx and cy of the circle should be animated or an animateTransform or animateMotion should be used directly for the element or group without using a filter.
In the specification is mentioned, that it can especially used to generate a shifted shadow - note that this is surely incorrect for a light source at finite distance. In such a case a shadow is not just shifted, it is scaled too.
To get a better result and any shadow if user agents do not support filters, it might be useful to realise the shadow using a transformed (and then filtered) use of the original object.
The blue stroked test circle has always to cover the red comparison circle. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno negative values for dx and dy
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0failwrong clipping
Gecko 12.0/ 24.0/ 36.0/ 48.0ok-

e2009-07-10-01: 冶(1)P
animation of the dx and dy attributes of a feOffset:
dx and dy of a feOffset with filterUnits and primitiveUnits userSpaceOnUse are changed between several values with repetition, resulting in a moving object. Note that dx and dy have positive and negative values. The first move is from the center to top right. The blue stroked test circle has always to cover the red comparison circle. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno negative values for dx and dy
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0failwrong clipping
Gecko 12.0/ 24.0/ 36.0/ 48.0ok-

e2009-07-10-02: 冶(1)P
animation of the dx and dy attributes of a feOffset:
dx and dy of a feOffset with filterUnits and primitiveUnits objectBoundingBox are changed between several values with repetition, resulting in a moving object. Note that dx and dy have positive and negative values. The first move is from the center to top right. The blue stroked test circle has always to cover the red comparison circle. If something red gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno negative values for dx and dy, wrong coordinate units
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0failwrong coordinate units
Opera10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0failwrong clipping
Gecko 12.0/ 24.0/ 36.0/ 48.0ok-
Test results for attribute feOffset
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 3/3
Opera9tp1 0/3
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 2/3
Opera10.60/ 11.00/11.60/ 12,00 3/3
Gecko 2.0/ 8.0 0/3
Gecko 12.0/ 24.0/ 36.0/ 48.0 3/3

feGaussianBlur

feGaussianBlur allows a convolution of the source with a gaussian function. The attribute stdDeviation is a parameter for the standard deviation of the gaussian function. If it has only one value, this is for x and y, with two values the first one is for x, the second for y.

In the second edition of SVG 1.1, short SVG 1.1.2, in opposite to the first edition SVG 1.1.1 there is another useful, but backwards incompatible change of the behaviour for the standard deviation 0. According to 1.1.1 nothing has to be displayed, according to 1.1.2 the original graphics has to be displayed without convolution. This is the mathematically correct result (like a δ distribution as a limit of the function).
Because this change is useful, but the previously defined behaviour cannot be evaluated as wrong, if this is implemented, there is only a hint, which variant is implemented.
Because the behaviour according to 1.1.1 is not very meaningful, but it can be implemented, authors should avoid standard deviations of 0 in general and to realise the desired effect in another way.

e2005-12-19-40: 利
animation of the stdDeviation attribute of a feGaussianBlur:
stdDeviation of feGaussianBlur in userSpaceOnUse units is animated after 3s for 30s and is frozen. The initial stdDeviation is .04 .04. The values are: 0.2 0.1; 0.1 0.2; 0.05 0.07; 0.01 0.02; 0.003 0.00001; 0 0; 0 0; 0.01 0.02; 0.1 0.1; 0.3 0.2; 0.4 0.3; 1 2; 5 3. The width of the graphic is 1 for comparison.
Additionally there is a centered black stroked ellipse indicating the stdDeviation of the filter as main half axis. A large sized ellipse corresponds to a smooth filter effect, a small ellipse corresponds to a sharp shape (a stroked circle).

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobe(ok)Behaviour of SVG 1.1.2 (!)
Opera9tp1failif the stdDeviation is not small compared to width and height, Opera crashes.
Opera9.00/9.10failno display of animated filter
Opera9tp2/ beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00(ok)Behaviour of SVG 1.1.1
Opera 11.60/ 12,00(ok)Behaviour of SVG 1.1.2
Gecko 2.0failno animation
Gecko 8.0failwrong clipping
Gecko 12.0/ 24.0/ 36.0/ 48.0(ok)Behaviour of SVG 1.1.2

e2009-07-12-01: 利
animation of the stdDeviation attribute of a feGaussianBlur:
stdDeviation of feGaussianBlur in objectBoundingBox units is animated after 3s for 30s and is frozen. The initial stdDeviation is .04 .04. The values are: 0.2 0.1; 0.1 0.2; 0.05 0.07; 0.01 0.02; 0.003 0.00001; 0 0; 0 0; 0.01 0.02; 0.1 0.1; 0.3 0.2; 0.4 0.3; 1 2; 5 3. The width of the graphic is 1 for comparison.
Additionally there is a centered black stroked ellipse indicating the stdDeviation of the filter as main half axis. A large sized ellipse corresponds to a smooth filter effect, a small ellipse corresponds to a sharp shape (a stroked circle).

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobe(ok)Behaviour of SVG 1.1.2 (!)
Opera9tp1failwrong units; if the stdDeviation is not small compared to width and height, Opera crashes.
Opera9tp2/ beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0failwrong units
Opera9.00/9.10failno display of animated filter
Opera10.60/ 11.00(ok)Behaviour of SVG 1.1.1
Opera 11.60/ 12,00(ok)Behaviour of SVG 1.1.2
Gecko 2.0failno animation
Gecko 8.0failwrong clipping
Gecko 12.0/ 24.0/ 36.0/ 48.0(ok)Behaviour of SVG 1.1.2

e2009-07-12-02: 利
animation of the stdDeviation attribute of a feGaussianBlur:
stdDeviation of feGaussianBlur in userSpaceOnUse units is animated discrete after 3s for 30s and is frozen.
For comparison there are centered black stroked ellipses indicating roughly the size of the filtered shape. The major part of the filtered shape has to be between the two ellipses.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failif the stdDeviation is not small compared to width and height, Opera crashes.
Opera9tp2/ beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Opera9.00/9.10failevery second value not displayed
Gecko 2.0failno animation
Gecko 8.0failwrong clipping
Gecko 12.0/ 24.0/ 36.0/ 48.0ok-

e2009-07-12-03: 利
animation of the stdDeviation attribute of a feGaussianBlur:
stdDeviation of feGaussianBlur in objectBoundingBox units is animated discrete after 3s for 30s and is frozen. For comparison there are centered black stroked ellipses indicating roughly the size of the filtered shape. The major part of the filtered shape has to be between the two ellipses.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
AdobefailAdobe does not show the filtered object at all.
Opera9tp1failwrong units; if the stdDeviation is not small compared to width and height, Opera crashes.
Opera9tp2/ beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0failwrong units
Opera9.00/9.10failwrong units; every second value not displayed
Opera10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0failno animation
Gecko 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2010-08-26-01: 利
animation of the stdDeviation attribute of a feGaussianBlur:
stdDeviation of feGaussianBlur in userSpaceOnUse units is animated discrete after 3s for 30s and is frozen. Either the standard deviation in x or in y is zero and the other not.
For comparison there are centered black stroked ellipses indicating roughly the size of the filtered shape. The major part of the filtered shape has to be between the two ellipses.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailfilter area not displayed
Opera9tp1/tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0failfilter area not displayed
Opera10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0failno animation
Gecko 8.0failwrong clipping
Gecko 12.0/ 24.0/ 36.0/ 48.0ok-
Test results for attribute feGaussianBlur
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 1/5
Opera9tp1 0/5
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 1/5
Opera10.60/ 11.00/11.60/ 12,00 5/5
Gecko 2.0/ 8.0 0/5
Gecko 12.0/ 24.0/ 36.0 4/5
Gecko 48.0 5/5

feImage

feImage references another graphic or images, using the xlink:href attribute. The graphic can be a complete image (PNG, SVG or JPEG) or some element, which can be outside the filter. In the first case the behaviour is like that of the image element, else it is like the use element. The preserveAspectRatio attribute can be used too. Of course for acessibility image and use should be preferred, if possible. This element is mainly useful, if the referred graphic itself is part of the filter like internal sources like sourceAlpha or a result of another filter primitive.

e2005-12-19-50: 利
animation of the xlink:href attribute of a feImage:
xlink:href of feImage is set after 5s from a PNG with a red circle to a PNG with a yellow circle for 5s. Both images have a blue background. An additional feGaussianBlur is applied.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-19-51: 利
animation of the xlink:href attribute of a feImage:
xlink:href of feImage is set after 5s from a green rectangle to a red ellipse with blue stroke for 5s. An additional feGaussianBlur is applied.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failno display

e2005-12-19-52: 利
animated group as a source of a feImage:
Source of feImage is a group of a rect and an ellipse with several animations. An additional feGaussianBlur is applied.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failno display

e2005-12-19-53: 利
animation of the xlink:href attribute of a feImage:
xlink:href of feImage is set after 5s from a simple embedded cyan PNG to simple embedded red PNG for 5s. An additional feGaussianBlur is applied.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailno display
Opera9tp1failno animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2010-08-27-01: 判
animation of the attributes x and y of a feImage:
x and y of feImage are animated after 2s from a PNG for 5s. A red rectangle behind has the same animation. It if gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/tp2/ beta1/2/ 9.00/9.10failfilter area not displayed
Operax9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2010-08-27-02: 判
animation of the attributes width and height of a feImage:
width and height of feImage are animated after 2s from a PNG for 5s. A red rectangle behind has the same animation. It if gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/tp2/ beta1/2/ 9.00/9.10failfilter area not displayed
Operax9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-
Test results for attribute feImage
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 5/6
Opera9tp1 1/6
Opera9tp2/ beta1/2/ 9.00/9.10 4/6
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 6/6
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 4/6

feTile

feTile allows pattern within filters. in or the previous filter primitive gives the source of the pattern.

e2005-12-19-60: 判
animation of the feTile:
feTile has no attributes specific for this element.
Common attributes x, y, width and height for filter primitives are animated with feTile. Several values for all attributes are used with repetition.
A black stroked rectangle indicates the position and size of the feTile.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
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,00failsmall vertical gap within tile
Gecko 2.0/ 8.0/ 12.0/ 48.0ok-
Gecko 24.0/ 36.0failwrong filter area

e2005-12-19-61: 利
feTile refers an animated group:
feTile references a feImage which refers to an animated group constiting of a green square and a red ellipse with a blue stroke. Both are rotated.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failfilter area not displayed

e2009-07-13-01: 判
animation of the feTile:
feTile has no attributes specific for this element.
Common attributes x, y, width and height for filter primitives are animated with feTile in objectBoundingBox units. Several values for all attributes are used with repetition.
A black stroked rectangle indicates the position and size of the feTile.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
AdobefailfeTile not displayed
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0failhorizontal gaps in tile
Gecko 24.0failstrange residuals and horizontal gaps in tile
Gecko 36.0/ 48.0ok-
Test results for attribute feTile
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 2/3
Opera9tp1/tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 2/3
Gecko 2.0/ 8.0/ 12.0 1/3
Gecko 24.0 0/3
Gecko 36.0 1/3
Gecko 48.0 2/3

feFlood

feFlood fills the filter region with the color and opacity values from properties flood-color and flood-opacity.

e2005-12-19-70: 利
animation of the flood-color and flood-opacity properties of a feFlood:
flood-color and flood-opacity of feFlood are animated with several values.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-19-71: 利
animateColor animation of the flood-color and animate animation of the flood-opacity properties of a feFlood:
flood-color is animated with and animateColor and flood-opacity of feFlood is animated, both with several values.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2fail no animation of flood-color with animateColor
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,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail no animation of flood-color with animateColor

e2005-12-19-72: 利
discrete animation of the flood-color property of a feFlood:
flood-color of feFlood is discrete animated with several values including currentColor, starting with red as currentColor, which is used every second time, the other colours are blue, yellow and green.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailno currentColor
Opera9tp1fail no currentColor, last value green ignored
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0fail no currentColor

e2010-08-28-01: 判
animation of the attributes x and y of feFlood:
x and y of feFlood are animated. A red rectangle behind has the same animation. It if gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2010-08-28-02: 判
animation of the attributes width and height of feFlood:
width and height of feFlood are animated. A red rectangle behind has the same animation. It if gets visible, an error is occured.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-
Test results for attribute feFlood
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 4/5
Opera9tp1 3/5
Opera9tp2 4/5
Opera9beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 5/5
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 3/5

feBlend

feBlend blends two objects together, using specified modes.

e2005-12-20-01: 利
animation of the in and in2 attributes of a feBlend:
in and in2 of feBlend are exchanged after 5s for 5s. The visible effect is, that the two referenced images swap their rendering order.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailopacity of images wrong
Opera9tp1failno animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-20-02: 利
animation of the mode attribute of a feBlend:
mode of feBlend is set every 3s to another value, using multiply, normal, screen, darken, lighten.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailopacity of images wrong
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2010-08-29-01: 判
feBlend with animated inputs:
feblend with mode normal is applied to rectangles with animated fill.
The areas used as visible inputs for feBlend are indicated with stroked lines. At some positions there are additional rectangles partly outside without filter but with the same color for comparison. If they differ from the filtered area, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2failwrong interpolation
Opera9beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failfilter area not displayed

e2010-08-29-02: 判
feBlend with animated inputs:
feblend with mode multiply is applied to rectangles with animated fill.
The areas used as visible inputs for feBlend are indicated with stroked lines. At some positions there are additional rectangles partly outside without filter but with the same color for comparison. If they differ from the filtered area, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10failbottom center wrong
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failfilter area not displayed

e2010-08-29-03: 判
feBlend with animated inputs:
feblend with mode screen is applied to rectangles with animated fill.
The areas used as visible inputs for feBlend are indicated with stroked lines. At some positions there are additional rectangles partly outside without filter but with the same color for comparison. If they differ from the filtered area, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10failbottom center wrong
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failfilter area not displayed

e2010-08-29-04: 判
feBlend with animated inputs:
feblend with mode darken is applied to rectangles with animated fill.
The areas used as visible inputs for feBlend are indicated with stroked lines. At some positions there are additional rectangles partly outside without filter but with the same color for comparison. If they differ from the filtered area, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10failbottom center wrong
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failfilter area not displayed

e2010-08-29-05: 判
feBlend with animated inputs:
feblend with mode lighten is applied to rectangles with animated fill.
The areas used as visible inputs for feBlend are indicated with stroked lines. At some positions there are additional rectangles partly outside without filter but with the same color for comparison. If they differ from the filtered area, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10failbottom center wrong
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0ok-
Opera10.60/ 11.00/11.60/ 12,00failwrong on the right
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failfilter area not displayed

e2010-08-30-01: 判
feBlend with animated mode:
mode of feBlend is set every 3s to another value, using normal, multiply, screen, darken, lighten.
The areas used as visible inputs for feBlend are indicated with stroked lines. At some positions there are additional rectangles partly outside without filter but with the same color for comparison. If they differ from the filtered area, this indicates an error.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10failbottom center wrong
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0ok-
Opera10.60/ 11.00/11.60/ 12,00failwrong on the right
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failfilter area not displayed
Test results for attribute feBlend
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 6/8
Opera9tp1 1/8
Opera9tp2 2/8
Opera9beta1/2/ 9.00/9.10 3/8
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/10.60 8/8
Opera11.00/11.60/ 12,00 6/8
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 2/8

feMerge

With feMerge several filter primitives can be combined to one filter primitive.

e2005-12-20-10: 利
animation of the feMerge, feMergeNodes:
feMerge has no attributes specific for this element.
Two feMergeNodes are exchanged, one after 3s for 9s, another one after 6s for 3s. As input are used feGaussianBlur, feOffset and feFlood.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno animation
Opera9tp2/ beta1/2/ 9.00/9.10failno SourceAlpha
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0failno animation
Gecko 12.0/ 24.0/ 36.0/ 48.0ok-

feSpecularLighting

With feSpecularLighting the specular component of the Phong lighting model can be applied to the source, using the alpha channel of the input. feDiffuseLighting and feSpecularLighting can be combined in an additional step. The Phong lighting model is a simple, not realistic model to simulate some surface and illumination effects. Authors and users should not expect to much...

e2005-12-20-21: 利
animation of the surfaceScale of feSpecularLighting:
surfaceScale of feSpecularLighting is animated within 30s from small to large with a yellow-white fePointLight from middle right indicated with a black stroked circle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10failbigger differences, because color interpolation is wrong
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0failwrong source position, wrong effect
Gecko 12.0/ 24.0/ 36.0/ 48.0failwrong effect

e2005-12-20-22: 利
animation of the specularConstant of feSpecularLighting:
specularConstant of feSpecularLighting is animated within 30s with the values 0.01;0.1;1;10;100;1000 and with a yellow-white fePointLight from middle right indicated with a black stroked circle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10failbigger differences, because color interpolation is wrong
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0failwrong effect

e2005-12-20-23: 利
animation of the specularExponent of feSpecularLighting:
specularExponent of feSpecularLighting is animated within 30s with the values 1;2;4;8;16;32;64;128 and with a yellow-white fePointLight from middle right indicated with a black stroked circle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10failbigger differences, because color interpolation is wrong
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0failwrong effect

e2005-12-20-24: 利
animation of the lighting-color of feSpecularLighting:
lighting-color of feSpecularLighting is animated within 30s with the values #ff0;#0ff;#f0f;#f00;#0f0;#00f;#ff0 and with a fePointLight from middle right indicated with a black stroked circle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0failwrong effect

e2005-12-20-25: 利
animation of the lighting-color of feSpecularLighting with animateColor:
lighting-color of feSpecularLighting is animated within 30s with the values #ff0;#0ff;#f0f;#f00;#0f0;#00f;#ff0 and with a fePointLight from middle right indicated with a black stroked circle with animateColor.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2failno animateColor
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,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failno animateColor

e2005-12-20-26: 利
discrete animation of the lighting-color of feSpecularLighting:
lighting-color of feSpecularLighting is animated discrete within 30s with the values currentColor;blue;currentColor;yellow;currentColor;green and with a fePointLight from middle right indicated with a black stroked circle. color is red.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
AdobefailcurrentColor ignored
Opera9tp1failcurrentColor ignored, last green value ignored
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failcurrentColor ignored, wrong clipping
Gecko 48.0failcurrentColor ignored, wrong clipping

e2009-07-15-01: 利
animation of the kernelUnitLength of feSpecularLighting:
kernelUnitLength of feSpecularLighting is animated within 60s from small to large.
fePointLight is indicated with a black stroked circle.
A rectangle top left indicates the current kernelUnitLength.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailattribute ignored, 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,00failwrong position of light source
Gecko 2.0failno animation
Gecko 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0failwrong effect
Test results for feSpecularLighting
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 5/7
Opera9tp1 1/7
Opera9tp2 2/7
Opera9 beta1/2/ 9.00/9.10 3/7
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 6/7
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 0/7

feDiffuseLighting

With feDiffuseLighting the diffuse component of the Phong lighting model can be applied to the source, using the alpha channel of the input. feDiffuseLighting and feSpecularLighting can be combined in an additional step. The Phong lighting model is a simple, not realistic model to simulate some surface and illumination effects. Authors and users should not expect to much...

e2005-12-20-30: 利
animation of the surfaceScale of feDiffuseLighting:
surfaceScale of feDiffuseLighting is animated within 30s from small to large (compared to z of a fePointLight from middle right indicated with a black stroked circle).

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-20-31: 利
animation of the diffuseConstant of feDiffuseLighting:
diffuseConstant of feDiffuseLighting is animated within 30s from small to large.
The fePointLight is indicated with a black stroked circle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-20-32: 利
animation of the kernelUnitLength of feDiffuseLighting:
kernelUnitLength of feDiffuseLighting is animated within 30s from small to large.
The fePointLight is indicated with a black stroked circle.
A rectangle top left indicates the current kernelUnitLength.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailattribute ignored, 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,00failwrong position of the light source
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0failwrong effect

e2005-12-20-33: 利
animation of the lighting-color of feDiffuseLighting:
lighting-color of feDiffuseLighting is animated within 30s.
fePointLight is indicated with a black stroked circle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-20-34: 利
animateColor animation of the lighting-color of feDiffuseLighting:
lighting-color of feDiffuseLighting is animated with animateColor within 30s.
fePointLight is indicated with a black stroked circle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2failno animateColor
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping, no animateColor
Gecko 48.0failno animateColor

e2005-12-20-35: 利
discrete animation of the lighting-color of feDiffuseLighting:
lighting-color of feDiffuseLighting is animated discrete within 30s using the values currentColor;blue;currentColor;yellow;currentColor;green.
fePointLight is indicated with a black stroked circle.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
AdobefailcurrentColor ignored
Opera9tp1failcurrentColor ignored, last green value ignored
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping, no currentColor
Gecko 48.0failno currentColor
Test results for feDiffuseLighting
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 4/6
Opera9tp1 3/6
Opera9tp2 4/6
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 5/6
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0 0/6
Gecko 48.0 3/6

fePointLight

fePointLight is used to define a point light source for feDiffuseLighting or feSpecularLighting.

e2005-12-20-40: 判
animation of the x and y of fePointLight in feDiffuseLighting:
x and y of fePointLight in feDiffuseLighting are animated with several values and with repetition.
A small black circle indicates the position of the fePointLight.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60failwrong interpretation of attributes in correlation with kernelUnitLength
Opera11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-20-41: 利
animation of the z of fePointLight in feDiffuseLighting:
z of fePointLight in feDiffuseLighting is animated with several values and with repetition.
A white stroked circle indicates the center of the fePointLight and with the diameter roughly the change of the appearence of a constant solid angle of light.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60failwrong interpretation of attributes in correlation with kernelUnitLength
Opera11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-20-42: 利
animation of the x,y and z of fePointLight in feDiffuseLighting:
x, y and z of fePointLight in feDiffuseLighting is animated with several values and with repetition.
A white stroked circle indicates the center of the fePointLight and with the diameter roughly the change of the appearence of a constant solid angle of light.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failx and y (and z?) are related to the browser window and not to the coordinate system given by the viewBox (or in general the correct coordinate system)
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2009-07-14-01: 利
animation of the x,y and z of fePointLight in feDiffuseLighting:
x, y and z of fePointLight in feDiffuseLighting with primitiveUnits objectBoundingBox is animated with several values and with repetition.
A white stroked circle indicates the center of the fePointLight and with the diameter roughly the change of the appearence of a constant solid angle of light.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefail wrong primitive units
Opera9tp1failx and y (and z?) are related to the browser window and not to the coordinate system given by the viewBox (or in general the correct coordinate system); wrong primitive units
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail wrong primitive units
Gecko 2.0/ 8.0ok-
Gecko 12.0/ 24.0/ 36.0/ 48.0fail wrong animation
Test results for fePointLight
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 3/4
Opera9tp1 0/4
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60 1/4
Opera11.00/11.60/ 12,00 3/4
Gecko 2.0/ 8.0 1/4
Gecko 12.0/ 24.0/ 36.0 0/4
Gecko 48.0 2/4

feDistantLight

feDistantLight is used to define a light source at infinite distance for feDiffuseLighting or feSpecularLighting.

e2005-12-20-50: 利
animation of the azimuth and elevation of feDistantLight in feDiffuseLighting:
azimuth and elevation of feDistantLight in feDiffuseLighting are animated. azimuth is rotated once in 30s with repetition. elevation is set from 0 to 45 after 30s.
A white line indicates the direction to the light source including a simple projection onto the canvas.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-20-51: 利
animation of the azimuth and elevation of feDistantLight in feDiffuseLighting:
azimuth and elevation of feDistantLight in feDiffuseLighting are animated. elevation is rotated once in 30s with repetition. azimuth is set from 0 to 45 after 30s.
A line indicates the direction to the light source including a simple projection onto the canvas. If the light source is in front of the object, the line is white, else dark blue.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-
Test results for feDistantLight
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 2/2
Opera9tp1/tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 2/2
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0 0/2
Gecko 48.0 2/2

feSpotLight

feSpotLight is used to define a spot light source for feDiffuseLighting or feSpecularLighting.

e2005-12-20-60: 利
animation of the x and y of feSpotLight in feDiffuseLighting:
x and y of feSpotLight in feDiffuseLighting are animated with several values and with repetition.
A white line indicates the direction of the light from the source.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-20-61: 利
animation of the z of feSpotLight in feDiffuseLighting:
z of feSpotLight in feDiffuseLighting is animated with several values and with repetition.
A white line indicates the direction of the light from the source. The increase of the stroke-width is proportional to z.
Note, that the phong modell used in SVG is in contradiction to the conservation of energy. This becomes clearly visible when large z and small z presentations are compared - if the light source is close to the object, the surface should be very bright compared to the same source in a large distance. Authors should recognise this if they animate light sources. For larger distances the lighting-color has to be darkend according to the conservation of energy manually (the same energy for the same solid angle and the same light source).

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-20-62: 利
animation of the pointsAtX and pointsAtY of feSpotLight in feDiffuseLighting:
pointsAtX and pointsAtY of feSpotLight in feDiffuseLighting are animated with several values and with repetition.
A white line indicates the direction of the light from the source.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-20-63: 利
animation of the pointsAtZ of feSpotLight in feDiffuseLighting:
pointsAtZ of feSpotLight in feDiffuseLighting are animated with several values and with repetition.
A white line indicates the direction of the light from the source. The increase of the stroke-width is proportional to pointsAtZ.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-20-64: 利
animation of the limitingConeAngle of feSpotLight in feDiffuseLighting:
limitingConeAngle of feSpotLight in feDiffuseLighting is animated with several values and with repetition.
Three white stroked circles indicate the radius of the limiting cone, one on top of the circle, one in the middle for the square and one at zero height. There has to be no light beyond those circles within the related shapes.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
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,00failslightly wrong limitingConeAngle
Gecko 2.0/ 8.0failwrong clipping, wrong limitingConeAngle
Gecko 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-20-65: 利
animation of the specularExponent of feSpotLight in feDiffuseLighting:
specularExponent of feSpotLight in feDiffuseLighting is animated with several values and with repetition.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-
Test results for feSpotLight
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 6/6
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 5/6
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0 0/6
Gecko 48.0 6/6

feTurbulence

feTurbulence generates pseudo random turbulence or fractal noise textures using the Perlin turbulence function.

e2005-12-21-01: 利
animation of the seed of feTurbulence:
seed of feTurbulence is animated, changing all 5s, resulting in several random generated images.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailsome vertical strokes perturbation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-21-02: 利
animation of the numOctaves of feTurbulence:
numOctaves of feTurbulence is animated in 45s, resulting in several images.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailsome vertical strokes perturbation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-21-03: 利
animation of the stitchTiles of feTurbulence:
stitchTiles of feTurbulence is switched from noStitch to stitch after 5s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failno animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-21-04: 利
animation of the baseFrequency of feTurbulence:
baseFrequency of feTurbulence is animated in 90s, resulting in several images.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailsome vertical strokes perturbation
Opera9tp1/2/ beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Opera9.00/9.10kono horizontal turbulence in 9.00, no display in 9.10
Gecko 2.0failno animation
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-21-05: 利
animation of the type of feTurbulence:
type of feTurbulence is switched from turbulence to fractalNoise after 5s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailsome vertical strokes perturbation
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-21-06: 利
animation of several attributes of feTurbulence:
several attributes of feTurbulence are animated with repetition, resulting in several images.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailsome vertical strokes perturbation
Opera9tp1/2/ beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Opera9.00/9.10kono horizontal turbulence in 9.00, constant gray display in 9.10
Gecko 2.0failno animation of baseFrequency
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-
Test results for feTurbulence
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 1/6
Opera9tp1 5/6
Opera9tp2/ beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 6/6
Opera9.00/9.10 4/6
Gecko 2.0 4/6
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0 6/6

feComposite

feComposite combines two sources. The result depends on the used operator.

e2005-12-21-20: 利
animation of the in and in2 of feComposite:
in and in2 of feComposite are exchanged after 5s for 5s. Because the operator is over, the visible effect is that the painting order is changed for 5s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailopacity of images wrong
Opera9tp1failno animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-21-21: 利
animation of the operator of feComposite:
operator of feComposite is exchanged all 3s, first over, then in, out, atop, xor.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailopacity of images wrong, interpretation of attribute wrong, see the example from the specification for feComposite without animation too.
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,00okthe example from the specification for feComposite without animation is not completely correct in Opera9tp1
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-21-22: 利
animation of the k1, k2, k3, k4 of feComposite:
k1, k2, k3, k4 of feComposite are animated each for 3s from 0 to 1, starting after each other, the first one after 3s, the initial value for all is 0.5. After 15s and 18s are some fading effects added k2 in, k3 out with k1 and k4 zero or k1 in, k4 out, k2 and k3 zero.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailinterpretation of attribute wrong, see the example from the specification for feComposite without animation too.
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,00okthe example from the specification for feComposite without animation is not completely correct in Opera9tp1
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-
Test results for feComposite
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 0/3
Opera9tp1 2/3
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 3/3
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 3/3

feColorMatrix

A matrix transformation in the color and alpha space can be done with feColorMatrix.

e2005-12-22-01: 利
animation of the values for feColorMatrix:
values for feColorMatrix with type saturate is animated from 0 to 1 in 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok*
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok*
Gecko 2.0/ 8.0failwrong clipping
Gecko 12.0/ 24.0/ 36.0/ 48.0ok*

* minor differences...

e2005-12-22-02: 利
animation of the values for feColorMatrix:
values for feColorMatrix with type hueRotate is animated from 0 to 360 in 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok*
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok*
Gecko 2.0/ 8.0failwrong clipping
Gecko 12.0/ 24.0/ 36.0/ 48.0ok*

* minor differences...

e2005-12-22-03: 利
animation of the type and values for feColorMatrix:
type and values for feColorMatrix are animated. For the first 10s type is hueRotate and values is animated from 0 to 360 in 10s. The next 10s type is saturate and values is animated from 0 to 1 in 10s. Then the type is set to luminanceToAlpha.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok*
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok*
Gecko 2.0/ 8.0failwrong clipping
Gecko 12.0/ 24.0/ 36.0/ 48.0ok*

* minor differences...

e2005-12-22-04: 利
animation of the values for feColorMatrix with type matrix:
values for feColorMatrix with type matrix is animated with different matrices after 3s for 30s. Final value is a complete blue graphic.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1failblue finish ignored
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-
Test results for feColorMatrix
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 4/4
Opera9tp1 3/4
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 4/4
Gecko 2.0/ 8.0 0/4
Gecko 12.0/ 24.0/ 36.0 3/4
Gecko 48.0 4/4

feDisplacementMap

feDisplacementMap uses the pixel colour values from the image from in2 to displace in the x- or y-direction the image from in.
Unfortunately the specifications gives no hint about the purpose of this element, therefore these examples might be not very useful. It should be possible to offer a simple surface projection in the space x, y, z with z = function of x and y, storing some x-y-structure in one graphic and the z-information together with the displacement in the other graphic.

e2005-12-22-10: 利
animation of the scale, xChannelSelector, yChannelSelector, in and in2 of feDisplacementMap:
scale, xChannelSelector, yChannelSelector, in and in2 of feDisplacementMap are exchanged after 3s with several values and combinations. As images some additionally defined internal SVGs are used, containing circles with different colours.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailwrong positioning of internal SVGs
Opera9tp1failwrong scaling of filter coordinates, no display but correct positioning of internal SVGs
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00fail no display
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failno display

e2005-12-22-11: 利
animation of the scale, xChannelSelector, yChannelSelector, in of feDisplacementMap,
animation of the scale, xChannelSelector, yChannelSelector, in of feDisplacementMap using images generated with feTurbulence:
scale, xChannelSelector, yChannelSelector, in of feDisplacementMap are exchanged after 3s with several values and combinations.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailwrong interpretation of one PNG, wrong interpretation of negative scale?
Opera9tp1failwrong animation
Opera9tp2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-22-12: 利
feDisplacementMap and feComposite with animated source
in feDisplacementMap an animated ellipse is used to displace a portrait of the author. The ellipse is rotated and the colour is animated resulting in a changing displacement with the shape of a rotated ellipse. With feComposite the visible part of the image is clipped to the animated ellipse.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failno display

e2009-07-22-01: 利
feDisplacementMap combined with animated gradient
A feDisplacementMap with a radial gradient is used to displace a blue cross.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failno display
Test results for feDisplacementMap
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 2/4
Opera9tp1 2/4
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/4
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0 1/4

feComponentTransfer

Some color transformations can be applied with feComponentTransfer using the enclosed elements feFuncR, feFuncG, feFuncB, feFuncA.

e2005-12-23-01: 利
animation of the slope of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer:
slope of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer with type linear is animated in 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-23-02: 利
animation of the intercept of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer:
intercept of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer with type linear is animated in 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-23-03: 利
animation of the amplitude of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer:
amplitude of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer with type gamma is animated in 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailnegative exponent interpreted as positive
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0failwrong clipping
Gecko 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-23-04: 利
animation of the exponent of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer:
exponent of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer with type gamma is animated in 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailnegative exponent interpreted as positive
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-23-05: 利
animation of the offset of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer:
offset of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer with type gamma is animated in 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailnegative exponent interpreted as positive
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0failwrong clipping
Gecko 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-23-06: 利
animation of the tableValues of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer:
tableValues of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer with type table is animated in 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
AdobefailfuncA 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,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-23-07: 利
animation of the tableValues of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer:
tableValues of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer with type discrete is animated in 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
AdobefailfuncA 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,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-

e2005-12-23-08: 利
animation of the type of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer:
type of feFuncR, feFuncG, feFuncB, feFuncA in feComponentTransfer is set from linear to identity after 5s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0failwrong clipping
Gecko 48.0ok-
Test results for feComponentTransfer
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 3/8
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 8/8
Gecko 2.0/ 8.0 0/8
Gecko 12.0/ 24.0/ 36.0 2/8
Gecko 48.0 8/8

feMorphology

Dilation or erosion can be applied to a source with feMorphology.

e2005-12-23-20: 利
animation of the operator and radius of feMorphology:
operator and radius of feMorphology are animated. First operator is erode and radius is animated from 1 1 to 10 5 in 10s. Then operator is set to dilate and the animation of radius is repeated.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Opera9.00/9.10kono display
Gecko 2.0/ 8.0failwrong clipping, no text for erode
Gecko 12.0/ 24.0failno text for erode
Gecko 36.0/ 48.0ok -

feConvolveMatrix

feConvolveMatrix performs a matrix convolution filter effect on the source.

e2005-12-24-01: 利
animation of the divisor of feConvolveMatrix:
divisor of feConvolveMatrix is animated around the default value after 3s for 20s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-24-02: 利
animation of the bias of feConvolveMatrix:
bias of feConvolveMatrix is animated around the default value after 3s for 20s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailwrong display for negative bias, wrong animation
Opera9tp1ok-
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,00failwrong display for negative bias, wrong animation
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failwrong display for negative bias, wrong animation

e2005-12-24-03: 利
animation of the kernelUnitLength of feConvolveMatrix:
kernelUnitLength of feConvolveMatrix is animated with several values after 3s for 20s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0failno animation
Gecko 8.0/ 12.0/ 24.0/ 36.0ok-
Gecko 48.0failwrong effect

e2005-12-24-04: 利
animation of the targetX and targetY of feConvolveMatrix:
targetX and targetY of feConvolveMatrix are animated around the default value after 3s for 20s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-24-05: 利
animation of the preserveAlpha of feConvolveMatrix:
preserveAlpha of feConvolveMatrix is set from true to false after 3s for 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-24-06: 利
animation of the edgeMode of feConvolveMatrix
e2011-08-11-01: 利
animation of the edgeMode of feConvolveMatrix (2)
e2011-08-11-02: 利
animation of the edgeMode of feConvolveMatrix (3)
edgeMode of feConvolveMatrix is set from none to wrap to dublicate each 5s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2failwrong display of wrap, but looks funny
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,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0kosecond and third example blurred
Gecko 36.0/ 48.0ok-

e2005-12-24-07: 利
animation of the kernelMatrix of feConvolveMatrix:
kernelMatrix of feConvolveMatrix is animated with several values after 3s for 50s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2/ 9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-

e2005-12-24-08: 利
animation of the kernelMatrix of feConvolveMatrix:
kernelMatrix of feConvolveMatrix is animated from one matrix to another after 3s for 20s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobefailno linear animation but discrete?
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,00failno linear animation but discrete?
Gecko 2.0/ 8.0/ 12.0/ 24.0/ 36.0/ 48.0failno linear animation but discrete?

e2005-12-24-09: 利
animation of the kernelMatrix and order of feConvolveMatrix:
kernelMatrix and order of feConvolveMatrix are set to another value after 3s for 10s and then for another 10s to another kernelMatrix and order and then again another for 10s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta1/2failwrong display, order not animated?
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0failno display for animation
Gecko 8.0/ 12.0/ 24.0/ 36.0/ 48.0ok-
Test results for feConvolveMatrix
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 7/9
Opera9tp1 6/9
Opera9tp2 5/9
Opera9 beta1/2 6/9
Opera9.00/9.10/ 9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00 7/9
Gecko 2.0 4/9
Gecko 8.0/ 12.0/ 24.0 6/9
Gecko 36.0 7/9
Gecko 48.0 6/9

color-interpolation-filters property

Similar to color-interpolation for general use the color-interpolation-filters property determines the colour space used for filter operations.

e2005-12-25-01: 利
animation of the color-interpolation-filters:
color-interpolation-filters is set from sRGB to linearRGB after 5s for 5s.

Test results
user-agentresultcomment
W3C-ValidatorokSVG 1.1
Adobeok-
Opera9tp1/2/ beta2/ 9.00/9.10failno animation, property ignored
Opera9 beta1failcrashes immediately
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0/ 10.60/ 11.00/11.60/ 12,00ok-
Gecko 2.0/ 8.0/ 24.0/ 36.0/ 48.0failno animation, property ignored
Gecko 12.0ok-
Test results for Filter effects
user-agentSVG 1.1
user-agentSVG 1.1
Adobe 75/111
Squiggle 1.7 1/111
Opera9tp1 53/111
Opera9tp2 74/111
Opera9 beta1/2 79/111
Opera9.00/9.10 74/111
Opera9.50 alpha/beta/ 9.52/ 10.0 alpha/beta/ 10.0 94/111
Opera10.60 97/111
Opera11.00/11.60/ 12,00 98/111
Gecko 2.0 28/111
Gecko 8.0 37/111
Gecko 12.0 55/111
Gecko 24.0 53/111
Gecko 36.0 56/111
Gecko 48.0 78/111