Search code examples
htmlcsssvgsprite-sheetinline-svg

Include inline svg through symbol or css?

I am planning to use inline svg concept to create svg spritesheet for a project.

There are actually many ways to create svg spritesheet. I preferred two methods (because of performance) to create spritesheet. they are as follows:

  • Group all the svgs to single svg by wrapping each svg's content using symbol tag with unique ID, so that later we can refer this using use tag in HTML.
  • Generate a css file having all the svgs referred through css background-image property. each svg will have a unique class name.

Now, I am in dilemma of which method to use exactly. FYI, this is not opinion-based question because I am not looking for opinions but considering performance and optimal solution.

PS: I can generate the svg sprite sheets using gulp task runner.

Solution

  • Pre-Information

    Performance within a browser is something very difficult to test for and gauge, simply because of the amount of variables which can cause changes, spikes or differences between browsers, hardware or other things which could be bottle-necking the performance.

    The below test's I have run on a Dell laptop with the following hardware and browser

    Intel Core i5-3320M CPU @ 2.60GHz

    8GB DDR3 Ram (unsure of timing's etc)

    Windows 8.1 Enterprise - 64Bit

    Google Chrome v45.0.2454.101 m

    I've only ran 3 of the test's I would have liked to due to time constraints but may come back to continue with the tests and also rerun them on different browsers and machines.

    The SVG I Used

    I created an SVG element which uses 5 icons layered on top of each other.

    All of these icons are from iconmonstr.com which provides free to use SVG icons.

    The Tests

    Inline - <use>

    The Code

    <svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#menu-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#user-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#home-4-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#phone-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#globe-4-icon"></use>
</svg>

    The Results

    1 Request - 221B Transfer

    Average

    Finish: 10.3ms - DOMContentLoaded: 22.8ms - Load: 22.3ms

    Inline - Individual <svg>'s

    The Test

    This file is too large so only giving CodePen Example

    The Results

    1 Request - 221B Transfer

    Average

    Finish: 9.7ms - DOMContentLoaded: 20.6ms - Load: 19.9ms

    External File - <use>

    The Test

    <svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#menu-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#user-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#home-4-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#phone-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#globe-4-icon"></use>
</svg>

    Use this with the base file given at the top of the page

    The Result

    2 Requests - 440B Transfer

    Average

    Finish: 57.5ms - DOMContentLoaded: 41.3ms - Load: 58.4ms

    Conclusion

    As we can see from the above tests and results, using an inline SVG and referencing it is much quicker than using an external file; cached or not.

    Neither of the two inline SVG methods seem to have that many speed differences, but I would personally go for the <use> method, simply because it is easier to use in the long run and helps keep your body code clean.

    Now, as I have stated, these results are entirely dependant on an infinite amount of variables, to name a few:

    • Browser
    • Hardware
    • Internet Connection
    • SVG File Size
    • Bottle-neck Software (Anti-virus etc)

    I would personally use whatever you feel most comfortable with.

    I hope these results are somewhat useful or satisfactory and help you with what you require.

    View all the tests and results here!