WebKit seems to recreate/allocate new memory for every single element on a page that uses the same SVG background-image, which basically it impossible to use SVG as a resolution-independent image source for any meaningful number of graphics. Repro: 1. Load test case URL 2. Click "Add SVG" a few times 3. Notice memory usage increases substantially for each new element, even though they all share the same SVG source Test results: Safari 6 Mac: Bad Mobile Safari 6.1: Bad Chrome 26 Mac: Bad WebKit r141714 Mac: Bad Firefox 18 Mac: OK IE 9 Win: OK Opera 12.12 Mac: OK
Thank you for taking the time to file this. Part of the problem is that we are caching SVG images as bitmaps, and at their native resolution (which is particularly painful for your 1024*1024 SVG file). I'm addressing that long-standing problem in wkbug.com/106159 which will fix much of the memory consumption. That still doesn't address the per-use growth in memory though; we should only need one image here!
r142765 has landed so we no longer allocate huge bitmaps on a per-renderer basis. Your testcase now passes without using several Gigs of memory. You can test this yourself using Chrome Canary or the WebKit nightlies. Until this has landed in your favorite WebKit browser, a (partial) workaround is to limit the size of the SVG used for images. For example, you could use several smaller images instead of a large 1024*1024 image map. We were previously rendering the SVG into a bitmap and caching that--using a smaller image will make the memory use more reasonable.
Thanks so much Philip for the quick work so far. Looking forward to being able to recommend SVG background images in future. :)