Inline SVG via URI
<p>I am trying to use data URI's for my SVG images, within css. The basic approach is to set the full data URI to <code>=</code> the value of the background property for the css class.</p>

<pre><code>.bg {
  background: url('data:image/svg+xml;utf8,&lt;svg ...&gt; ... &lt;/svg&gt;');
}
</code></pre>

<p>My question is: how can I break the data URI value into a separate file, and reference that file within my css class. Goal: separate all data URI's from base styles so that they do not make the css ridiculously long. </p>

<p>Have never used URI's to implement SVG's so am also open to <em>any</em> ideas anyone may have re: implementation of SVG's through URI. Thanks a bunch! :)</p>

<p>P.S. If there is a good way to automate this, I am using gulp and bootstrap sass for this project. </p>