SVG-файл слишком большой? 8 советов по сжатию и оптимизации

SVG весом в сотни килобайт или даже несколько мегабайт — обычно результат слишком большого числа якорей, лишних путей, метаданных редактора и избыточной точности десятичных знаков. Восемь приёмов ниже упорядочены от исходника к доставке, и все они применимы на практике.

1. На уровне путей: меньше якорей, объединение путей

Совет 1: уменьшите число якорей (упростите пути)

Чем больше якорей у пути, тем больше файл и тем медленнее отрисовка. Повышайте сглаживание при конвертации, чтобы сократить их ещё на исходнике. Для готового SVG используйте Object → Path → Simplify в Illustrator или Path → Simplify (Ctrl+L) в Inkscape, чтобы убрать лишние якоря. Настройка сглаживания и количества цветов в инструменте конвертации PolySVG позволяет в реальном времени взвешивать качество и размер файла.

Совет 2: объединяйте пути и слои

Объединяйте несколько путей с одинаковой заливкой в один, удаляйте повторяющиеся атрибуты, выравнивайте бессмысленную вложенность групп и удаляйте скрытые слои и пустые элементы. В графических программах используйте операцию unite в Pathfinder или объединяйте слои перед экспортом.

2. Внутри файла: уберите метаданные, снизьте точность

Совет 3: удалите метаданные редактора

SVG, выгруженные из Illustrator или Inkscape, часто содержат пространства имён редактора, <metadata>, комментарии и параметры экспорта, которые не влияют на отрисовку, поэтому их можно удалить вручную или очистить автоматически через SVGO. Теги <title> и <desc> всё же оставьте — они помогают доступности.

Совет 4: снизьте точность десятичных знаков

Координаты путей часто несут шесть–восемь знаков после запятой, тогда как для экранной отрисовки хватает одного–двух. Параметр floatPrecision со значением 1 или 2 в конфигурации SVGO заметно уменьшает файл без видимой разницы. Для совсем маленьких иконок не сжимайте координаты слишком сильно, иначе форма исказится.

3. Автоматизация: одна команда с SVGO

Совет 5: оптимизируйте автоматически через SVGO

SVGO — де-факто стандартный инструмент оптимизации SVG с десятками плагинов: удаление комментариев и метаданных, объединение путей, оптимизация команд пути и чистка чисел. Базовое использование:

npx svgo input.svg -o output.svg

Обычно файлы уменьшаются на 30–70%. Две предосторожности: не удаляйте атрибут viewBox, иначе сломается масштабирование, и для иконок, которые собираетесь перекрашивать через CSS, оставляйте заливку унаследованной, а не задавайте цвет жёстко.

Сравните размер файла и фактический размер передачи в инструментах разработчика браузера до и после оптимизации, чтобы убедиться в выигрыше. Меняйте за раз только один тип параметров — так проще найти шаг, который всё испортил.

4. Структура и повторное использование: symbol и цветовые слои

Совет 6: переиспользуйте повторяющиеся фигуры через defs и use

Если одна и та же иконка встречается на странице несколько раз, определите её один раз в <defs> и ссылайтесь через <use> или соберите SVG-спрайт — и размер файла, и число запросов снизятся одновременно.

Совет 7: контролируйте цветовые слои и не встраивайте растр

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

5. Доставка: транспортное сжатие и кэширование

Совет 8: включите gzip/Brotli и кэширование

SVG — текст, поэтому включение gzip или Brotli на сервере обычно уменьшает размер передачи ещё на 60–80%; задавайте статическим SVG-файлам долгоживущие заголовки кэша. Очень маленькие иконки можно встроить прямо в HTML, сэкономив запрос целиком. Принципы разобраны в преимуществах SVG; чтобы управлять размером на этапе конвертации, прочитайте способы превратить изображение в SVG.

Порядок важен: сначала управляйте якорями и цветовыми слоями на исходнике, затем чистите метаданные и точность внутри файла, потом запускайте SVGO и лишь затем включаете транспортное сжатие. Со всеми четырьмя слоями SVG-файлы обычно уменьшаются на порядок.