title: Include inline svg through symbol or css?
body: <p>I am planning to use inline svg concept to create svg spritesheet for a project. </p>
  
  <p>There are actually many ways to create svg spritesheet. I preferred two methods (<em>because of performance</em>) to create spritesheet. they are as follows:</p>
  
  <ul>
  <li>Group all the svgs to single svg by wrapping each svg's content using <code>symbol</code> tag with unique ID, so that later we can refer this using <code>use</code> tag in HTML.</li>
  <li>Generate a css file having all the svgs referred through css <code>background-image</code> property. each svg will have a unique class name.</li>
  </ul>
  
  <p>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.</p>
  
  <p>PS: I can generate the svg sprite sheets using gulp task runner.</p>