Why is the svg sprite painting not showing through background?

Question

css

Why is the svg sprite painting not showing through background ?
Sprite code

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-home" viewBox="0 0 32 32">
<title>home</title>
<path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</symbol>
<symbol id="icon-home2" viewBox="0 0 32 32">
<title>home2</title>
<path d="M16 1l-16 16 3 3 3-3v13h8v-6h4v6h8v-13l3 3 3-3-16-16zM16 14c-1.105 0-2-0.895-2-2s0.895-2 2-2c1.105 0 2 0.895 2 2s-0.895 2-2 2z"></path>
</symbol>
<symbol id="icon-home3" viewBox="0 0 32 32">
<title>home3</title>
<path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z"></path>
</symbol>
<symbol id="icon-office" viewBox="0 0 32 32">
<title>office</title>
<path d="M0 32h16v-32h-16v32zM10 4h4v4h-4v-4zM10 12h4v4h-4v-4zM10 20h4v4h-4v-4zM2 4h4v4h-4v-4zM2 12h4v4h-4v-4zM2 20h4v4h-4v-4zM18 10h14v2h-14zM18 32h4v-8h6v8h4v-18h-14z"></path>
</symbol>
</defs>
</svg>

I do so

background: red url(/images/icons/symbol-defs.svg#icon-office) no-repeat;

The picture does not load, I do it without a sprite, everything works.

Answer 1

you need to set svg width and height, and instead of symbol use banal g, for example. And defs is not needed, write directly in svg .. And add something like this to svg style:

svg>g {display:none}
:target {display: inline}

That's how it's supposed to work

Answer 2

https://stackoverflow.com/questions/28477256/setti...