Сборка SVG-спрайта

Соберите иконки в один SVG-файл и подключайте каждую через use. Инструмент создаёт symbol с собственным viewBox, назначает ID из имён файлов и обновляет ссылки на градиенты, маски и другие определения, чтобы иконки не мешали друг другу.

Как пользоваться

Добавьте несколько SVG-файлов или откройте пример. Можно добавлять файлы порциями, менять порядок и удалять отдельные иконки. Спрайт и код подключения пересчитываются автоматически. Под каждым рисунком показан его ID. Совпадающие имена получают суффикс: icon-check, icon-check-2. После изменения списка используйте актуальные ID из результата.

Скачайте sprite.svg. Для отдельного файла используйте <use href="sprite.svg#icon-check"/> и разместите спрайт на том же сайте. Проверяйте подключение через HTTP-сервер, а не открытием HTML как локального файла. Либо вставьте код спрайта в HTML один раз, задайте его внешнему svg нулевые размеры и aria-hidden="true", а иконки подключайте через href="#icon-check". Не задавайте спрайту display: none.

Примеры подключения содержат размеры 24 × 24 и доступное название из имени файла. Замените название на смысл иконки; для декоративного рисунка используйте aria-hidden="true" вместо role и aria-label. Цвет currentColor берётся из цвета текста страницы; заданные в исходнике цвета сохраняются.

Какие SVG можно объединить

Подходят статические векторные иконки с фигурами, текстом, градиентами, масками, обрезкой и внутренними ссылками. Нужен viewBox или положительные width и height в пикселях. Числа координат не округляются. Статические CSS-правила переносятся в элементы; классы и метаданные редакторов удаляются.

Не поддерживаются скрипты, обработчики событий, анимация, растровые изображения, foreignObject, внешние ссылки, DOCTYPE, CSS с @-правилами или псевдоклассами. Неоднозначные ID и отсутствующие цели ссылок вызывают ошибку с именем файла. Удалите проблемный файл из списка или исправьте его и добавьте заново; неполный спрайт не выдаётся.

До 40 файлов и 2 МБ суммарно, до 20 000 узлов и 100 уровней вложенности. Файлы читаются как UTF-8 и не отправляются на сервер. Предпросмотр использует SVG как изображение: код иконки не вставляется в страницу сайта.

Для вашего удобства рекомендую использовать полноэкранный режим.

Файлы не выбраны
До 40 файлов, суммарно до 2 МБ, UTF-8. Можно добавить ещё файлы или перетащить их сюда. Обработка локальная.

Добавьте иконки или откройте пример.

Иконки пока не добавлены

Выберите несколько SVG. Имена файлов станут ID символов; совпадения получат числовой суффикс.

    SVG-спрайт

    Как подключить иконки
    Для сборки включите JavaScript. Спрайт хранит иконки в элементах symbol. На странице каждую иконку выводит svg с вложенным use и ссылкой на ID символа.
    

    Пример подключения
    

    HTML
    <svg width="24" height="24" role="img" aria-label="Готово">
  <use href="sprite.svg#icon-check"/>
</svg>
    

    Для уменьшения отдельного файла используйте оптимизацию SVG, для фонового изображения — SVG в CSS, для компонента — SVG в JSX и Vue.
    


    Спецификация SVG: symbol и use.