16 июня 2026 8 мин чтения 55

Как оптимизировать SVG — уменьшаем вес файла в 2‑10 раз без потери качества

SVG считается лёгким форматом и остаётся им ровно до момента экспорта. Откройте файл, выгруженный из Illustrator или Figma, текстовым редактором: там метаданные редактора, комментарии‑визитки, координаты с восемью знаками после запятой и стили, задублированные на каждой из сорока фигур. Ни одна из этих строк не влияет на картинку, но все они уезжают к пользователю. Типичный экспорт сжимается в 2‑10 раз, и на экране при этом не меняется ни один пиксель. Разберём, откуда берётся лишний вес и как его снимать так, чтобы это происходило само.

Коротко

Прогоните файл через SVGO (или его веб‑версию SVGOMG) — это закроет 90% работы автоматически: уберёт метаданные, округлит координаты, схлопнет группы. Оставшиеся 10% ручные: проверить, нет ли внутри растра, невидимых фигур и текста, не переведённого в кривые. А чтобы шаг не забывался, его встраивают в сборку проекта.

Откуда в SVG лишний вес

SVG — текстовый формат, и редакторы дописывают в него всё, что удобно им самим; браузеру эти строки без надобности. Мусор набирается пятью типовыми способами:

Метаданные редактора: блок <metadata>, комментарий «Generator: Adobe Illustrator», приватные атрибуты sodipodi: и inkscape:. Браузеру они не нужны совсем.
Избыточная точность: координата 12.000000381469727 вместо 12. На глаз разницы ноль, в весе — ощутимо, когда точек тысячи.
Пустые группы и defs: остатки слоёв, неиспользуемые градиенты, обёртки без содержимого.
Задублированные стили: fill="#21A038" на каждой из 40 фигур вместо одного объявления на группе.
Скрытые объекты: фигуры с display:none или за пределами viewBox — следы процесса рисования, уехавшие в экспорт.

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

Автоматика: SVGO и SVGOMG

SVGOMG — веб‑интерфейс: перетащили файл, подвигали тумблеры, скачали результат; вес до и после виден сразу. Для разовых задач подходит идеально.

SVGO — консольная утилита для потока файлов и сборки:

код

npx svgo logo.svg              # оптимизировать файл
npx svgo -f ./icons -o ./dist  # папку целиком

Дефолтные настройки безопасны, менять их без нужды не стоит. Аккуратности требуют два тумблера:

Precision (точность округления). 2‑3 знака безопасны; единица заметно искажает мелкие детали и плавные кривые.
Remove viewBox. Оставьте выключенным: без viewBox файл перестаёт масштабироваться через CSS. Это типичная причина жалобы «вставил SVG, а он не резинится».

Проверяйте результат глазами

Откройте оптимизированный файл рядом с оригиналом и сравните мелкие детали и градиенты. Агрессивные настройки изредка ломают сложные файлы: маски, фильтры, узорные заливки. Сломалось — верните точность на шаг назад.

Что автоматика сделать не может

SVGO работает с формой записи, но не понимает содержимого. Поэтому остаются четыре случая, где нужен человек, и первый из них объясняет большинство историй «почему мой SVG весит 800 КБ».

Найдите растр внутри

Самая частая причина огромного веса: внутри вектора лежит растровая картинка в base64 (<image href="data:image/png…). Расширение у файла векторное, содержимое растровое, со всеми ограничениями пикселей. Ищите тег <image>: если он есть, файл нужно перерисовывать в честный вектор, и никакая оптимизация тут не поможет.

Проверка занимает секунды: откройте файл текстовым редактором и поищите строку data:image. Нашлась — внутри растр, и на него приходится почти весь вес. Тот же признак виден косвенно, по размеру: SVG на 800 КБ при простой картинке физически не может состоять из одних координат, столько занимает только закодированная в base64 картинка.

Решите вопрос с текстом

Тег <text> рендерится шрифтом зрителя: шрифта нет — надпись перескочит на другой и поедет. Для логотипов текст переводят в кривые (Outline или Flatten в редакторе). У этого есть цена: каждая буква‑кривая занимает десятки точек, и длинные надписи раздувают файл. Отсюда правило: логотипы и иконки — в кривые, схемы с десятками подписей — оставляйте <text> с системными шрифтами.

Упростите пути

В Figma: выделить фигуру → Flatten, затем удалить лишние точки. В Inkscape: Path → Simplify (Ctrl+L) уменьшает количество узлов с настраиваемой агрессивностью. Приём особенно выручает после автотрассировки растра, которая любит ставить точку на каждом пикселе.

Объедините одинаковые заливки

Сорок фигур одного цвета? Сгруппируйте и задайте fill один раз на группе. Заодно упростится перекраска — та самая, которой пользуется наш редактор цвета логотипов.

Тот же приём чинит обратную ситуацию, когда один цвет записан в файле тремя способами сразу: fill="#FF0000", fill="red" и style="fill:rgb(255,0,0)". Браузер нарисует одинаковые фигуры, а поиск по коду найдёт одно написание из трёх, и перекраска заменой строки сработает наполовину. После нормализации у цвета остаётся одна запись на весь файл.

Сколько это даёт в килобайтах

Файл	До	После SVGO	Ручная доводка
Иконка из Figma	4 КБ	1,5 КБ	1 КБ
Логотип из Illustrator	25 КБ	8 КБ	5 КБ
Автотрассировка PNG	300 КБ	150 КБ	перерисовка → 10 КБ

Килобайты кажутся мелочью ровно до тех пор, пока иконок не станет тридцать на страницу: там разница между «моментально» и «заметно грузится» становится осязаемой, особенно на мобильных. А инлайн‑SVG входит прямо в HTML, поэтому его вес добавляется к весу каждой страницы.

Разбор файла: что именно выкидывается

Чтобы цифры из таблицы перестали быть абстракцией, посмотрим на типичный экспорт иконки построчно:

код

<?xml version="1.0" encoding="UTF-8"?>            ← не нужно для веба
<!-- Generator: Adobe Illustrator 27.0 -->        ← комментарий-визитка
<svg xmlns:xlink="..." xml:space="preserve"        ← неиспользуемые атрибуты
     width="24.000000px" height="24.000000px">     ← лишние нули
  <g id="Layer_1_копия_2">                         ← имя слоя из редактора
    <path fill="#FF0000" d="M12.000000,2.000000    ← 6 знаков после запятой
      C12.000000,2.000000 11.999999,2.000001..."/>  ← микродвижения кривой
  </g>
</svg>

После SVGO остаётся суть:

код

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="red" d="M12 2C12 2 12 2..."/>
</svg>

Каждая строка мусора безобидна по отдельности. Но их сотни в каждом файле, а файлов десятки — так 4 КБ и превращаются в 1 КБ без единого видимого изменения.

Чем проверить, что стало лучше

Вес файла в проводнике — грубая мера: он ничего не говорит о том, что стало с картинкой и сколько работы осталось браузеру. Вопрос закрывают три проверки.

Первая — сравнение глазами при масштабе 400%: там видно, как округление до одного знака съедает скругления и стыки кривых. Вторая — число узлов: откройте оптимизированный файл в Figma и посмотрите на количество точек в контуре. После автотрассировки их бывает несколько тысяч на простой знак, и тогда помогает перерисовка, а настройки SVGO уже ничего не изменят. Третья — вкладка Network в DevTools, где колонка Size показывает исходный размер файла и переданный по сети.

Отдельно стоит смотреть на инлайн‑иконки. Каждый <path> внутри HTML становится узлом DOM, поэтому набор из тридцати сложных иконок утяжеляет и загрузку, и отрисовку страницы.

Gzip и Brotli: последний множитель

Раз SVG остаётся текстом, он отлично сжимается на лету. Правильно настроенный сервер отдаёт файлы со сжатием Brotli или Gzip — это минус 60‑80% к передаваемому размеру поверх всей оптимизации выше. Проверить можно в DevTools → Network → колонка Size: если transferred сильно меньше size, сжатие работает.

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

Как сделать, чтобы оптимизация происходила сама

Всё описанное выше работает для разового файла. В проекте с десятками иконок ручной прогон рано или поздно забудут, поэтому шаг встраивают в процесс:

Конфиг в репозитории. Файл svgo.config.js фиксирует настройки для всей команды — например, выключённый removeViewBox и точность 3:

код

module.exports = {
  plugins: [
    { name: 'preset-default',
      params: { overrides: { removeViewBox: false } } },
  ],
};

Хук или CI‑шаг: прогон svgo по изменённым файлам на pre‑commit — тогда неоптимизированный SVG физически не попадёт в репозиторий.
Сборщики: для Vite и Webpack есть плагины, оптимизирующие SVG на лету при импорте; в React‑проектах SVGR совмещает оптимизацию с превращением иконок в компоненты.
Figma-плагины (SVGO Compressor и аналоги) оптимизируют прямо при экспорте — удобно дизайнерам, которые отдают файлы разработчикам.

Принцип один: оптимизация должна случаться автоматически. «Помнить прогнать через SVGOMG» на дистанции перестаёт работать у любой команды.

Когда оптимизация не нужна

Автоматизация полезна не везде, и три случая честно выпадают из правила:

Единственный логотип на статичном лендинге — разница в 3 КБ не изменит ни одной измеримой метрики.
SVG для печати или передачи дизайнеру — там важна структура слоёв, которую агрессивная оптимизация схлопывает. Оптимизируйте копию для веба, исходник храните как есть.
Файлы, которые ещё будут редактироваться — оптимизация необратимо упрощает структуру: имена слоёв, группы и направляющие исчезают.

Все три исключения сводятся к одному правилу: оптимизированный SVG — продакшен‑артефакт, как минифицированный JS. Исходник живёт отдельно.

Если коротко

Лишний вес в SVG возникает механически, на экспорте, поэтому и снимается механически: SVGO с дефолтами — обязательный шаг для любого файла, уходящего на сайт. Руками остаётся проверить четыре вещи: нет ли внутри растра, что с текстом, не переусложнены ли пути после трассировки, не задублированы ли заливки. И не отключайте viewBox. А главное — вынесите прогон в pre‑commit или сборщик: шаг, который надо помнить, рано или поздно забудут.

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