Enable embedded svg via character or css?

Question

I plan to use the built-in svg concept to create the svg spritesheet for the project.

There are actually many ways to create svg spritesheet. I chose two methods (due to performance) for creating sprites. they look like this:

• Group all svgs with a single svg, wrapping each svg content using a tag symbolwith a unique identifier, so that later we can refer to it using a tag usein HTML.
• Create a css file containing all svgs passed through the css property background-image. each svg will have a unique class name.

Now I have a dilemma about which method to use for sure. FYI, this is not an opinion-based question, because I am not looking for opinions, but given performance and an optimal solution.

PS: I can generate svg sprite pages using gulp tasks.

Answer 1

Pre-Info

Browser performance is something very difficult to test and calibrate, simply because of the number of variables that can cause changes, spikes or differences between browsers, hardware, or other things that can withstand performance.

The next test I conducted on a Dell laptop with the following hardware and browser

Intel Core i5-3320M CPU @2.60

8 DDR3 Ram ( ..)

Windows 8.1 Enterprise - 64Bit

Google Chrome v45.0.2454.101

3 , - , , , .

SVG

SVG, 5 , .

iconmonstr.com, SVG.

• CodePen

---

Inline - <use>

<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>

Hide result

• Codepen

1 - 221B

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

---

Inline - <svg>

, CodePen

• Codepen

1 - 221B

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

---

- <use>

<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>

Hide result

,

2 - 440B

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

---

, SVG , ; .

SVG, , , <use>, , .

, , , :

• SVG
• ( ..)

, .

, , .

!

Answer 2

SVG . svg minification concatenation , .

, .., SVG HTML:

<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>

, viewBox , , - .

viewBox . , SVG - . , :

config = {
    "arrow": {
        "viewBox" :"0 0 50 49.999360957030746",
    }
    ,
    "close": {
       "viewBox" :"0 100 50 49.999360957030746",
    }
...
}

, .

IE9 +, Chrome, Firefox . , SVG, . CSS, , - , IE9. .

, SVG, , .