Analysis of the use of SVG as background-image

Recently, more and more articles appear in which authors recommend using SVG for backgroud-image. Indeed, the use of SVG brings great benefits. All read articles very casually mentioned the SVG rendering performance, that this is a more expensive operation, since the browser needs to re-draw the raster every time.

And then one day, when I opened one web application, I noticed that my browser was “devouring” memory madly - one tab was “eating” about 600 MiB. At MacBook, the retina was even worse. From this point on, the investigation began where the memory flows. Who cares, welcome under cat.

The first thing I noticed was the growth of memory when opening one popup, in which only 20 elements with icons were drawn. Having done profiling in chrome, I concluded that it's not about javaScript, not CSS, and not HTML.
')
However, I noticed that the less there are elements with icons, the less memory is consumed. Looking at where the icons come from, I saw that they were taken from a 2000px x 500px sprite. After replacing the SVG sprite with a PNG sprite of the same size, a miracle happened - the memory usage returned to a reasonable extent. After speculating, it is easy to come to the conclusion that for each small icon a large bitmap was drawn, on which the memory was spent.
The first thought that came to my mind was to abandon SVG. But you can't just replace it with png, since we care about users who have high-definition monitors.
After reading the SVG specification and a large number of different articles (links at the end of the article), I decided to try to set the SVG size not in px, but in em. In the end, as I expected, with relative units, the amount of memory consumed turned out to be approximately the same as if a png sprite was used.

Below is a table of memory consumption in chromium on my machine when rendering 16 icons:

SVG, dimensions are given in em	9 216k	demo
SVG, sizes are given in px	101 600k	demo
PNG, small canvas size	7 748k	demo
PNG, large canvas size	10 060k	demo

What conclusions can be made? There are two options. The first is to use two PNG sprites, in normal and retinovskom quality. If you are using SVG sprites, set the size in relative units, for example in em.
List of articles that I recommend to read on SVG:

coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg
habrahabr.ru/post/141654
www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers
www.w3.org/TR/SVG
smus.com/canvas-vs-svg-performance

UPD : And so, in the course of general research, it was found that this behavior is present in chromium-based browsers. In firefox, opera, ie browsers, a similar effect is not observed. The comments correctly indicate that the amount of memory depends on the size of the canvas, and not on units of measurement. But units of measure can affect the scalability of SVG, so choose units for your task. Thank you all for the comments and tests conducted in other browsers.
UPD : code.google.com/p/chromium/issues/detail?id=196524 added bug to bugtracker.
UPD : Bug closed, fixed in canary build.