David Baron's Weblog

Faster repainting in SVG foreignObject

Wednesday, 2010-01-31, 10:45 -0800

In the past week, I landed a few performance improvements to code for SVG's foreignObject element. (To be exact, I fixed bug 403443, bug 418063, and bug 541188.) This was a small side project that resulted from trying to use foreignObject for my inverted tinderbox display and realizing that foreignObject (which was what I initially tried) was significantly slower than using SVG filters in HTML (which also turned out to be simpler). These improvements are all available in today's nightly builds.

In particular, when we need to repaint a small part of the contents of a foreignObject (for example, due to typing in a text field or hovering over a link), we now repaint only the part that we need to (just like we do when not inside a foreignObject), rather than repainting the whole foreignObject.

This is quite noticeable when interacting with pages, for example when moving the mouse over links or when selecting text in Mark Finkle's example (from his blog) or in Paul Rouget's demo (especially if you load http://www.mozilla.com/ and then hover over the menus at the top of the page).