Examples and Tests for SVG Animation

Test Results

Tests are done mainly with available user agents on Debian Linux. There are Amaya, KSVG 1 of KDE, a plugin for the browser Konqueror, adobe plugin (still 3.01 beta 3 from 2003-12; Adobe stopped the development of this plugin in the end of 2006 before there was a final release for Linux) and Squiggle/Batik 1.7 (2008-01-09; running on sun-java 1.6)

Opera started support for SVG with version 8.02 (SVG tiny, with version 9 more).

WebKit is able to display SVG. Unfortunately for testing and reliability of its behaviour the dependency on libraries is complex and depends on several circumstances. The observation on my Linux computers is, that browsers using this library are typically pretty unreliable. This is quite remarkable, because Konqueror and KSVG, WebKit was forked off, are more reliable.
Therefore initially I tested it only randomly, using Arora 0.4 (WebKit/523.15), Konqueror4.1 (alternative view with WebKit/523.15), Safari 3.2.1 (WebKit 525.27.1) and Google Chrome 1.0 (WebKit 525.19) with the result, that those programs do not support animation at all. Safari 4 beta (WebKit 528.16) supports some animation and is tested. There is no big difference in Safari 4.

Google Chrome 4.0 (for Linux) claims to use WebKit/532.5 - however the SVG support is completely corrupted (no display of standalone documents) - what happened between version 1 and 4? Only regressions? A test with a stable version 9 indicates as well, that this browser is not able anymore to display SVG, at least on one computer, on another with the same installation it seems to work.
As I discovered 2011-03, the problem can be avoided by deactivating at 'chrome://plugins/' everything that is related with plugins or such programs having something to do with SVG.

With the appearance of Debian 6 at the beginning of 2011 it became possible to test several browsers using WebKit libraries. Unfortunately it turned out, that Epiphany, Midori and Kazehakase using the GTK library libwebkit (WebKit 531.2) cannot display XML in general (they display typically wrong error messages) and especially not SVG. Kazehakase cannot even display HTML.
The browsers Arora, rekonq and Konqueror 4 (kpart WebKit alternative) are using the QT4 library libqt4-webkit (WebKit 532.4). At least they display XML in general, on one computer SVG as well, on another there is either no display of SVG in Arora or crashes with any SVG in the other browsers.
As I discovered 2011-03, the problem can be avoided for Arora by deactivating 'Enable Plugins' at 'Tools - Options - Privacy'.

Chromium 6 is claiming to use WebKit 534.3. It is not able to display XML (only wrong error messages) and misses a plugin to display SVG - similar to Google Chrome it cannot display SVG on its own.

For Mozilla Gecko animation is not available in Gecko versions 1.8.x, 1.9.1, but in preview versions of Firefox 3.7, corresponding to Gecko 1.9.3a1pre. With Version 2.0 animation is available.

MSIE (microsoft internet explorer up to version 8.0) does not interprete SVG at all. Depending on the system preferences SVG files are passed on my test system to Inkscape or Opera (other programs or plugins are possible too). Version 9 interpretes SVG, but still does not animate it.

Other Programs like Gimp, Imagemagick, Inkscape, Sodipodi, Sketch, Renesis player (and plugin) are available too, but they don't support animation up to now.

Additionally the samples are checked with the validator of W3C - this means, that the examples passed the validator, it is a check of the documents, not of the validator. Anyway, maybe the validator does not check all values of attributes. Therefore this is no guarantee for correct values and with this check it is not guaranteed that the descriptions of the samples are correct.
Vendors of other user agents may want to have their product tested here, too. I can do this, if a Debian (stable) package is provided, an easy to install static tar.gz (compressed archive) may work, too. Since 2009-01 windows vista is available too.
If somebody identifies errors or deviations between the descriptions and the documents, please report them immediately.

The results for each attribute or property are directly given at each example or in general for the subsection. For larger sections or subsections a summary is given, too. The tests are divided in two parts, the first is 'Animatable Attributes and Properties', the second one is 'Animation Attributes and Elements'. Of course, these results are not completely independent on each other. If a user agent does not interprete an animation attribute, the whole animation fails for the attributes and properties, it is applied. On the other side, if it is ignored, that an attribute or property is animatable, the animation fails, too. Therefore this two components are two different factors in the ability of a user agent in SVG animations.
It is important to keep in mind, that a successful test result does not mean, that the document is completely displayed correctly. For example contains every example the elements title and desc, but various are not able to display these correctly, therefore their overall result could be zero too. The tests results focus on animation and the elements directly related to the example, therefore all results are very gracious in general.

Test results Animatable Attributes and Properties

user-agent	SVG tiny 1.1	SVG 1.1 without filter	SVG 1.1 with filter
user-agent	SVG tiny 1.1	SVG 1.1 without filter	SVG 1.1 with filter
Amaya9.51	14/258 (0.054)	16/562 (0.028)	16/673 (0.024)
Amaya11.3.1	15/258 (0.058)	19/562 (0.034)	19/673 (0.028)
KSVG1	32/258 (0.12)	49/562 (0.088)	49/673 (0.073)
WebKit 528.16ff (Safari 4)	152/258 (0.59)	262/562 (0.47)	262/673 (0.39)
Adobe	182/258 (0.71)	362/562 (0.64)	439/673 (0.65)
Squiggle 1.7	165/258 (0.64)	290/562 (0.52)	291/673 (0.43)
Opera8.02/50	76/258 (0.29)	101/562 (0.18)	101/673 (0.15)
Opera9tp1	118/258 (0.46)	182/562 (0.32)	235/673 (0.35)
Opera9tp2	176/258 (0.68)	288/562 (0.51)	361/673 (0.54)
Opera9 beta1	170/258 (0.66)	298/562 (0.53)	377/673 (0.56)
Opera9 beta2	182/258 (0.70)	321/562 (0.57)	399/673 (0.59)
Opera9.00/9.10	191/258 (0.74)	349/562 (0.62)	426/673 (0.63)
Opera9.50 alpha	196/258 (0.76)	400/562 (0.71)	496/673 (0.74)
Opera9.50 beta	198/258 (0.77)	404/562 (0.72)	498/673 (0.74)
Opera9.52	199/258 (0.77)	406/562 (0.72)	498/673 (0.74)
Opera10.0 alpha	207/258 (0.80)	414/562 (0.74)	508/673 (0.75)
Opera10.0 beta/ 10.0	207/258 (0.80)	411/562 (0.73)	505/673 (0.75)
Opera10.60	204/258 (0.79)	417/562 (0.74)	514/673 (0.76)
Opera11.00	198/258 (0.77)	408/562 (0.73)	506/673 (0.75)
Opera11.60	198/258 (0.77)	398/562 (0.71)	496/673 (0.74)
Opera12,00	198/258 (0.77)	399/562 (0.71)	497/673 (0.74)
Gecko 2.0	207/258 (0.80)	336/562 (0.60)	364/673 (0.54)
Gecko 8.0	216/258 (0.84)	344/562 (0.61)	381/673 (0.57)
Gecko 12.0	215/258 (0.83)	348/562 (0.62)	403/673 (0.60)
Gecko 24.0	216/258 (0.84)	349/562 (0.62)	402/673 (0.60)
Gecko 36.0	219/258 (0.85)	363/562 (0.65)	419/673 (0.62)
Gecko 48.0	223/258 (0.86)	378/562 (0.67)	456/673 (0.68)
Gecko 60.0	214/258 (0.83)	372/562 (0.66)	450/673 (0.67)

Test results for Animation Elements and Attributes

user-agent	SVG tiny 1.1	SVG 1.1
user-agent	SVG tiny 1.1	SVG 1.1
Amaya9.51	7/366 (0.019)	8/402 (0.020)
Amaya11.3.1	8/366 (0.022)	9/402 (0.022)
KSVG1	11/366 (0.030)	11/402 (0.027)
WebKit 528.16ff (Safari 4)	149/366 (0.41)	156/402 (0.39)
Adobe	197/366 (0.54)	205/402 (0.51)
Squiggle 1.7	196/366 (0.54)	212/402 (0.53)
Opera8.02/50	117/366 (0.32)	120/402 (0.30)
Opera9tp1	139/366 (0.38)	144/402 (0.36)
Opera9tp2	194/366 (0.53)	208/402 (0.52)
Opera9 beta1	169/366 (0.46)	178/402 (0.44)
Opera9 beta2	177/366 (0.48)	188/402 (0.47)
Opera9.00/9.10	198/366 (0.54)	210/402 (0.52)
Opera9.50 alpha	254/366 (0.69)	266/402 (0.66)
Opera9.50 beta	256/366 (0.70)	268/402 (0.67)
Opera9.52	256/366 (0.70)	268/402 (0.67)
Opera10.0 alpha	256/366 (0.70)	270/402 (0.67)
Opera10.0 beta/ 10.0	258/366 (0.70)	270/402 (0.67)
Opera10.60	259/366 (0.71)	270/402 (0.67)
Opera11.00	260/366 (0.71)	272/402 (0.68)
Opera11.60	263/366 (0.72)	275/402 (0.68)
Opera12,00	255/366 (0.70)	266/402 (0.66)
Gecko 2.0	171/366 (0.47)	183/402 (0.46)
Gecko 8.0	187/366 (0.51)	199/402 (0.50)
Gecko 12.0	173/366 (0.47)	185/402 (0.46)
Gecko 24.0	177/366 (0.48)	189/402 (0.47)
Gecko 36.0	183/366 (0.50)	192/402 (0.48)
Gecko 48.0	183/366 (0.50)	191/402 (0.48)
Gecko 60.0	200/366 (0.55)	208/402 (0.52)

Display Probability

Display probability is defined here as an expression for the correct display of single random choice animation.
For a random choice animation the probability of a correct display can be estimated with the two test results. Because the animation depend on both, the probabilities have to be multiplied, to get an estimate for a single simple animation. If there is more than one animation in one document, the probability depends on the questions, if they use the same animatable attributes or properties and animation attributes or elements. Then the display probability will not decrease. But if the animations are independent on each other, then the single display probabilities have to be multiplied, to get the result for the whole document.

Display Probability for a Single Random Choice Animation

user-agent	SVG tiny 1.1	SVG 1.1 without filter	SVG 1.1
user-agent	SVG tiny 1.1	SVG 1.1 without filter	SVG 1.1
microsoft internet explorer < 9 *1*	0 ± 0	0 ± 0	0 ± 0
microsoft internet explorer 9 *2*	0 + 0.001	0 + 0.001	0 + 0.001
Renesis player 1.0 *2*	0 + 0.001	0 + 0.001	0 + 0.001
Amaya9.51	0.0011 ± 0.001	0.0006 ± 0.0006	0.0005 ± 0.0005
Amaya11.3.1	0.0013 ± 0.001	0.0008 ± 0.0008	0.0006 ± 0.0006
KSVG1	0.0038 ± 0.003	0.0024 ± 0.002	0.0020 ± 0.002
Safari 4 (WebKit 528.16)	0.24 ± 0.012	0.18 ± 0.009	0.15 ± 0.008
Midori, Kazehakase, Epiphany (GTK libwebkit; WebKit 531.2) *3*	0 ± 0	0 ± 0	0 ± 0
rekonq, Konqueror4 (using kpartwebkit), Arora (QT4 libqt4-webkit; WebKit 532.4) *4*	0 ± 0	0 ± 0	0 ± 0
Chromium 6 (WebKit 534.3) *5*	0 ± 0	0 ± 0	0 ± 0
Google Chrome (tested up to version 19, WebKit 536.5) *6*	0 ± 0	0 ± 0	0 ± 0
Adobe	0.38 ± 0.019	0.32 ± 0.016	0.33 ± 0.017
Squiggle 1.7	0.34 ± 0.017	0.27 ± 0.014	0.23 ± 0.012
Opera8.x	0.091 ± 0.006	0.052 ± 0.004	0.044 ± 0.004
Opera9tp1	0.17 ± 0.009	0.12 ± 0.006	0.12 ± 0.006
Opera9tp2	0.36 ± 0.018	0.26 ± 0.013	0.27 ± 0.014
Opera9 beta1	0.30 ± 0.015	0.23 ± 0.012	0.24 ± 0.013
Opera9 beta2	0.34 ± 0.017	0.26 ± 0.013	0.27 ± 0.014
Opera9.0x/9.1x/9.2x	0.39 ± 0.020	0.32 ± 0.016	0.33 ± 0.017
Opera9.50 alpha	0.52 ± 0.026	0.46 ± 0.023	0.48 ± 0.024
Opera9.50 beta	0.53 ± 0.027	0.47 ± 0.024	0.49 ± 0.025
Opera9.5x/9.6x	0.53 ± 0.027	0.48 ± 0.024	0.49 ± 0.025
Opera10.0 alpha	0.55 ± 0.028	0.49 ± 0.025	0.50 ± 0.025
Opera10.0 beta/ 10.0	0.55 ± 0.028	0.49 ± 0.025	0.50 ± 0.025
Opera10.60	0.55 ± 0.028	0.49 ± 0.025	0.51 ± 0.026
Opera11.00	0.54 ± 0.027	0.49 ± 0.025	0.51 ± 0.026
Opera11.60	0.55 ± 0.028	0.48 ± 0.024	0.50 ± 0.025
Opera12,00	0.53 ± 0.027	0.47 ± 0.024	0.49 ± 0.025
Mozilla Gecko < 1.9.2 *7*	0 + 0.001	0 + 0.001	0 + 0.001
Mozilla Gecko 2.0 *8*	0.37 ± 0.019	0.27 ± 0.014	0.24 ± 0.012
Mozilla Gecko 8.0 *9*	0.43 ± 0.022	0.30 ± 0.015	0.28 ± 0.014
Mozilla Gecko 12.0 *10*	0.39 ± 0.020	0.28 ± 0.014	0.28 ± 0.014
Mozilla Gecko 24.0 *11*	0.40 ± 0.020	0.29 ± 0.015	0.28 ± 0.014
Mozilla Gecko 36.0 *12*	0.42 ± 0.021	0.31 ± 0.016	0.30 ± 0.015
Mozilla Gecko 48.0 *13*	0.43 ± 0.022	0.32 ± 0.016	0.32 ± 0.016
Mozilla Gecko 60.0 *14*	0.45 ± 0.023	0.34 ± 0.017	0.35 ± 0.018

*1* No interpretation of SVG at all.
*2* Because for a few tests there is no visible effect for animation and therefore theses tests are ok nevertheless.
*3* Provides error messages instead of SVG, this is maybe related to a problem to decode iso-8859-1 ;o)
*4* May crash on some computers, on some computers there might be a more meaningful display. Because this is not predictable, no reliable display is assumed in general.
*5* Seems to have problems to decode iso-8859-1 ;o)
*6* Notes 'missing plug-in' on some computers, on some computers there might be a more meaningful display. Because this is not predictable, no reliable display is assumed in general. The funny thing is, that if plugins are disabled, there is no missing plugin anymore and the SVG is displayed. At the latest since version 22 (WebKit 537.4) there appears a more meaningful warning and a comfortable option to deactivate specific plugins, therefore a meaningful usage is possible.
*7* In 1.7.x SVG partially interpreted, but no animation, beginning with 1.8.x SVG is interpreted, but not animated.
*8* Firefox 4 (rv:2.0, Gecko/20100101).
*9* Firefox 8 (rv:8.0, Gecko/20100101).
*10* Firefox 12 (rv:12.0, Gecko/20100101).
*11* Firefox 24 (rv:24.0 Gecko/20100101).
*12* Firefox 36 (rv:36.0 Gecko/20100101).
*13* Firefox 48 (rv:48.0 Gecko/20100101).
*14* Firefox 60 (rv:60.0 Gecko/20100101).

Accuracy of the estimates: Previous fluctuations in these results give an estimate for the relative error for the display probability of about five percent of the value including not yet discovered errors in the tests too. Of course the relative fluctuations are larger, if just a few tests are ok.

For SVG one result is without the chapter 'Filters' and one with filters. Note, that KSVG 1, Opera 8 and Safari4 ignore filters even without animation completely, for them the display probability for filters and animation is therefore 0.

Of course, authors of SVG documents can influence the result for there documents, if they do not have a random choice. Some attributes, properties and elements will be used more often than other - developers of user agents know this and care for correct display of these parts of SVG more. If the authors care about this, for example by using the results of this publication to avoid failed examples, the probability for a correct display of a document can be increased.

The disadvantage of this approach is, that the documents show not really the desired content, which is intended by the author, it shows just a similar visible effect. This is not the same and authors have to keep in mind this limitations and errors of available user agents, producing just preliminary documents, to be completely corrected in a future with better user agents.

The work of an author should be formed with his imaginations, fantasies and abilities and not with the errors and gaps of available tools like user agents. Therefore it is important to ask for better user agents with a complete support of SVG to be able to concentrate on the content and not on errors of user agents.

The results for the user agents show, that KSVG 1 is just a first attempt, concerning animation. Up to now, KSVG is mainly useful for SVG without animation. Maybe for very special and simple animations authors can realise documents especially for this user agent.

The abilities of Amaya (up to tested version 11.3.1) are not really useful for animation and it as many gaps and problems with the display even without animation, but I think, this project is open for anyone to help.

Taking into account the abilities of Opera8, authors can create already very interesting animations. Often it will not be very difficult to work around the errors of this user agent. But of course, Opera published version 8 as a user agent for SVG tiny - and therefore it is a little bit disappointing. Errors and gaps should be corrected immediately to make this promise true, meaning a display probability for SVG tiny 1.1 of more than 0.9.
Opera10.x are already the best available user agents for declarative animation, apart from some accuracy problems.
Unfortunately there is stagnation or even slight regressions in newer versions.
Note, that Opera has stopped development of the relevant part of the program Presto with version Opera12.16. Versions beyond this are related to WebKit or Blink and the capabilities of Presto are not saved to these Versions, they are simply not related.

The Adobe plugin has a display probability comparable to Opera 9 beta1/2, but both have often different weaknesses, therefore to get it right for both, authors are constrained to a certain subset of SVG. And Adobe targets SVG full and not just SVG tiny, Opera 9 just basic. The Adobe plugin has another big problem: If it believes (using information from the browser or the operation system wrong) german notation for floats should be used: 0,1 instead of 0.1, this causes much more errors and the display probability is much lower and Adobe seems to have no interest to correct this known error.

Squiggle 1.7 has a specific problem with SVG tiny documents, they can only be viewed online, because with each document with a doctype Squiggle 1.7 tries to connect to www.w3.org, this is not the case for documents related to the full profile. If the connection is available, the tiny display probability is slightly better than for the adobe plugin, for the samples of the full profile it is clearly below. For documents containing errors the error messages of Squiggle 1.7 are pretty helpful, unfortunately in several cases the error messages are errors of the viewer, not of the document, therefore authors do not have to believe messages without further checks.

WebKit 528.16 is another first attempt concerning animation, here tested with Apples Safari 4. It is not really bad, but there is still a lot to do. Other variants like Google Chrome or Chromium seem to have to much fundamental problems to be usable at all.

From serveral other products it is already known, that microsoft has general problems to follow any standards. Unfortunatly this applies for the interpretation of SVG in the microsoft internet explorer (MSIE) as well - it intentionally ignores animations. Such products are not useful for users at all.

Mozilla Gecko 2.0 is a hopeful attempt for a good interpretation of SVG tiny - unfortunately the missing interpretation of animateColor prevents, that this viewer is really useful for the display of really existing SVG documents. Other bugs like the funny internal clipping problem, often visible if filters are used, prevent the usage for SVG full even more. An already partly implemented feature like interactivity was removed again in Version 9.0. It is added again in Version 57.0
Unfortunately most of these problems are still unsolved in Mozilla Gecko 8.0. In discussions with developers it turns out, that there is not much motivation to follow standards and to implement all features of SVG. Therefore the chance is low, that this viewer will ever have a reliable implementation. Beyond Mozilla Gecko 8.0 unfortunately the regressions are much bigger than the improvements. In Mozilla Gecko 60.0 the improvements are sligthly larger than the regressions again. There is almost stagnation in newer versions.

Conclusion

Available user agents for SVG animations have many errors in the display of animatable SVG. Currently (2018) it is impossible to realise SVG animation without knowing the abilities of the user agents, just relying on the specifications. Several of the inconsistencies in browser display are caused by ambiguities, gaps and errors in the SMIL recommendation and the SVG specification.
Best choice for authors is SVG tiny 1.1 and for users the latest version of Opera 10.x.

Some of the errors can be avoided by the author, using preliminary workarounds and if the author just uses a subset of SVG or SVG tiny.
Anyway with this small subset it is already possible to realise very useful projects, but detailed knowledge about user agent errors are necessary. The preliminary workarounds have to be replaced as soon as better user agents are accessible for everybody.

In 2005 we were just at the starting point with animatable SVG, but it can be clearly seen, that we could get with SVG tiny a fantastic and powerful tool to create sophisticated animations in the future with better user agents. It would be already very useful and nice to have an user agent with a display probability of more than 0.9 for SVG tiny 1.1. But this may require some work on error fixing in the specifications, too. Currently (2018) it looks like low motivation to implement this fantastic and powerful tool with good enough quality. The work on specifications currently has more the focus on creating more incompatibilities than on fixing remaining inconsistencies. Therefore authors cannot really expect reliable implementations for the next ten or even more years.