DevToolbox

Бесплатно онлайн SVG Optimizer

Оптимизируйте, минифицируйте и очищайте SVG-файлы онлайн. Удаляет метаданные Inkscape/Illustrator, комментарии, пустые группы и ненужные атрибуты. Мгновенный предпросмотр — бесплатно, 100% на стороне клиента.

100% на стороне клиента · Данные никогда не покидают ваш браузер

Optimization Options

Optimized output will appear here

Как использовать SVG Optimizer

Вставьте SVG-код в панель Input SVG, выберите параметры оптимизации и нажмите Оптимизировать или Ctrl/Cmd+Enter.

  • Удалить комментарии — убирает блоки <!-- ... -->.
  • Удалить метаданные — удаляет элемент <metadata>, встроенный Inkscape/Illustrator.
  • Удалить атрибуты редактора — удаляет атрибуты inkscape:*, sodipodi:*, data-name и их объявления пространств имён.
  • Сжать пробелы — нормализует пробелы и переносы строк в значениях атрибутов и между тегами.
  • Удалить пустые группы — убирает элементы <g></g> без дочерних элементов.
  • Округлить числа — снижает десятичную точность координат в атрибуте d пути (например, 123.456789 → 123.46).

Панель статистики показывает исходный и оптимизированный размер, а также процент экономии. Используйте Форматировать для читаемого отображения минифицированного SVG. Ctrl/Cmd+K — очистить.

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

Что делает оптимизация SVG?

Оптимизация SVG удаляет данные, не нужные для рендеринга: метаданные редактора, XML-комментарии, пустые контейнеры, избыточные объявления пространств имён и лишние пробелы. Также можно округлить слишком точные десятичные числа в данных пути. Результат — файл меньшего размера, который отображается одинаково во всех браузерах.

Почему SVG из Inkscape или Illustrator содержит столько лишних данных?

Inkscape и Adobe Illustrator встраивают приватные атрибуты с пространствами имён (inkscape:*, sodipodi:*, ai:*) и блоки метаданных для сохранения состояния редактирования: имена слоёв, настройки сетки, информацию о шрифтах, свойства документа. В редакторе они необходимы, но для браузера бесполезны.

Изменится ли внешний вид SVG после оптимизации?

Опции этого инструмента разработаны как визуально без потерь. Удаление комментариев, метаданных и атрибутов редактора не влияет на результат рендеринга. Округление координат до 2 знаков после запятой незаметно при обычных размерах отображения (ошибка менее 0,01 пикселя). Всегда просматривайте результат перед развёртыванием.

Почему точность данных пути влияет на размер файла?

Инструменты рисования часто экспортируют координаты пути с 6–10 знаками после запятой, хотя для веб-отображения достаточно 1–2 знаков. В сложных иллюстрациях с множеством сегментов пути округление значительно сокращает количество символов.

В чём разница между безопасной и небезопасной оптимизацией?

Безопасные оптимизации сохраняют визуальный вывод: удаление комментариев, метаданных, атрибутов редактора и пустых групп. Небезопасные могут изменить внешний вид: удаление атрибута viewBox, изменение цветов, которые переопределяет CSS, или удаление атрибутов id, используемых JavaScript. Этот инструмент применяет только безопасные оптимизации.

Как это сравнивается с SVGO?

SVGO — стандартный отраслевой оптимизатор Node.js с десятками плагинов, включая продвинутое слияние путей. Этот браузерный инструмент охватывает наиболее эффективные оптимизации без установки. Для производственных конвейеров сборки рекомендуется SVGO или плагин svgo для Vite/webpack; этот инструмент идеален для разовых файлов.

Связанные инструменты