SVG-спрайтшит
Создайте спрайт-лист SVG с картой JSON.
Расположите значки SVG в пользовательской сетке и экспортируйте один спрайт-лист PNG, WebP или SVG с картой фреймов JSON. Управляйте столбцами, размером ячеек, заполнением, интервалами, выравниванием, масштабом и порядком сортировки.
Предпросмотр
Нет предпросмотра. Добавьте и выберите файлы, чтобы увидеть результат.
Файлов пока нет. Перетащите файлы выше или нажмите ВЫБРАТЬ ФАЙЛЫ.
Что такое SVG-спрайтшит?
Спрайтшит представляет собой одно изображение, в котором по сетке разложено множество изображений поменьше, плюс карту, где сказано, кто из них где находится. Здесь исходниками служат файлы SVG: каждый отрисовывается в своей ячейке, а готовый лист выгружается в PNG, WebP или в один холст SVG.
Это не то же самое, что спрайт символа SVG. Спрайт символа - это один файл SVG с <symbol> для каждого значка, на который страницы ссылаются по идентификатору с помощью <use>, поэтому каждый значок остается векторной разметкой, и CSS все еще может его раскрасить. Спрайт-таблица - это визуальный холст: все, что он потребляет, разрезает кадры по координатам. Выберите спрайт символа для значков HTML, таблицу спрайтов для холста, фоновые спрайты WebGL или CSS.
Когда нужен спрайтшит
Спрайтшит сводит множество мелких изображений в один файл, поэтому игра или приложение делает один запрос и держит все кадры в одной текстуре. Отрисовка на canvas и в WebGL берёт из него прямоугольниками, CSS позиционирует его через background-position, а карта в JSON выдаёт координаты, так что ничего не приходится вымерять вручную. Берите спрайтшит всякий раз, когда потребитель работает в пикселях; а если нужны иконки, которые масштабируются и наследуют цвет внутри HTML, соберите вместо него символьный спрайт SVG.
Как собрать спрайтшит из файлов SVG
- 1
Перетащите свои файлы SVG или нажмите ВЫБРАТЬ ФАЙЛЫ, чтобы добавить их в очередь. До 40 за раз.
- 2
Задайте сетку (столбцы, строки, размер ячейки, внутренний отступ, промежуток), затем выравнивание, масштаб, сортировку и формат вывода. Лист перерисовывается по ходу изменений.
- 3
Нажмите СОХРАНИТЬ ВСЁ, чтобы скачать один ZIP-архив с листом и его картой кадров в JSON.
Приватность: ваши файлы не покидают браузер
Преобразование выполняется локально в вашем браузере с использованием JavaScript и WebAssembly. Загрузка файлов или преобразование на стороне сервера не выполняются, поэтому добавляемые вами файлы остаются на вашем устройстве.
Локальная обработка помогает защитить конфиденциальные логотипы, внутренние документы и неопубликованные изображения клиентов. Страницы и код преобразования кэшируются по мере их использования, поэтому уже открытые вами инструменты могут продолжать работать без подключения к сети.
Часто задаваемые вопросы
Что выбрать: спрайтшит или символьный спрайт SVG?
Берите символьный спрайт, когда иконки идут в HTML: он остаётся вектором, наследует свойство color из CSS, а на каждую иконку вы ссылаетесь по id через <use>. Берите спрайтшит, когда что-то рисует пиксели по координатам: игра на canvas или WebGL, фоновый спрайт CSS. Карта спрайтшита в JSON выдаёт x, y, width и height каждого кадра.
Что содержит карта в JSON?
По одной записи на иконку, ключ берётся из имени файла без расширения, например {"home":{"x":0,"y":0,"width":64,"height":64}}. Прямоугольник покрывает всю ячейку вместе с внутренним отступом, поэтому отрисовка этого прямоугольника воспроизводит иконку ровно там, где она была размещена. Повторяющиеся имена получают суффиксы -2 и -3, так что каждый ключ остаётся уникальным.
Насколько большим может быть лист?
Холст ограничен 16 384 px по каждой стороне и 64 мегапикселями в сумме, поэтому 40 иконок в ячейках по 256 px укладываются в лимит с запасом. За его пределами инструмент сообщает размер, а не записывает пустое изображение. WebP к тому же зависит от браузера: там, где закодировать WebP не выходит, вы получите ошибку, а не PNG с чужим расширением.