Создание SVG-спрайта

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

Как создать SVG-спрайт вручную, без сборщиков, онлайн-сервисов и геморроя. Ах, да! Без регистрации и СМС.

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

  1. Сохраняем SVG-иконки. Для этого в Photoshop можно нажать «ctrl+shift+alt+w» или зайти в меню «Файл», затем выбрать «Экспортировать» и наконец «Экспортировать как…».
    Сохраняем SVG-иконки.
  2. В правом верхнем углу открывшегося окна выбираем «SVG» и сохраняем.
    В правом верхнем углу открывшегося окна выбираем «SVG» и сохраняем.
  3. Далее создаём файл спрайта, например, «sprite.svg». Открываем его и наши иконки в редакторе.
  4. Удаляем всё лишнее. Информацию в xmlns, ширину, высоту (viewBox оставляем), id, взятый из названия слоя в Photoshop. Стили тоже можно удалить и прописать их в CSS-файле. Получается что-то типа этого:
    Создание SVG-спрайта вручную
  5. В sprite.svg создаём тег SVG, дописываем ему display: none.
    В sprite.svg создаём тег SVG, дописываем ему display: none.
  6. Внутрь тега SVG переносим код наших иконок.
  7. Каждой иконке задаём id, а тег SVG самой иконки заменяем на тег «symbol».
    Переносим код наших иконок. Тег «SVG» самих иконок заменяем на тег «Symbol»
  8. Всё! Вставляете на страницу SVG удобным для вас способом (из-за display: none отображаться он не будет), в нужном месте, для того чтобы использовать иконку, пишете следующий код:

comments powered by HyperComments

Автор

webbeaver

webbeaver

Верстаю, читаю, учусь