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.
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):
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.
You can subscribe to our monthly newsletter here:
Сheck out latest blog posts:
Get started for free
Manage complex work, projects and products with Targetprocess
We’ve sent you a confirmation e-mail — please, go check it.
With our product specialist Ksenia