Как работать с svg спрайтами?

Question

[iBird Rose]

В общем собрал я в gulp svg спрайт через symbol. он имеет вид:

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="gamecontroller" viewBox="0 0 64 64"> ...     </symbol>
    <symbol id="icons-11" viewBox="0 0 65 65"> ...    </symbol>
</svg>

пытаюсь его вставить через background так:

.my-icon {
	display: inline-block;
	vertical-align: middle;
	width: 100px;
	height: 100px;
	background: url('svg-symbols.svg#gamecontroller') no-repeat;
	background-size: contain;
}

но ничего не выходит. что я делаю не так?

Answer 1

[Петр]

1. symbol это описательный элемент, он не отображается, но его можно использовать в элементе use

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="gamecontroller" viewBox="0 0 64 64"> ...     </symbol>
    <symbol id="icons-11" viewBox="0 0 65 65"> ...    </symbol>
    <use xlink:href='#gamecontroller' />
  </svg>

2. Как реализовать тот подход, что вы желаете (SVG fragment) написано тут
3. При таком подходе CSS стили к элементам SVG не применимы.

Comments

[iBird Rose]

окей. а как нужно генерировать svg спрайт, чтобы можно было заюзать в css через bg?

[Екатерина]

iBird Rose: хороший вопрос. Думаю, что никак. Если только дизайнера попросить.

[alvvi]

#некропостинг, если применять как background image, то css стили к ним тоже будет затруднительно применять

[Петр]

Илья Ростопка: Я никогда не советовал применять как background image

[alvvi]

Петр: согласен, упомянл чисто потому что автор спрашивал про этот способ, но вы не правы насчет 3 пункта, CSS стили можно применять, если писать тэг use в отдельном тэге svg и применять стили к нему. Можно даже получить доступ к внутренним классам и анимировать части svg при желании.

[Петр]

Илья Ростопка: Если у вас не встроенный svg, то к внутренним классам, что закрыты за use вы не доберетесь.

[alvvi]

Петр: ладно, тут ваша взяла, до внутренних классов не добраться, но обертку стилизовать можно, в несложных случаях вполне себе вариант.