User:MarkFinkle/ExtremeSVG

Purpose

Collect some SVG-heavy examples for use as performance testcases. I was looking for examples that either included large DOM structures or intensive animations. I was not looking for examples of features not supported by Firefox. My hope is that we can use these testcases to eek out some additional performance increases in Fx3.

I did some simple benchmarking with Safari when I could see a significant difference, but comparing against Safari isn't the end goal. Competing against Flash and Silverlight are more important to me.

Any benchmarking data was made on a MBP with 2GB of ram. Load times were made after refreshing several times to get as much into cache as possible. Animation speed was taking after allowing the page to "ramp up." SVG animations are not entirely SVG performance as JavaScript is used to animate the shapes.

Simple Benchmarked Testcases

• Street map of Baltimore, MD
  • Large DOM
  • Safari: ~15sec
  • Fx3: ~60sec [note: Fx3/linux failed to load the page]

• 3D SVG animated shapes
  • Animation
  • Safari: ~72 FPS, 90%-96% CPU [motion is very smooth and rendering is clean]
  • Fx3: ~20 FPS, 67%-72% CPU [motion somewhat smooth (small blip every so often) and rendering is not as clean (aliased cube edges)]

• SVG animated shapes
  • Animation
  • Safari and Fx3 render and animate about the same [Safari has text and image clipping bugs]
  • Flash version here is faster than both

More Testcases

• Kevin Lindsey has an SVG Life game sample. There is a simple SVG version, more intensive SVG version and a C# version (which is claimed to be much faster)
• MapView has several DOM heavy SVG mapping examples
• Sam Ruby has a SVG vs Canvas test. Safari is faster than Fx3 for SVG, but not for Canvas.
• SVG World Map loads slowly.
• Neat animated anonymous 'voting' simulator. Fx3 and Safari are close on the motion, Safari has bugs on background.