Analysis of the use of SVG as a background-image


    Recently, articles are increasingly appearing in which authors recommend using SVG for backgroud-image. Indeed, the use of SVG is of great benefit. All read articles very casually mentioned the performance of SVG rendering, which is a more expensive operation, since the browser needs to redraw the raster each time.

    And then one fine day, having opened one web application, I noticed that my browser is madly “eating up” memory - one tab “ate” about 600 MiB. On the MacBook, retina was even worse. From this moment, an investigation began where memory flows. Who cares, welcome to cat.

    The first thing I noticed was the memory growth when opening one popup, in which only 20 elements with icons were drawn. Having profiled in chrome, I concluded that it was not in javaScript, not in CSS, and not in HTML.

    However, I noticed that the less elements with icons are present, the less memory is consumed. After seeing 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 with the same size, a miracle happened - the memory usage returned to reasonable limits. Having reasoned, it is easy to come to the conclusion that for each small icon a large bitmap was drawn, which was spent on memory.
    The first thought that came to my mind was to abandon SVG. But you cannot take it and 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 setting the SVG size not in px, but in em. As a result, 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 the table of memory consumption in chromium on my machine when rendering 16 icons:
    SVG, dimensions are given in em9 216kdemo
    SVG, dimensions are given in px101 600kdemo
    PNG, small canvas size7 748kdemo
    PNG, large canvas size10 060kdemo
    What conclusions can be drawn? Two options are possible. The first is to use two PNG sprites, in regular and retin quality. If you use SVG sprites, specify the size in relative units, for example, in em.
    List of articles that I recommend reading on the SVG topic:

    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 out that such behavior is present in chromium-based browsers. In browsers firefox, opera, ie 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 the unit for your task. Thank you all for the comments and tests in other browsers.
    UPD : code.google.com/p/chromium/issues/detail?id=196524 added a bug to the bugtracker.
    UPD : The bug is closed, fixed in canary build.

    Also popular now: