SVG-спрайт онлайн: сборка иконок в один файл
Собирает несколько SVG-иконок в один спрайт из элементов symbol и выдаёт код для вставки на страницу. Сборка идёт в браузере, иконки не отправляются на сервер.
Перетащите SVG-иконки
До 50 иконок по 10 МБ — соберём их в один спрайт. Файлы не покидают ваш компьютер.
Возьмите иконку из каталога
Как пользоваться
Как собрать SVG-спрайт
- Соберите иконки: перетащите сразу несколько SVG, добавьте их кнопкой выбора файлов или вставьте код из буфера. Лимит — 50 иконок за одну сборку, до 10 МБ на файл.
- Проверьте идентификаторы: по ним иконки вызываются в коде, поэтому удобны короткие понятные имена — home, search, cart.
- Скачайте sprite.svg и скопируйте фрагмент кода для вставки.
Каждая иконка становится элементом <symbol> с собственным id и viewBox, поэтому размер потом задаётся в CSS, а не в файле.
Как вывести иконку на сайте
<svg class="icon" width="24" height="24" aria-hidden="true">
<use href="/sprite.svg#home"></use>
</svg>
Атрибут href в <use> понимают все современные браузеры, устаревший xlink:href нужен только очень старым версиям. Спрайт можно подключить внешним файлом — тогда браузер закэширует его один раз для всего сайта — или встроить прямо в HTML в начале <body>.
Иконки не уходят на сервер
SVG разбираются и склеиваются в спрайт внутри браузера, итоговый файл собирается на вашем устройстве. Для внутренних дизайн-систем и клиентских проектов это важно: исходники не оседают на чужих серверах и в логах.
Советы и частые ошибки
- Конфликт id. Если в иконках есть градиенты или маски с одинаковыми id, в спрайте они перепутаются — давайте им уникальные имена.
- Другой домен. Внешний спрайт должен лежать на том же домене, что и страница: ссылки
<use>на чужой домен браузеры не загружают. display: none. Скрывайте встроенный спрайт нулевыми размерами и абсолютным позиционированием — приdisplay: noneпропадают градиенты.- Лишний вес. Перед сборкой прогоните иконки через оптимизатор SVG, а цвета выровняйте перекраской SVG.
- Доступность. Декоративным иконкам ставьте
aria-hidden="true", смысловым — подпись через aria-label или<title>.
Для проектов, где иконки подключаются классами, есть альтернатива — иконочный шрифт. В спрайт для навигации обычно попадают иконки интерфейса, стрелки и значки почты и связи — их удобно подтянуть в генератор без скачивания, для этого есть блок «Возьмите иконку из каталога».
Частые вопросы
- Что такое SVG-спрайт?
- Это один SVG-файл, в котором каждая иконка хранится отдельным элементом symbol со своим id и viewBox. На странице иконка выводится ссылкой на этот id, а весь набор загружается одним запросом и кэшируется.
- Как вставить иконку из спрайта на страницу?
- Добавьте тег svg с элементом use, в атрибуте href которого указаны путь к спрайту и id иконки — например, /sprite.svg#home. Готовый фрагмент кода генератор показывает после сборки.
- Как задать цвет иконке из спрайта?
- Если внутри иконок стоит currentColor, цвет задаётся CSS-свойством color у тега svg или его родителя. Для второго цвета используйте CSS-переменные: они проникают внутрь use, в отличие от обычных селекторов.
- Почему иконки из спрайта не отображаются?
- Частые причины: спрайт лежит на другом домене и браузер блокирует ссылку, в href опечатка в id или встроенный спрайт скрыт через display: none, из-за чего пропадают градиенты и маски.
- Что лучше — SVG-спрайт или иконочный шрифт?
- Для новых проектов обычно спрайт: он поддерживает многоцветные иконки, точнее передаёт геометрию и удобнее для экранных читалок. Шрифт оправдан там, где иконки подключаются только CSS-классами.