Какие есть способы подключения svg спрайта в background?

Question

[Andrei Popov]

Для подключения в использовал такой способ

<svg class="icon icon-figure">
	<use xlink:href="img/sprite.svg#icon-figure"></use>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	
		<symbol id="icon-down" viewBox="0 0 12 6">
			<path d="M6 4l4.8-4L12 1 6 6 0 1l1.2-1L6 4z"/>
		</symbol>
	
		<symbol id="icon-figure" viewBox="0 0 100 100" preserveAspectRatio='none'>
			<path d="M0 100L100 0v100z"/>
		</symbol>
	
		<symbol id="icon-search" viewBox="0 0 17 17">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M10.335 11.749a6.5 6.5 0 1 1 1.414-1.414l4.615 4.615-1.414 1.414-4.615-4.615zM11 6.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0z"/>
		</symbol>
	
</svg>

Но сделать таким же образом в css, не получается

background: url('../img/sprite.svg#icon-figure') center

пробовал найти способы, но все они больше похожи на костыли и при этом не дают возможности задавать цвет svg.
Существуют ли нормальные способы чтобы подключать svg спрайтом и в img и в background, при этом имея возможность его стилизовать?
Или может лучше стоить использовать svg отдельными файлами а не спрайтом?

Answer 1

[Nevea]

в svg файле должен быть указан
<view id="icon-figure" viewBox="0 0 30 30" />
вот пример вставок
https://dbushell.com/demos/svg/2015-01-29/svg-spri...
Обратите внимание на сам внешний файл sprite.svg