How to use SVG sprite to connect images through background?

Question

css

I would like the easiest way. Just throw these shapes in SVG into a separate file like this:

<svg display="none" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <symbol xmlns="http://www.w3.org/2000/svg" id="x1" viewbox="0 0 16 16">
      <circle fill="none" stroke="#b4b4b4" stroke-miterlimit="10" cx="8" cy="8" r="3.5"/>
    </symbol>

    <symbol xmlns="http://www.w3.org/2000/svg" id="x2" viewbox="0 0 16 16">
      <circle cx="8" cy="8" r="3.5"/>
    </symbol>

  </defs>
  
</svg>

Then insert them into the background images of the blocks.
In HTML I write: And in CSS to set rules: It is necessary that you can change their sizes in styles. On the network, who writes what, one - one thing, the other - another, the third - the third ... please give links to proven examples or describe your / correct approach. I want maximum convenience without unnecessary fuss, connecting several files for each SVG, without placing them on the canvas...
<div class="icon-1"></div>
background: url(sprite.svg#x2)

Answer 1

Sprites are implemented like this . Plus minus, you can not use symbols, or even defs, but simply call by id.
It is possible, but I do not recommend for the sake of cross-browser compatibility, to call from an external file, it is worth embedding this goodness in the document for manageability.
More structured information can be found here .

Answer 2

In order to be able to control SVG from styles, you need to register it either inline - throw the code of the svg file into HTML or connect the SVG file to HTML through object.
Otherwise, they cannot be controlled through css.
And you can insert SVG into SVG.