Сжатие файлов SVG

SVG — это код, а не пиксели

Файл SVG (Scalable Vector Graphics) — это текстовый документ в формате XML, описывающий фигуры: контуры, круги, градиенты, текст. Поскольку в нём хранятся инструкции, а не пиксели, он остаётся чётким при любом размере — от фавиконки в 16 пикселей до рекламного щита. Иконки, логотипы, иллюстрации, диаграммы и карты в интернете часто сделаны в SVG, а сам формат — стандарт W3C с 2001 года.

У текстовой природы есть побочный эффект: размер файла зависит от того, насколько многословно его записал редактор, а не от размера показа картинки. Два SVG, которые отображаются одинаково, могут различаться по весу в несколько раз.

Что утяжеляет SVG сверх необходимого

• Метаданные редактора. Illustrator, Inkscape, Figma и Sketch добавляют свои пространства имён, названия слоёв, комментарии экспорта, а иногда и встроенную копию редактируемого документа.
• Избыточная точность. Координаты вида 12.483920174, хотя 12.48 при любом реальном размере отображается точно так же.
• Лишняя структура. Пустые группы, скрытые слои, атрибуты со значениями по умолчанию, неиспользуемые определения и стили, которые можно записать короче.
• Длинный синтаксис контуров. Абсолютные команды там, где относительные короче, повторяющиеся буквы команд, ненужные пробелы.
• Встроенные растровые изображения. Фото, вставленное в иллюстрацию, хранится внутри SVG как текст в Base64, а это примерно на треть больше исходного файла изображения.

Как инструмент оптимизирует SVG

Инструмент запускает в браузере SVGO — популярный открытый оптимизатор SVG. Он удаляет метаданные и комментарии, схлопывает бесполезные группы, сокращает данные контуров, округляет числа по умолчанию до 3 знаков после запятой (можно выбрать от 0 до 6) и объединяет стили, повторяя проходы, пока ничего не перестанет меняться. Результат — обычный SVG, который можно открыть в любом редакторе или вставить в HTML. В наших тестах на восьми SVG — от вручную оптимизированных иконок до экспорта из Inkscape, полного данных редактора, — экономия составила от 8 до 42 %.

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

Серверы обычно отдают SVG со сжатием gzip или Brotli, которое ещё раз уменьшает текст по пути в браузер. Оптимизация и серверное сжатие складываются, ведь удалённые данные вообще не нужно сжимать.

Когда оптимизированный SVG ломается

• CSS или JavaScript больше не находят элемент. Оптимизаторы сокращают или удаляют ID и имена классов, которые внутри файла выглядят неиспользуемыми. Если на них ссылаются стили или скрипты вашей страницы, проверьте результат перед публикацией.
• Иконка перестала масштабироваться. Для правильного изменения размера SVG нужен атрибут viewBox. Инструмент его сохраняет, поэтому проверьте, был ли он в оригинале: SVG только с фиксированными шириной и высотой никогда хорошо не масштабировался.
• Мелкие фигуры искажаются. Очень маленькие иконки, нарисованные на большом холсте, могут пострадать от округления. При точности по умолчанию это редкость.
• Файл в основном состоит из встроенного фото. Экспортируйте фото отдельным JPG или WebP и подключите ссылкой либо переведите всю графику в растр.

Вопросы о SVG

Связанные страницы

Растровые изображения обрабатывает компрессор изображений. О том, что выполняется локально и почему, читайте на странице «Как это работает».