SVG-спрайт
Объединение иконок SVG в один символьный спрайт
Объедините папку значков SVG в один спрайт многократного использования. Каждый файл становится <symbol> с готовым фрагментом <use>, а внутренние идентификаторы с префиксом предотвращают столкновение градиентов, масок и контуров клипов.
Эти параметры применяются ко всему спрайту.
Предпросмотр спрайта
Добавьте SVG-файлы, чтобы собрать спрайт.
Файлов пока нет. Перетащите файлы выше или нажмите ВЫБРАТЬ ФАЙЛЫ.
Символьный спрайт или спрайтшит?
Символьный спрайт представляет собой один файл SVG, в котором на каждую иконку приходится свой <symbol>. Пока вы не сошлётесь на символ через <use>, не рисуется ничего, поэтому иконки остаются векторами, остаются доступными для стилей CSS и остаются чёткими в любом размере. Именно это нужно для набора иконок интерфейса.
Спрайтшит представляет собой одно изображение, где все иконки разложены по сетке и рисуются через background-position или по карте кадров в JSON. Иконки здесь становятся пикселями с фиксированными координатами, чего и ждут игровые движки и отрисовка на canvas, и что нужно, когда цель вообще не умеет работать с <use>.
Открыть генератор спрайтшитов SVGКогда нужен символьный спрайт
Спрайт символа хранит набор значков в одном повторно используемом файле SVG, и каждый экземпляр значка становится коротким элементом <use> вместо повторяющегося блока путей. Это полезно для навигации, кнопок, таблиц и других интерфейсов, в которых повторно используются одни и те же значки. Символы сохраняют векторную разметку, поэтому они остаются четкими и могут наследовать цвет и размер от CSS.
Как собрать символьный SVG-спрайт онлайн
- 1
Перетащите иконки SVG или нажмите ВЫБРАТЬ ФАЙЛЫ, чтобы добавить их в очередь. До 40 за раз, и порядок списка задаёт порядок символов.
- 2
Выберите внешний или встроенный спрайт, решите, оптимизировать ли иконки и нормализовать ли их viewBox, и смотрите, как сетка иконок перестраивается из самого спрайта.
- 3
Нажмите СОХРАНИТЬ ВСЁ, чтобы скачать sprite.svg, либо ZIP-архив с sprite.svg и usage.html, когда включены примеры использования.
Приватность: ваши файлы не покидают браузер
Преобразование выполняется локально в вашем браузере с использованием JavaScript и WebAssembly. Загрузка файлов или преобразование на стороне сервера не выполняются, поэтому добавляемые вами файлы остаются на вашем устройстве.
Локальная обработка помогает защитить конфиденциальные логотипы, внутренние документы и неопубликованные изображения клиентов. Страницы и код преобразования кэшируются по мере их использования, поэтому уже открытые вами инструменты могут продолжать работать без подключения к сети.
Часто задаваемые вопросы
Что будет, если два файла дадут одинаковый ID?
ID берётся из имени файла без расширения, приведённого к нижнему регистру и к виду слага, поэтому «Arrow Left.svg» становится arrow-left. Когда два файла дают одинаковый ID, первый его сохраняет, а следующие получают -2, -3 и так далее. Переименование файла в списке сразу меняет его ID, и то же самое делают сортировка и перетаскивание списка, потому что простой ID остаётся у того файла, который идёт в списке первым.
Что выбрать: внешний или встроенный спрайт?
Внешний спрайт представляет собой файл sprite.svg, на который вы ссылаетесь через <use href="sprite.svg#icon-id">. Он кэшируется как любой другой ресурс и не раздувает ваш HTML ценой одного дополнительного запроса, и приходить он должен с того же источника, если CORS не разрешает иное. Встроенный спрайт представляет собой ту же разметку, вставленную в страницу внутри скрытого <svg>, и ссылка на него выглядит как <use href="#icon-id">. Запрос ему не нужен, и ссылка разрешается всегда, но эти байты повторяются в каждом документе HTML, который его использует.
Изменит ли сборка спрайта то, как выглядят мои иконки?
Нет. Корневой <svg> каждого файла становится элементом <symbol> с тем же viewBox, а его содержимое переносится без изменений, если не считать префиксов у ID. «Оптимизировать SVG» запускает тот же набор безопасных проходов, что и оптимизатор SVG, поэтому комментарии, метаданные редактора и лишние атрибуты уходят, а геометрия остаётся. «Нормализовать viewBox» заново центрирует каждую иконку в квадратной системе координат, что меняет рамку, а не сам рисунок. Элементы <script> и атрибуты on* удаляются всегда, потому что спрайт в итоге оказывается встроенным в вашу страницу.