Case Study: Tricky SVG Background Images | Targetprocess - Visual management software

Case Study: Tricky SVG Background Images

SVG background images have been  praised in many-many articles I've come across. Chiseled SVG backgrounds seem to be an unbeatable option indeed, from several standpoints.  But all the articles that I've read, they only briefly touched upon the performance issues of SVG rendering  i.e. it's a more memory-consuming operation since  browser has to rasterize images anew every time.

So, one day I opened the web app I'm working on, and discovered that my browser is eating memory like crazy: it was about 600 MB (!) for just one tab, and even higher for a Retina screen. I went straight to investigate where this memory is leaking.

First off, I noted  a higher memory usage by a pop-up which rendered only as few as 20 icons.  Then I ran the profiler in Chrome, and found out that neither javaScript, nor CSS, nor HTML is to blame. I also noted that fewer icons take less memory. Plus, the icons are retrieved from a 2000 px X 500 px sprite image.  As I replaced the SVG sprite with a PNG sprite of the same size, a miracle has happened: the memory returned to reasonable limits. Obviously,  for each small icon a large  .bmp image was rendered, and it's these .bmp images that eat the memory.

My first thought was — why don't we give up on SVG? But it's not that simple, you can't just get rid of SVG and replace it with a .png, since we care about users with high-resolution screens.

I studied some articles and the specs on SVG, and decided to try em instead of px.  As I expected,  with relative font sizes, the memory ran as low as it would have been for a .png image.

Here's the SVG vs PNG memory comparison (for 16 icons):

SVG, em9216 kdemo
SVG, px101600 kdemo
PNG, small canvas7748 kdemo
PNG, large canvas10060 kdemo

So, what can we do about it? The first option is to use two PNG sprites, one in normal resolution, and the other in Retina resolution. For SVG sprites,  relative font sizes, e.g. em, would be a better option.

After some more research, looks like this behavior is only observed in chromium-based browsers. Firefox, Opera and IE don't have this problem. Of course, memory usage depends on the size of the canvas, and not on the font sizes being in px or em. But the sizes influence SVG scalability, so keep that in mind when choosing px or em for your particular case. If you care to take a look, we reported this issue to chromium, and it's fixed now.

Further Reading:

www.webdesignerdepot.com/2012/12/stop-chasing-screen-resolutions/
coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/
www.w3.org/TR/SVG/
smus.com/canvas-vs-svg-performance/

*rendered into English and posted by Olga Kouzina. The original article is in Russian.

You can subscribe to our monthly newsletter here:

Thank you!

Сheck out latest blog posts: