Оптимизатор SVG

Вставьте или перетащите SVG и сожмите его с помощью SVGO. Всё остаётся в вашем браузере.

Как работает Оптимизатор SVG

Оптимизатор SVG запускает SVGO (SVG Optimizer) в Web Worker внутри браузера для минификации и очистки SVG-файлов без их загрузки. SVGO применяет настраиваемый набор плагинов, которые удаляют комментарии, сворачивают пробелы, объединяют идентичные пути, преобразуют формы в их наиболее компактное представление и убирают атрибуты, не влияющие на визуальный результат. В итоге получается меньший SVG, который отрисовывается идентично оригиналу.

SVG-файлы, созданные в таких дизайн-инструментах, как Figma, Illustrator или Inkscape, часто содержат значительные накладные расходы: метаданные редактора, пустые группы, избыточные атрибуты трансформации и объявления пространств имён, которые не нужны ни одному браузеру. Набор плагинов SVGO по умолчанию надёжно устраняет эти накладные расходы. Оптимизированный файл предлагается для скачивания, а процент уменьшения размера отображается, чтобы вы могли подтвердить, что оптимизация была оправданной.

Автор: Bastien Sulyan

Оптимизатор SVG: пошаговая инструкция

Перетащите SVG-файл в область загрузки или нажмите для выбора файла.
Web Worker SVGO немедленно запускает оптимизацию с набором плагинов по умолчанию.
Просмотрите процент уменьшения и исходный и оптимизированный размеры файла.
Нажмите «Скачать», чтобы сохранить оптимизированный SVG на устройство.
Если конкретные плагины вызывают проблемы с отрисовкой, настройте конфигурацию плагинов и повторите оптимизацию.

Частые сценарии использования

Фронтенд-разработчик оптимизирует иконки, экспортированные из Figma, перед их добавлением в production-пайплайн ресурсов, уменьшая каждую иконку с 4 КБ до менее 1 КБ.
Веб-дизайнер очищает SVG-иллюстрации, экспортированные из Illustrator с несколькими слоями метаданных редактора, невидимых в браузере, но раздувающих файл.
Разработчик, создающий иконочный шрифт из SVG-глифов, обеспечивает чистоту и единообразие каждого исходного SVG перед шагом сборки шрифта.
Инженер по производительности проверяет встроенный SVG в HTML и заменяет каждый раздутый оригинал версией, оптимизированной SVGO, для улучшения веса страницы.

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

Изменит ли SVGO внешний вид SVG?

Плагины SVGO по умолчанию выбраны так, чтобы быть визуально без потерь: оптимизированный SVG отрисовывается идентично оригиналу во всех стандартных браузерах. Некоторые агрессивные плагины (например, те, что очень сильно округляют координаты путей) могут вносить незначительные отличия при отрисовке. Если вы заметили визуальное изменение, сравните исходный и оптимизированный файлы в браузере и отключите конкретный плагин, вызывающий проблему.

Отправляется ли SVG-файл на сервер для оптимизации?

Нет. SVGO работает в Web Worker внутри вкладки браузера. Текст SVG считывается с локального диска, обрабатывается в памяти JavaScript, и результат возвращается на страницу для скачивания. Содержимое файла не покидает устройство.

Насколько меньше станет SVG?

Уменьшение зависит от источника. SVG-файлы, экспортированные из дизайн-инструментов с метаданными редактора, обычно уменьшаются на 30-70%. Написанные вручную SVG-файлы, которые уже компактны, могут уменьшиться лишь на 5-15%. Инструмент показывает точное количество байтов и процент, чтобы вы могли оценить каждый файл отдельно.

Влияет ли оптимизация на SVG-анимации или JavaScript внутри файла?

Конфигурация сохраняет элементы анимации и атрибуты SMIL. Она удаляет элементы script: инструмент добавляет плагин removeScripts поверх стандартного набора плагинов SVGO, поскольку SVG, который вы собираетесь встроить, не должен содержать исполняемый код. Некоторые плагины очистки атрибутов могут взаимодействовать с анимациями, если анимация ссылается на эти атрибуты по ID; проверьте отрисованный результат после оптимизации файлов со сложными анимациями.

Можно ли оптимизировать несколько SVG-файлов одновременно?

Текущая версия обрабатывает по одному SVG-файлу за раз. Перетащите файл, скачайте результат, затем перетащите следующий файл. Пакетная обработка нескольких файлов за одну сессию в этом выпуске недоступна.

Какую версию SVGO использует инструмент?

Инструмент включает SVGO, работающий в Web Worker. Встроенная версия указана в информации об инструменте. SVGO активно поддерживается, и API плагинов существенно изменился между v1, v2 и v3; текущий инструмент использует формат плагинов v3.