Как оптимизировать SVG-файлы

Зачем оптимизировать SVG-изображения?

Файлы SVG — это XML-разметка. При экспорте из графических редакторов в код часто попадают метаданные редактора, избыточные атрибуты, излишне точные координаты контуров, неиспользуемые определения и комментарии. Браузеру всё это не нужно для отрисовки графики, но каждый такой байт увеличивает вес файла.

Уменьшение размера SVG ускоряет загрузку страниц, улучшает показатели Core Web Vitals и экономит трафик — особенно для наборов иконок, логотипов и иллюстраций, которые встраиваются инлайново в HTML или CSS. Обычная иконка может сжаться на 30–70% без каких-либо видимых изменений.

Быстрый старт

1. Используйте панель инструментов, чтобы Открыть SVG, вставить разметку из буфера или запустить демо-файл.
2. Сравните оптимизированное превью с оригиналом (используйте переключатель Показать оригинал).
3. Настраивайте ползунки точности, если вам нужно более агрессивное или мягкое округление координат.
4. Скачайте результат или скопируйте очищенный код на вкладке «Код».

Общие настройки

Сравнивать размер с учётом сжатия Gzip

Показывает размер файла со сжатием gzip наряду с исходным весом в байтах. Это полезно, если на вашем сервере включено сжатие трафика — именно этот объем данных пользователи скачивают по сети на самом деле.

Форматировать код

Форматирует итоговый код с отступами. Полезно для отладки кода, но для максимального сжатия на продакшене эту опцию лучше отключать.

Многопроходная оптимизация

Запускает SVGO циклично несколько раз подряд, пока размер файла не перестанет уменьшаться. Работает чуть дольше, но иногда позволяет дополнительно выиграть немного веса.

Точность чисел / трансформаций

Контролирует, насколько сильно будут округляться координаты точек и трансформаций. Меньше значение = меньше размер файла; однако слишком низкие значения могут заметно исказить сложные контуры.

Популярные плагины SVGO

Каждый переключатель на панели настроек привязан к конкретному плагину SVGO. Настройки по умолчанию безопасны для большинства иконок и иллюстраций. Вот несколько важных плагинов:

• Удалить DOCTYPE (removeDoctype)
• Удалить XML-инструкции (removeXMLProcInst)
• Удалить комментарии (removeComments)
• Удалить тег <metadata> (removeMetadata)
• Удалить атрибут xmlns (removeXMLNS)
• Удалить метаданные редакторов (removeEditorsNSData)
• Очистить лишние пробелы в атрибутах (cleanupAttrs)
• Объединить стили (mergeStyles)
• Инлайнить стили (inlineStyles)
• Минифицировать стили (minifyStyles)
• Конвертировать стили в атрибуты (convertStyleToAttrs)
• Очистить неиспользуемые ID (cleanupIds)

Такие плагины, как Удалить атрибут viewBox и Удалить растровые изображения могут сломать адаптивность или комбинированную графику со встроенными PNG-элементами. Отключайте их, если итоговый результат выглядит некорректно, а затем включайте обратно по очереди, чтобы найти причину.

Тематические руководства

Изучайте наши подборки руководств, в которых плагины SVGO сгруппированы по темам. Это поможет лучше разобраться в очистке метаданных, округлении координат контуров или поиске причин поломки графики:

• Удаление метаданных и мусора редакторов
• Оптимизация контуров и геометрии
• ID, блоки defs и ссылки
• Стили и CSS в SVG
• Адаптивный размер SVG
• Скрытая и неиспользуемая разметка
• Атрибуты и пространства имен
• Преобразования, которые могут сломать SVG

Что делать, если оптимизация ломает ваш SVG

По своей природе SVGO работает достаточно агрессивно. Частые проблемы: ломается анимация, завязанная на конкретных ID; перестают работать стили CSS, обращавшиеся к удаленным классам; графика перестает масштабироваться из-за удаления viewBox, либо ломаются фильтры и маски, на которые ссылались очищенные секции <defs>.

Если что-то пошло не так, включите Показать оригинал, а затем отключайте плагины группами (очистка метаданных, округление контуров, очистка ID), пока превью снова не станет правильным. Последняя отключенная группа и будет содержать плагин, вызвавший регрессию. Начните поиск проблемы с нашего руководства по высокорискованным трансформациям.

SVG, PNG или WebP для иконок?

Используйте SVG для логотипов, иконок интерфейса и простых иллюстраций, которые должны оставаться идеально четкими при любом масштабе. Для фотографий и сложной растровой графики выбирайте PNG или WebP. Для многоцветных иконок строго фиксированного размера хорошо оптимизированный PNG иногда может весить меньше, чем SVG, но SVG всегда побеждает за счет поддержки тем оформления (через CSS), доступности для скринридеров и гибкости стилизации.

Справочник по плагинам SVGO

Каждый переключатель на панели настроек SVGOMG.ru представляет конкретный плагин SVGO. Мы подготовили отдельное руководство для каждого из них с советами по включению/отключению и разбором возможных проблем:

• Удалить атрибут viewBox (removeViewBox)
• Очистить неиспользуемые ID (cleanupIds)
• Оптимизировать геометрию контуров (path) (convertPathData)
• Удалить тег <metadata> (removeMetadata)
• Объединить контуры (path) (mergePaths)
• Удалить скрытые элементы (removeHiddenElems)
• Инлайнить стили (inlineStyles)
• Заменить width/height на viewBox (removeDimensions)

Открыть весь справочник по плагинам SVGO (всего плагинов: 44)