Case Study: Tricky SVG Background Images | Targetprocess - Enterprise Agility Solution
Targetprocess Image

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, em 9216 k demo
SVG, px 101600 k demo
PNG, small canvas 7748 k demo
PNG, large canvas 10060 k demo

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.

Capterra Top 20
Capterra Top 20
Project Portfolio Management
May-20
GetApp Category Leaders
GetApp Category Leaders
Project Portfolio Management
Jul-20
GetApp Category Leaders
GetApp Category Leaders
Roadmaps
Jul-20
Software Advice FrontRunners
Software Advice FrontRunners
Product Management
May-20
Software Advice Recommended
Software Advice Recommended
Product Roadmap
Mar-20
Software Advice Customer Support
Software Advice Customer Support
Project Portfolio Management Software
Jun-20

Subscribe to the latest updates

Thank you!

Сheck out latest blog posts: Show all

Or contact
a sales representative

Get a live
product demo

Let one of our product specialists create your account
and shape Targetprocess for your company needs.