Оптимизация 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 спрайт

Подход	Плюсы	Минусы
Inline	Нет запроса, можно стилизовать CSS	Увеличивает HTML, не кэшируется отдельно
Внешний файл	Кэширование, переиспользование	Дополнительный запрос
Спрайт	Один запрос на много иконок	Сложнее поддерживать вручную

Для 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 в простых случаях

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

Действие	Экономия
Удаление metadata, comments	5–15%
Округление координат	10–20%
Удаление дефолтных атрибутов	5–10%
Объединение путей	10–30%
Упрощение path (SVGO)	20–50%
Минификация пробелов	5–15%

Суммарно реально достичь 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 при необходимости.