A comparative analysis of some browser performance measures in SVG.

The paper addresses several aspects of web browser performance in the context of SVG (Scalable Vector Graphics). Scalable Vector Graphics is a relatively new web and wireless standard from the World Wide Web Consortium (3WC) for conveying rich graphical information. Most web browsers and many mobile devices now use it, in some cases, instead of its much weaker cousin HTML.

This presentation will contrast objective measurements of the time to perform certain tasks in the Firefox, Opera and Internet Explorer, with implications for "best practices" in code development. The investigations will present a variety of results from a paper previously submitted to SVG Open 2006, comparing SMIL with JavaScript animation, as well as many new results.

While Firefox does not yet support SMIL, Opera and IE both appear to give precedence to SMIL animation over JavaScript animation in cases that documents contain both sorts of animation.

The comparisons of SMIL with JavaScript animation were done using an "animation chamber" in which differing amounts of each type of animation could be systematically added through the DOM to create complex documents. Because precise calibration of when an effect has finished rendering cannot be performed, the methodology used here involved "overloading the browser" by inserting numerous (sometimes thousands) of animations and in checking the performance as monitored through successful loops through a window.setTimeout as compared with real time measures. That is, the extent to which desired and actual performance differ gives an objective measure of the actual work performed, in a way that can be compared across browsers and across situations.

Additionally this paper compares the effect of document complexity on time efficiency in the context of pairwise relationships between the following sets of SVG features:

For this purpose an "SVG chamber" has been constructed in HTML allowing the flexible manipulation of SVG DOM through radio buttons and selects controlling the number and type of SVG objects, presence or absence of clip-paths, transparency, and SMIL, as well as the presence and type of filters being applied to those objects.