Создание SVG-спрайта вручную

Если у вас небольшой проект, вы не используете (не умеете?) сборщики, то собрать SVG-спрайт можно вручную. Дело это несложное.

Сохраняем SVG-иконки. Для этого в Photoshop можно нажать «ctrl+shift+alt+w» или зайти в меню «Файл», затем выбрать «Экспортировать» и наконец «Экспортировать как…».

В правом верхнем углу открывшегося окна выбираем «SVG» и сохраняем.

Далее создаём файл спрайта, например, «sprite.svg». Открываем его и наши иконки в редакторе.

Удаляем всё лишнее. Информацию в xmlns, ширину, высоту (viewBox оставляем), id, взятый из названия слоя в Photoshop. Стили тоже можно удалить и прописать их в CSS-файле. Получается что-то типа этого:

В sprite.svg создаём тег SVG, дописываем ему display: none.

Внутрь тега SVG переносим код наших иконок.

Каждой иконке задаём id, а тег SVG самой иконки заменяем на тег «symbol».

Всё! Вставляете на страницу SVG удобным для вас способом (из-за display: none отображаться он не будет), в нужном месте, для того чтобы использовать иконку, пишете следующий код:

<svg>
	<use xlink:href='#ID' />
</svg>
Sergey Guk:
как это можно использовать для CSS в background: url()??
Бобр Добр:
Sergey Guk, вот хороший пример. http://codepen.io/chriscoyier/pen/GndhE и, собственно, сама статья с разбором примеров https://css-tricks.com/svg-fragment-identifiers-work/
Сергей:
<svg> <use xlink:href='#ID' /> </svg> А где укзыватся путь к самому файлу sprite.svg в этой конструкции ?
Бобр Добр:
Сергей, если спрайт внешний, то у тебя получится что-то типа <use xlink:href="img/sprite.svg#ID" />.