Оптимизация SVG

Вставьте SVG или откройте файл, чтобы уменьшить его размер. Инструмент удаляет лишние данные и показывает рисунок до и после обработки. Для компактного кода включите «Оптимизировать SVG» и выберите «Сжать», а для удобного чтения — «Форматировать».

Как пользоваться

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

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

«Знаков после запятой» задаёт точность координат: 3 подходит почти всегда, 1–2 дают меньший файл, но мелкие детали могут сместиться — проверьте по сравнению. Оптимизацию выполняет SVGO прямо в браузере, файл не отправляется на сервер.

Для вашего удобства рекомендую использовать полноэкранный режим.

Результат
Знаков после запятой

Оптимизация уменьшает размер SVG, удаляя лишние данные. Выберите «Сжать» для компактного кода или «Форматировать» для удобного чтения. Оба варианта работают с оптимизацией и без неё.

Обрабатываем…

Исходный SVG

Файл не выбран
UTF-8, до 2 МБ. Файл можно перетащить на поле. Файл обрабатывается только в вашем браузере.
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Editor 1.0 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
  <title>Галочка</title>
  <defs>
    <linearGradient id="check-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#336699"/>
      <stop offset="100%" stop-color="#22aa77"/>
    </linearGradient>
  </defs>
  <g fill="none" stroke="url(#check-gradient)">
    <path d="M 5.000 12.000 L 9.000 16.000 L 19.000 6.000" stroke-width="2.000" stroke-linecap="round" stroke-linejoin="round"/>
  </g>
</svg>

Результат

Для оптимизации включите JavaScript. Инструмент убирает из SVG комментарии, метаданные редакторов и лишние знаки в числах, сохраняя viewBox, ID и доступные названия.


Что сохраняется


    
    
  • viewBox всегда остаётся: без него рисунок не масштабируется под размер блока.
    • 
    
  • ID — по умолчанию сохраняются вместе с элементами, у которых они есть. На ID ссылаются градиенты и маски (url(#id)), <use href="#id">, внешний CSS и JavaScript. Выключите настройку, если SVG используется только как картинка: тогда ID сократятся до одной буквы, а неиспользуемые элементы удалятся.
    • 
    
  • title и desc — доступное название и описание рисунка для скринридеров. Если SVG встроен в разметку, название лучше оставить.
    • 



Форматирование без оптимизации


При выключенной настройке «Оптимизировать SVG» оба варианта оформления проверяют SVG по правилам XML — незакрытый тег, атрибут без кавычек или неэкранированный & подсвечиваются на месте, — а затем меняются только пробелы между элементами. Текст в text и tspan, xml:space="preserve", CDATA и комментарии остаются как есть. Так удобно прочитать SVG, экспортированный в одну строку, или подготовить его к ручной правке.


Скрипты в SVG


SVG может содержать <script> и атрибуты-обработчики вроде onload. Встроенный в страницу или открытый по прямой ссылке такой файл выполняет код. При включённой оптимизации инструмент по умолчанию их удаляет — иконкам и иллюстрациям скрипты не нужны. Предпросмотр показывает рисунок через <img>: в этом режиме браузер не выполняет скрипты и не загружает внешние файлы, поэтому рисунок со ссылками на внешние изображения может выглядеть неполным.




Вопросы и ответы


Почему рисунок после оптимизации отличается?


Чаще всего из-за точности чисел: при 1–2 знаках мелкие кривые смещаются. Увеличьте точность до 3 или 5. Если отличается цвет или пропал элемент, на него мог ссылаться внешний CSS по ID — включите «Сохранять ID».


Нужно ли сжимать SVG, если сервер включает gzip?


Да: gzip сжимает повторы, но не удаляет лишние данные. Оптимизация и gzip дополняют друг друга — в статусе видно, сколько удалось сэкономить после обоих.


Как вставить оптимизированный SVG на страницу?


Как файл через <img> с атрибутом alt, как фон через background-image или прямо в разметку — тогда его частями можно управлять из CSS, например менять цвет через currentColor.