Bug 108999 - SVG background-image memory usage is absurd
Summary: SVG background-image memory usage is absurd
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Philip Rogers
URL: http://jsfiddle.net/LybU7/3/show
Depends on: 106159
  Show dependency treegraph
Reported: 2013-02-05 18:41 PST by C Snover
Modified: 2013-02-18 18:02 PST (History)
5 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description C Snover 2013-02-05 18:41:20 PST
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.

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
Comment 1 Philip Rogers 2013-02-05 19:01:12 PST
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!
Comment 2 Philip Rogers 2013-02-18 17:16:01 PST
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.
Comment 3 C Snover 2013-02-18 18:02:38 PST
Thanks so much Philip for the quick work so far. Looking forward to being able to recommend SVG background images in future. :)