Генератор SVG-спрайтов
Загрузите несколько SVG-иконок и получите один объединённый спрайт <symbol>
с автоматически сгенерированными ID без коллизий.
Нажмите, чтобы выбрать файлы .svg, или перетащите их сюда
Выберите сразу несколько иконок. Остаётся на вашем устройстве, ничего не загружается на сервер.
Иконки
Как это работает
Каждый загруженный SVG парсится собственным DOM-парсером браузера, считывается его
viewBox (или width/height, если viewBox не задан), а его внутренняя разметка
оборачивается в элемент <symbol id="..." viewBox="...">. Все символы затем
объединяются в один скрытый <svg> — стандартный паттерн «SVG-спрайта»,
который используется, чтобы отдать много иконок одним запросом вместо множества отдельных
файлов изображений или встроенных копий. ID выводятся из имени каждого файла и автоматически
дедуплицируются, если два файла иначе дали бы коллизию.
Разбор и объединение происходят полностью в JavaScript этой страницы. Ничего из загруженного вами никуда не отправляется.
Частые вопросы
Как работает спрайт на основе symbol?
Каждая иконка становится <symbol id="..."> внутри одного скрытого <svg>, размещённого один раз где угодно в HTML вашей страницы. Затем любой элемент отображает эту иконку через <svg><use href="#id"></use></svg>, поэтому браузер скачивает и парсит графику один раз, сколько бы раз она ни использовалась.
Как генерируются ID иконок?
Из имени каждого файла: приводится к нижнему регистру, не буквенно-цифровые символы заменяются на дефисы, расширение отбрасывается. Если два файла дают одинаковый ID, добавляется числовой суффикс, чтобы каждый символ оставался адресуемым.
Загружаются ли мои иконки куда-нибудь?
Нет. Файлы читаются и объединяются полностью в вашем браузере с помощью File API. Ничего не загружается на сервер.