Оптимизация SVG: уменьшаем размер без потери качества

SVG — векторный формат, который масштабируется без потери качества. Но файлы, экспортируемые из Figma, Illustrator или других редакторов, часто содержат избыточные данные. Оптимизация может сократить размер на 30–80% без визуальных изменений. В этой статье разберём основные приёмы и инструменты.

Для кодирования SVG в base64 и Data URI используйте SVG Encoder на reChecker. Для объединения иконок в спрайт — CSS Sprite на reChecker.

Что можно удалить без потери качества

Метаданные и комментарии

Редакторы добавляют служебную информацию:

<!-- До оптимизации -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Generator: Adobe Illustrator 24.0 -->
  <metadata>...</metadata>
  <path d="..."/>
</svg>

Удалите metadata, comments, title (если не нужен для доступности), desc (если не используется).

Скрытые слои и неиспользуемые элементы

Элементы с display="none", opacity="0", visibility="hidden" — кандидаты на удаление, если они не участвуют в анимации.

Точность координат

Координаты с 5–6 знаками после запятой избыточны для экранного отображения. Округление до 2–3 знаков уменьшает размер:

<!-- До:  -->
<path d="M 10.123456789 20.987654321 L 30.111111 40.222222"/>

<!-- После: -->
<path d="M 10.12 20.99 L 30.11 40.22"/>

Дефолтные атрибуты

Многие атрибуты имеют значения по умолчанию. fill="black" можно опустить, если нужен чёрный. stroke="none" — дефолт для элементов без обводки.

Структурная оптимизация

Объединение путей

Несколько path с одинаковыми заливками можно объединить в один:

<!-- До -->
<path fill="#333" d="M0 0 L10 0 L10 10 Z"/>
<path fill="#333" d="M20 0 L30 0 L30 10 Z"/>

<!-- После -->
<path fill="#333" d="M0 0 L10 0 L10 10 Z M20 0 L30 0 L30 10 Z"/>

Команда M (moveto) без заливки промежутка позволяет «перепрыгивать» между контурами.

Использование символов и use

Повторяющиеся элементы выносите в <defs> и ссылайтесь через <use>:

<defs>
  <path id="icon" d="M0 0 L10 10 L0 10 Z"/>
</defs>
<use href="#icon" x="0" y="0"/>
<use href="#icon" x="20" y="0"/>

Упрощение path

Сложные кривые Безье можно упростить, уменьшив количество опорных точек. Инструменты вроде SVGO делают это автоматически с настраиваемой точностью.

Inline SVG vs внешний файл vs спрайт

Для 1–3 иконок на странице inline допустим. Для десятков иконок — спрайт. Генерация спрайтов: CSS Sprite на reChecker.

Кодирование в base64 и Data URI

Встраивание SVG в CSS через Data URI избавляет от отдельного запроса:

.icon {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0...') center/contain no-repeat;
}

Минусы: увеличение размера CSS на ~33% из-за base64, сложнее отлаживать. Плюсы: один HTTP-запрос, возможность инлайна в критический CSS.

SVG Encoder на reChecker конвертирует SVG в base64 и Data URI с настройкой сжатия.

Инструменты оптимизации

SVGO (Node.js)

Популярный оптимизатор. Установка и базовый запуск:

npm install -g svgo
svgo icon.svg -o icon.optimized.svg

Плагины отключают/включают конкретные преобразования. Конфиг svgo.config.js:

module.exports = {
  plugins: [
    'removeDoctype',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupIds',
    'convertColors',
    { name: 'removeViewBox', active: false }, // сохранить viewBox
  ],
};

SVGOMG (онлайн)

Веб-интерфейс для SVGO с визуальным сравнением до/после. Удобно для разовой оптимизации без установки инструментов.

Ручная минификация

• Удалить переносы строк и лишние пробелы
• Заменить style="..." на атрибуты (fill, stroke) где возможно
• Использовать короткие имена: fill вместо fill-rule в простых случаях

Чек-лист оптимизации

Суммарно реально достичь 30–80% уменьшения в зависимости от исходного файла.

Безопасность при инлайне

При встраивании пользовательского SVG в HTML проверяйте содержимое. SVG может содержать <script>, onload, javascript: в атрибутах. Санитизируйте или используйте CSP для блокировки inline-скриптов.

Практические рекомендации

1. Экспорт из редактора — по возможности экспортируйте «оптимизированный» SVG (Figma, Illustrator имеют такие опции)
2. Автоматизация — добавьте SVGO в сборку (Webpack, Vite, Gulp) для автоматической оптимизации при билде
3. Проверка — после оптимизации визуально сравните результат на разных размерах и фонах
4. Спрайты — для большого набора иконок используйте CSS Sprite или symbol sprite с <use>
5. Base64 — применяйте для критичных иконок, которые должны отображаться до загрузки шрифтов

Интеграция SVG Encoder и CSS Sprite в рабочий процесс ускоряет подготовку SVG для продакшена.

Атрибуты viewBox и размеры

Сохраняйте viewBox при оптимизации — он определяет систему координат и позволяет масштабировать SVG без искажений. Атрибуты width и height можно удалить, если размер задаётся через CSS. Для инлайновых SVG часто оставляют только viewBox:

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="..."/>
</svg>

Группировка и reuse

Повторяющиеся элементы (иконки в наборе) выносите в общий спрайт. Формат symbol sprite позволяет подключать иконки по ID:

<svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
</svg>
<svg class="icon"><use href="#icon-close"/></svg>

Один запрос, переиспользование, возможность стилизации через CSS. Генерация таких спрайтов — задача CSS Sprite на reChecker.

Проверка после оптимизации

После применения SVGO или ручной оптимизации обязательно проверьте:

• Отображение на светлом и тёмном фоне
• Масштабирование (увеличение до 200–300%)
• Анимации, если используются
• Доступность (роль, aria-label для декоративных SVG)

Визуальные отличия могут проявиться при агрессивных настройках округления координат. Увеличьте точность в конфиге SVGO при необходимости.