Сжать SVG онлайн: оптимизация через SVGO
Оптимизирует SVG с помощью SVGO: убирает из кода служебный мусор и показывает, насколько уменьшился каждый файл. Сжатие выполняется в браузере — файлы не уходят на сервер.
Перетащите SVG-файлы
До 50 файлов по 10 МБ. Можно вставить скопированный SVG-код. Файлы не покидают ваш компьютер.
Возьмите иконку из каталога
Как пользоваться
Как сжать SVG онлайн
- Добавьте файлы любым способом: перетаскиванием, кнопкой выбора или сочетанием Ctrl+V для скопированного кода.
- Оптимизатор прогонит каждый файл через SVGO и покажет вес до и после.
- Сравните превью: иконка должна выглядеть так же, как исходная.
- Скачайте оптимизированный SVG или весь пакет одним ZIP.
Что убирает SVGO
SVGO — популярный открытый оптимизатор SVG, который работает набором правил-плагинов. В экспорте из графических редакторов много данных, не влияющих на картинку:
- комментарии, блок
<metadata>и атрибуты в пространствах имён редактора; - пустые группы, скрытые элементы и неиспользуемые определения;
- координаты с пятью-шестью знаками после запятой там, где хватит одного-двух;
- длинная запись цветов (
#ffffffвместо#fff) и значения по умолчанию.
Затем фигуры переводятся в короткие пути, вложенные группы схлопываются, а пробелы и переносы строк удаляются. Внешний вид при оптимизации SVG не должен меняться — уменьшается только объём разметки.
Безопасно для закрытых проектов
SVGO загружается в страницу и обрабатывает файлы локально, поэтому код иконок из внутренней дизайн-системы не передаётся третьим лицам. Лимиты: в пакете до 50 файлов, каждый не тяжелее 10 МБ; результат сохраняется ZIP-архивом.
Советы и типичные ошибки
- viewBox. Проверьте, что после любых оптимизаций атрибут viewBox остался на месте: без него иконка перестаёт масштабироваться через CSS.
- ID и ссылки. SVGO сокращает идентификаторы. Если CSS или скрипт обращается к элементу по id, убедитесь, что ссылка не сломалась.
- Анимация. Слияние путей мешает анимировать части иконки по отдельности — такие файлы проверяйте особенно внимательно.
- Доступность. Для смысловых иконок сохраняйте
<title>или подписывайте их атрибутом aria-label в HTML. - Порядок работы. Сожмите иконки до сборки в SVG-спрайт или иконочный шрифт, а сомнительный результат откройте в редакторе SVG-кода.
Сильнее всего сжатие окупается на иконках, которые грузятся на каждой странице: значки файлов и документов в личном кабинете, метки карт и адресов в контактах, иконки устройств в каталоге товаров. Готовые SVG-иконки можно открыть в оптимизаторе, не скачивая, — это делает блок «Возьмите иконку из каталога».
Частые вопросы
- Что удаляет оптимизация SVG?
- Комментарии, метаданные и служебные атрибуты графических редакторов, пустые группы, скрытые элементы и лишние знаки после запятой в координатах. Цвета записываются короче, а фигуры по возможности превращаются в компактные пути.
- Ухудшится ли качество иконки после сжатия?
- Картинка остаётся векторной, меняется только запись кода. Сравните превью до и после: на мелких деталях сразу видно, если что-то сместилось.
- Насколько уменьшится файл?
- Зависит от исходника: экспорт из графического редактора со служебными данными худеет заметно, а уже чистый код — на считанные проценты. Точную экономию инструмент показывает для каждого файла.
- Нужно ли сжимать SVG, если на сервере включён gzip?
- Да, это разные уровни: SVGO убирает лишнее из самого кода, а gzip или Brotli сжимают то, что осталось, при передаче. Вместе они дают минимальный вес.
- Можно ли редактировать SVG после оптимизации?
- Можно, но слои, названия групп и данные редактора будут потеряны. Храните исходник отдельно, а на сайт выкладывайте оптимизированную копию.