Include inline svg through symbol or css? - html

Question

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.

Answer 1

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.
CodePen
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>
Full Codepen Example
The Results
1 Request - 221B Transfer
Results
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
Full Codepen Example
The Results
1 Request - 221B Transfer
Results
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
Results
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!

Answer 2

I've had the most success with SVGs in a single sprite file with unique ids. Most of the svg minification and concatenation scripts will simply name each Id after the individual file name, which is easy enough.
Then, for the best chance of proper scaling and such, I included the SVGs via the HTML tag:
<svg viewBox="0 0 50 50"
class="svgIcon" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#myIconIdHere"></use>
</svg>
If you're lucky, the viewBox value will be the same, if not, you may need to provide that with a view helper of some sort.
In my past works, I've stored the individual viewBox values in a config for later dynamic generation. Of course you could also just generate each SVG tag in a file somewhere as a string. Here is a sample config we used on one project:
config = {
"arrow": {
"viewBox" :"0 0 50 49.999360957030746",
}
,
"close": {
"viewBox" :"0 100 50 49.999360957030746",
}
...
}
Performance-wise, I can only speak a small amount.
This solution worked in IE9+, Chrome, Firefox, and mobile devices. We have animations across the board that involve these SVGs, and scale them for each breakpoint. The CSS animations applied to elements didn't have any major lagging issues except for IE9. I did look over this analysis for more help.
I'd be happy to show you the high traffic page using these SVGs, but would prefer if you private messaged me.