# Генератор SVG-спрайтов Загрузите до 30 SVG-иконок и объедините их в один спрайт: режим для встроенного , режим для фрагментов внешнего файла. Восстанавливает viewBox из width/height, убирает дубликаты, опционально срезает fill/stroke под currentColor, всегда чистит и атрибуты on\*, и генерирует сниппеты для HTML / React / Vue / CSS с живым предпросмотром каждой иконки. > Каноническая страница: https://elysiatools.com/ru/tools/svg-sprite-generator - **Категория:** Media - **Ключевые слова:** svg спрайт, спрайт-лист, svg symbol, набор иконок, элемент use ## Обзор Правила слияния: каждый \`\` получает внутреннее содержимое исходного \`\` (без корневого элемента); при отсутствии viewBox он выводится из width/height как 0 0 W H; режим \`\` дополнительно выводит \`\` для внешних ссылок (\`\`). ID очищаются из имени файла (символы вне \[A-Za-z0-9\_-\] → «-», префикс i- при начале с цифры, плюс пользовательский префикс), при коллизии суффикс -2. Дедупликация — хэш viewBox + содержимого со сжатыми пробелами. Безопасность: всегда удаляются \`\` и атрибуты on\*. ## Входные данные - **SVG-файлы (до 30)** (file): Select up to 30 .svg icon files - **Тип спрайта** (select) - **Префикс ID** (text): e.g. icon- - **Убрать fill/stroke (для currentColor)** (checkbox) - **Дедупликация одинаковых значков** (checkbox) ## Когда использовать - Когда нужно собрать набор SVG-иконок в один спрайт для встроенного . - Когда иконки будут подключаться из внешнего файла через в режиме view. - Когда требуется нормализовать viewBox, очистить ID из имён файлов и получить готовые сниппеты с предпросмотром. ## Как это работает - Загрузите до 30 файлов .svg. Содержимое каждого корневого svg попадает внутрь symbol или view, viewBox при отсутствии берётся из width/height как 0 0 W H. - Выберите тип спрайта: symbol для встроенного use или view с дополнительными g-группами для внешних ссылок. Задайте префикс ID и при необходимости включите срез fill/stroke. - ID формируются из имени файла: недопустимые символы заменяются на дефис, цифра в начале даёт префикс i-, плюс ваш префикс; при коллизии добавляется суффикс -2. Дедупликация сравнивает хэш viewBox и сжатого содержимого. - Всегда удаляются script и атрибуты on*. Результат — исходный спрайт и сниппеты HTML / React / Vue / CSS с живым предпросмотром каждой иконки. ## Сценарии использования - Собрать UI-иконки в один встроенный symbol-спрайт со сниппетами для React или Vue. - Подготовить внешний sprite.svg в режиме view с префиксом ID для ссылок из CSS и HTML. - Очистить и дедуплицировать набор иконок, восстановить viewBox и получить предпросмотр каждой. ## Частые вопросы ### Сколько SVG-файлов можно загрузить? До 30 файлов формата image/svg+xml, каждый не больше лимита загрузки. ### Чем отличаются режимы symbol и view? Symbol даёт элементы symbol id viewBox для встроенного use. View дополнительно выводит view и g с тем же id для ссылок вида sprite.svg#id. ### Как получаются идентификаторы иконок? Из имени файла: символы вне [A-Za-z0-9_-] становятся дефисом, цифра в начале добавляет i-, затем ваш префикс. При совпадении ID добавляется суффикс -2. ### Что делает опция «Убрать fill/stroke»? Срезает атрибуты fill и stroke, чтобы иконка наследовала currentColor. ### Удаляются ли скрипты из SVG? Да. Элементы script и все атрибуты on* удаляются всегда, независимо от настроек. ## Связанные инструменты - [Генератор Data URI](https://elysiatools.com/ru/tools/data-uri-generator): Преобразует файлы в Data URI (Base64 или процентное кодирование) для встраивания изображений, шрифтов и ресурсов прямо в HTML, CSS или Markdown - [Шаблоны Колонтитулов PDF](https://elysiatools.com/ru/tools/pdf-header-footer-snippets): Преобразует HTML в PDF и добавляет логотип, заголовок и дату - [Генератор SVG Favicon](https://elysiatools.com/ru/tools/svg-favicon-generator): Преобразует SVG или растровый логотип в полный набор favicon с ICO, PNG-версиями, Apple touch icon и web manifest - [Конвертер SVG в JPG](https://elysiatools.com/ru/tools/svg-to-jpg): Преобразование векторной графики SVG в растровый формат JPG с настраиваемыми параметрами разрешения, качества и фона - [SVG в PDF](https://elysiatools.com/ru/tools/svg-to-pdf): Конвертировать SVG-векторную графику в PDF-документы для печати и обмена - [Конвертер SVG в PNG](https://elysiatools.com/ru/tools/svg-to-png): Преобразование векторной графики SVG в растровый формат PNG с настраиваемыми параметрами разрешения, качества и прозрачности - [Конвертер SVG в WebP](https://elysiatools.com/ru/tools/svg-to-webp): Преобразование векторной графики SVG в растровый формат WebP с современной компрессией и поддержкой прозрачности - [Проверка доступности](https://elysiatools.com/ru/tools/accessibility-checker): Находит типовые проблемы WCAG 2.1 в HTML, страницах или макетах и возвращает рекомендации по исправлению ## Примеры - [Образцы XML](https://elysiatools.com/ru/samples/xml-viewer-samples): Образцы файлов для браузерного XML просмотрщика - [Примеры XML](https://elysiatools.com/ru/samples/xml-samples): Примеры формата XML (eXtensible Markup Language) от простых до сложных структур - [SVG Примеры](https://elysiatools.com/ru/samples/svg-samples): Примеры масштабируемой векторной графики (SVG) демонстрирующие различные возможности и техники SVG - [Образцы SVG](https://elysiatools.com/ru/samples/svg-viewer-samples): Образцы векторной графики для браузерного SVG просмотрщика ## Связанные материалы - [Инструменты конвертации форматов изображений и анимированного экспорта](https://elysiatools.com/ru/hubs/image-convert): Сравните конвертеры JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 и инструменты экспорта анимированных изображений в одном хабе. - [Инструменты XML для конвертации, маппинга и XPath](https://elysiatools.com/ru/hubs/xml-convert): Подборка инструментов для конвертации XML, маппинга, объединения и извлечения через XPath в одном хабе. - [Инструменты извлечения, очистки и экспорта HTML в Markdown/PDF](https://elysiatools.com/ru/hubs/html-convert): Сравните инструменты очистки HTML, извлечения атрибутов и ссылок на изображения, HTML в Markdown и HTML в PDF в одном хабе для веб-конвертации контента. - [Инструменты для очистки, оформления и пакетной подготовки изображений](https://elysiatools.com/ru/hubs/image-utility): Соберите в одном хабе инструменты для очистки изображений, обрезки, добавления полей и рамок, пакетного изменения размера и сжатия, водяных знаков и финальной визуальной подготовки.