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

SVG считается лёгким форматом, но откройте файл, экспортированный из Illustrator или Figma, — и найдёте там метаданные редактора, закомментированный мусор, координаты с восемью знаками после запятой и стили, задублированные на каждой фигуре. Типичный экспортированный SVG можно сжать в 2–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 знака — безопасно; 1 — может заметно исказить мелкие детали и плавные кривые.
• Remove viewBox. Не включайте: без viewBox SVG перестаёт масштабироваться через CSS — типичная причина «SVG вставил, а он не резинится».

Ручные приёмы — то, что автоматика не сделает

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

Самая частая причина «почему мой SVG весит 800 КБ»: внутри вектора лежит растровая картинка в base64 (<image href="data:image/png...). Формально это SVG, фактически — PNG в обёртке, со всеми минусами растра. Ищите тег <image> — если он есть, файл нужно не оптимизировать, а перерисовывать в честный вектор.

Переведите текст в кривые — или наоборот

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

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

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

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

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

Что даёт оптимизация на практике

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

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

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

Автоматизация: SVGO в пайплайне проекта

Ручная оптимизация хороша для разовых файлов; в проекте с десятками иконок её встраивают в процесс:

• Конфиг в репозитории. Файл 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» не работает на дистанции.

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

Возьмём типичный экспорт иконки из редактора и посмотрим на мусор построчно:

<?xml version="1.0" encoding="UTF-8"?>            ← не нужно для веба
<!-- Generator: Adobe [Illustrator](../../logos/design/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 КБ без единого видимого изменения.

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

Для честности — случаи, где можно не заморачиваться:

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

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

Коротко

SVGO/SVGOMG с дефолтами — обязательный шаг для любого SVG, уходящего на сайт. Дальше по ситуации: выгнать растр из вектора, перевести текст в кривые, упростить пути после трассировки. И не отключайте viewBox.

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