SVGO: оптимизируйте SVG без потери нужной структуры

Чтобы оптимизировать SVG с SVGO без нарушения работы на странице, сохраните оригинал, определите структуру, от которой зависит страница, затем проверьте отдельно оптимизированную копию на этой странице. Меньший файл и неизменный самостоятельный предпросмотр не доказывают, что селекторы CSS, скрипты и ссылки все еще работают.

Наш оригинальный значок делает различие видимым. Стандартный набор SVGO уменьшил исходник с 437 до 263 байт, но удалил ID, который окружающий HTML использовал для перекрашивания солнца. Отключение cleanupIds дало копию 281 байт с сохраненной привязкой. Измерения относятся к одному тесту с SVGO 4.1.0, а не гарантируют сжатие другой графики.

SVGO редактирует существующую разметку SVG. Если есть только PNG или JPG, сначала создайте или восстановите векторную геометрию. Оптимизация не превращает объекты растра в редактируемые контуры.

Определите структуру SVG, которую нужно сохранить

Перед запуском оптимизатора отличите видимое содержимое от того, на что ссылается другой документ или приложение. Стандартный набор SVGO включает операции, меняющие ID, группы, стили и данные контуров. Интеграция также может выбирать другой набор плагинов, поэтому проверьте настройку реально обрабатывающего файл инструмента.

Это отдельные проверки. Сохранение ID не сохраняет все группы, узлы и редактируемые объекты. Правильный рендеринг также не подтверждает, что редактор восстановит желаемую структуру слоев. Храните редактируемый оригинал и создавайте копию для передачи в целевой контекст.

Для повторно используемых символов руководство по спрайтам SVG описывает сторону потребителя ссылки. Эта статья рассматривает изменения оптимизации до того, как потребитель увидит файл.

Воспроизведите сломанную внешнюю привязку CSS

Используйте пустую временную папку с доступными Node.js и npm. Сохраните эту написанную вручную иллюстрацию как input.svg, включая завершающий перевод строки. Это тест конфигурации, а не результат конвертации PerfectVector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <!-- Original illustration for an SVGO configuration test. -->
  <metadata>Editable master: preserve the badge-accent CSS hook.</metadata>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle id="badge-accent" cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
</svg>

Установите точную версию примера, затем создайте новый выходной файл:

npm install --save-exact svgo@4.1.0
npx svgo input.svg -o default.svg

Запустите в чистой папке, чтобы существующий svgo.config.mjs не внес неожиданные настройки. Официальный репозиторий SVGO описывает отдельные имена выходных файлов и загрузку конфигурации. Для сборки проекта храните версию и конфигурацию в системе контроля версий, чтобы обновление было осознанным изменением.

Откройте default.svg как текст. У круга все еще коралловая заливка, но ID badge-accent исчез. Внутри документа SVG на этот ID не было ссылок. Документация cleanupIds объясняет удаление неиспользуемых ID и сокращение используемых. Селектор внешней страницы не входит во входные данные этого теста.

Чтобы увидеть последствие, поместите разметку SVG непосредственно в HTML-страницу с этим стилем вне SVG:

<style>
  #badge-accent { fill: #f5bf42; }
</style>

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

Сохраните привязку и повторите тест

Сохраните код как svgo.config.mjs в той же папке:

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: false,
        },
      },
    },
  ],
};

Теперь запишите другую копию:

npx svgo input.svg --config svgo.config.mjs -o preserved.svg
wc -c input.svg default.svg preserved.svg

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

Мы выполнили команды в чистой папке и независимо запустили эквивалентные конфигурации через JavaScript API SVGO 4.1.0. Выводы CLI и API были побайтово идентичны, без добавления завершающего перевода строки в оптимизированные файлы. Затем мы отрендерили каждый результат в отдельном HTML-документе с тем же внешним правилом CSS. Браузер сообщил:

Вывод с сохраненным ID сэкономил 156 байт, примерно 35.7% исходника. Он на 18 байт больше стандартного вывода и сохранил нужное поведение. Пробелы, окончания строк, версии и форматирование вывода могут изменить ваши количества байт.

В этом тесте все три копии сохранили viewBox="0 0 160 160". Мы проверили видимый результат и вычисленную заливку браузера. Мы не измеряли сетевое время передачи и не проверяли все браузеры, редакторы, возможности SVG или интеграции сборки.

Настройте параметры под конкретную зависимость

Если только несколько ID — публичные привязки, cleanupIds также предоставляет preserve и preservePrefixes. Используйте их, когда можете назвать зависимость, затем повторите тот же тест потребителя. Если несколько SVG будут встроены вместе, проверьте также повторяющиеся ID. Сохранение уже дублированного ID не делает его уникальным; переименование требует обновления потребителей.

Стиль или скрипт внутри SVG может менять поведение оптимизатора. Документация cleanupIds описывает защитный механизм, приостанавливающий очистку при наличии этих элементов. Не распространяйте его на CSS другого документа и не запускайте очистку принудительно без понимания ссылок, зависящих от ID.

Числовую точность рассматривайте отдельно. Меньше десятичных знаков может уменьшить разметку, но допустимое изменение зависит от масштаба координат и конечного размера. Проверяйте маленькие зазоры, углы и кривые в размерах использования. Успешная проверка ID ничего не говорит об этих деталях.

Сохраняйте viewBox, если макет зависит от его масштабирования. Документация removeViewBox предупреждает о последствиях для масштаба и обрезки. Он не входит в документированный стандартный набор этого примера; явное добавление — отдельное решение. Не копируйте старую конфигурацию без проверки версии и набора, для которых она написана.

Для контура с большим количеством узлов после трассировки оптимизация разметки и намеренная очистка узлов также отвечают на разные вопросы. Используйте руководство по узлам SVG, чтобы определить необходимость упрощения геометрии, и сравните силуэт после редактирования. Меньший исходник не означает автоматически более чистый контур реза.

Проверьте копию для передачи в месте использования

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

Для веб-графики проверьте итоговый результат сборки вместе с локальным оптимизированным файлом. Фреймворк или сборщик может позднее выполнить собственную оптимизацию. Повторите тест, если передаваемая разметка отличается.

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

Оптимизация файла также отличается от сжатия при передаче. Руководство SVGZ и SVG демонстрирует цикл gzip с восстановлением идентичных исходных байт. SVGO меняет исходник перед передачей; gzip затем может закодировать эти байты. Сравнивайте каждую операцию с ее целью.

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

Если векторный оригинал отсутствует и есть только плоский PNG или JPG, процесс преобразования изображения в вектор PerfectVector может помочь подготовить вариант SVG. Сравните результат с исходником и проверьте отверстия, мелкие детали и отдельные области до принятия. После проверки графики добавьте нужные странице ID или группы, затем оптимизируйте копию для передачи и протестируйте привязки.

PerfectVector не является оптимизатором существующего SVG и не восстанавливает селекторы сайта. Используйте векторный оригинал, если он есть. Сохраните фото в растре, если плавные тоновые детали важнее редактируемых границ. Руководства блога по подготовке вектора описывают выбор исходников.

Частые вопросы

Делает ли отключение cleanupIds оптимизацию любого SVG безопасной? Нет. Оно сохраняет ID от удаления и сокращения этим плагином, но другие плагины могут менять стили, группы, фигуры и данные контуров. Проверяйте возможности и ссылки, используемые процессом получателя.

Почему оптимизированный SVG выглядит правильно отдельно, но неправильно на странице? Самостоятельный предпросмотр может не задействовать внешний CSS и скрипты. В примере собственная коралловая заливка SVG отображалась нормально, а золотое перекрашивание страницей не работало из-за удаленного выбранного ID.

Стоит ли оптимизировать единственный редактируемый оригинал? Сохраните оригинал и запишите оптимизированную копию для передачи. Файл может правильно отображаться после оптимизации, хотя структура объектов станет менее удобной для дальнейшего редактирования.

Может ли SVGO превратить PNG в векторные контуры? Нет. SVGO обрабатывает разметку SVG. Трассировка растра в вектор — предыдущая операция, когда нужна редактируемая геометрия и нет подходящего векторного оригинала.

Источники

1. SVGO repository — Объясняет установку, вывод командной строки, загрузку конфигурации и API optimize.
2. SVGO default preset — Перечисляет плагины и описывает переопределения и различия интеграций.
3. SVGO cleanupIds — Описывает удаление, сокращение и сохранение ID и связанные защитные механизмы.
4. SVGO removeViewBox — Объясняет риск масштабирования при явном удалении viewBox.

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