SVG / Иконки

Генератор SVG-спрайтов: символы и использование иконок

Перетащите несколько SVG-иконок, чтобы создать спрайт символов. Очистите разметку, устраните дубликаты ID из имён файлов, сохраните viewBox, при необходимости замените заливки на currentColor и скачайте sprite.svg.

Генератор SVG-спрайтов: символы и использование иконок: Добавьте набор SVG-иконок и получите один файл спрайта с отдельным символом для каждой иконки, а также фрагмент кода для её использования. Скрипты, внешние ресурсы и небезопасные элементы удаляются, размеры при необходимости преобразуются в viewBox, а заливки можно заменить на currentColor, чтобы иконки наследовали цвет текста. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для разработчиков
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Спрайт значков SVGЛокальная обработка

Полностью работает в браузере

До 60 значков · по 1 MB каждый · выбор файлов заменяет текущий набор

Скрипты, обработчики событий, внешние ресурсы, встроенные изображения, текст и неподдерживаемые элементы удаляются. Простые встроенные стили преобразуются в атрибуты представления. Если viewBox отсутствует, используются числовые значения ширины и высоты; для каждого отсутствующего размера по умолчанию берётся 24 единицы. Перед использованием проверьте каждый вариант предпросмотра.

Редактировать значок SVG

Символы и повторное использование

SVG 2 определяет элементы symbol и use, а также их работу с viewBox: https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement

Локальная обработка и заливка

Каждый значок собирается заново из списка безопасных элементов и атрибутов SVG, поэтому скрипты, обработчики событий и внешние ресурсы не могут попасть в спрайт. Сторонние наборы значков не используются. Заливка SVG и currentColor описаны на странице https://www.w3.org/TR/SVG2/painting.html . Ответственность за лицензии загруженных значков несёт пользователь.

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

  1. Перетащите до 60 SVG-иконок размером менее 1 MB каждая.
  2. Просмотрите очищенные изображения и при необходимости замените заливки на currentColor.
  3. Скачайте спрайт и выберите иконку, чтобы скопировать фрагмент кода для её использования.

Конфиденциальность и ограничения

Ваши SVG-файлы остаются на устройстве. Инструмент не загружает иконки и не обращается к URL, встроенным в файлы.

Похожие инструменты

Редактор SVGОчистка SVGSVG в JSXИнструмент для спрайт-листов

Часто задаваемые вопросы

Как использовать спрайт?

Один раз вставьте его SVG в скрытый контейнер на странице, а затем используйте скопированные встроенные фрагменты кода. Для отдельного файла вместо этого укажите в href значение sprite.svg#id.

Что происходит, если viewBox отсутствует?

Числовые значения width и height, включая единицы px, определяют новый viewBox. Если размер отсутствует или не поддерживается, по умолчанию используется значение 24. В предварительном просмотре отмечаются исправленные viewBox, чтобы вы могли проверить обрезку.

Сохранит ли каждая иконка свой исходный вид?

Нет. Простые фигуры, группы, градиенты, обтравка и маски сохраняются, но скрипты, текст, встроенные изображения, элементы use и неподдерживаемые стили удаляются. Проверьте предварительный просмотр. Вы несёте ответственность за лицензии на загруженные изображения.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен