SVGZ и SVG: выбор файла для редактирования или передачи

SVGZ — файл SVG, сжатый gzip. После распаковки вы получаете документ SVG, включая контуры, цвета, текст и встроенные изображения. Регистрация медиатипа SVG в W3C определяет .svgz как псевдоним .svg.gz.

Выбирайте SVGZ или SVG в зависимости от того, как получатель будет работать с файлом. Оставляйте обычный .svg, если кому-то нужна читаемая разметка или приложение ожидает этот формат. Используйте .svgz, если получатель его поддерживает и есть причина передать сжатый файл. Для сайта проверьте HTTP-сжатие перед сменой имен файлов: URL с окончанием .svg уже может передавать сжатое содержимое.

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

Что меняется при превращении SVG в SVGZ?

Руководство MDN по типам файлов SVG различает обычный текстовый SVG и SVG, сжатый gzip, и объясняет необходимую SVGZ конфигурацию сервера. Если базовый документ незнаком, начните с содержимого файла SVG.

Сжатая копия — полезная упаковка. Храните редактируемый оригинал отдельно для проверки объектов, исправлений и экспорта формы, нужной следующему инструменту.

Попробуйте сжатие и распаковку SVGZ на небольшом значке

Эта исходная иллюстрация содержит бирюзовый шестиугольник, коралловое солнце и светлую гору. Сохраните следующее как badge.svg во временной папке:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
  <path d="m60 78 10-16 11 16-11-5Z" fill="#a8d9d3"/>
</svg>

В системе с gzip, cmp и wc выполните эти команды в той папке. Используйте новые имена выходных файлов, если эти файлы уже содержат нужную работу.

gzip -n -c badge.svg > badge.svgz
gzip -dc badge.svgz > roundtrip.svg
cmp badge.svg roundtrip.svg
wc -c badge.svg badge.svgz roundtrip.svg

Первая команда записывает сжатую копию, сохраняя исходник. Параметр -n исключает исходное имя файла и временную метку из заголовка gzip. Вторая команда декодирует сжатую копию в другой файл. cmp проверяет байты, а wc -c сообщает их количество.

Мы выполнили эту последовательность с Apple gzip 457.140.3. Все команды завершились успешно, а cmp не нашел различий между исходным и декодированным SVG.

Сжатый файл сэкономил 89 байтов, около 26.8% размера этого исходника. Другие пробелы, окончания строк, метаданные, графика или настройки сжатия могут изменить результат. Сравнение байтов подтверждает, что этот цикл сжатия и распаковки сохранил исходник. Оно не измеряет время передачи в браузере, производительность отрисовки или совместимость с приложением редактирования.

Если нужно только открыть SVGZ в редакторе, ожидающем SVG, подходящая операция — распаковка. Переименование badge.svgz в badge.svg оставляет сжатые байты. Аналогично переименование SVG в SVGZ не запускает gzip.

Отделяйте сжатие от очистки графики

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

Оптимизация разметки — другая операция. Удаление метаданных, переписывание чисел или объединение совместимых фигур меняет исходный документ перед сжатием. Цикл сжатия и распаковки gzip с побайтовым совпадением ничего из этого не делает. Если инструмент оптимизации также редактирует SVG, проверяйте его вывод независимо, а не приписывайте все изменения сжатию. Руководство по конфигурации SVGO и сохранению ID демонстрирует такую проверку на исходном значке, чей внешний CSS-хук исчезает при стандартном наборе настроек.

SVG также может содержать растровое изображение. Сжатие этого документа сохраняет встроенное изображение; оно не создает редактируемые контуры вокруг объектов картинки. Диагностика встроенного растра помогает отличить контейнер изображения от графики из векторных контуров.

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

Сайт может сжимать обычные ответы SVG

HTTP-сжатие независимо от имени файла в URL. Сервер может получить запрос badge.svg и отправить сжатое представление этого SVG. Руководство MDN по HTTP-сжатию описывает согласование: запрос сообщает поддерживаемые кодирования, а ответ указывает использованное. Когда представление меняется по Accept-Encoding, ответ использует Vary: Accept-Encoding, чтобы кеши различали эти версии.

Для ответа SVG, закодированного gzip, соответствующие заголовки такие:

Content-Type: image/svg+xml
Content-Encoding: gzip

Content-Type определяет декодированный медиатип. Content-Encoding сообщает получателю, как декодировать тело ответа. Справка MDN по Content-Encoding объясняет это различие. Эти заголовки должны описывать реально отправленные байты; добавление Content-Encoding: gzip к несжатому SVG не сжимает его.

Для хранимого .svgz, отдаваемого как SVG-изображение, рекомендации MDN по серверу SVGZ требуют медиатип SVG и кодирование содержимого gzip. Проверьте итоговый ответ на панели Network браузера, включая поведение CDN. Успешное открытие локального файла не проверяет этот ответ.

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

Передавайте файл, который может использовать следующее приложение

Для редактируемой передачи выясните, какой формат импортирует получатель. Если он принимает SVG, но отвергает SVGZ, дайте распакованный SVG и проверьте эту копию. Распаковка не добавляет поддержку функций SVG, которых само приложение не понимает.

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

Если файл выглядит пустым, сначала установите, декодировался ли он в читаемый SVG. Затем исследуйте документ и его контекст отображения с руководством по пустому SVG. Повторное сжатие не исправляет невидимое окрашивание, отсутствующее содержимое или неподходящий холст.

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

Когда исходнику все еще нужны векторные контуры

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

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

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

Выше ли качество SVGZ, чем SVG? Нет. Сжатие gzip меняет хранимое представление. Правильная распаковка восстанавливает исходник SVG; она не улучшает контуры, цвета или встроенные изображения.

Как превратить SVGZ в SVG? Распакуйте его инструментом, обрабатывающим gzip, затем сохраните декодированный SVG. Например, gzip -dc badge.svgz > roundtrip.svg записывает декодированную копию. Одно переименование расширения не выполняет эту операцию.

Всегда ли SVGZ ускоряет сайт? Расширение не дает фиксированного преимущества скорости. Обычный ответ SVG уже может использовать HTTP-сжатие. Проверяйте реальные заголовки ответа, переданные байты, условия кеша и поведение страницы.

Уменьшает ли сжатие SVG количество узлов? Нет. Gzip сохраняет исходник при декодировании. Упрощение контуров или другая оптимизация SVG — отдельная операция, требующая собственной проверки графики.

Источники

1. W3C — SVG media-type registration — Определяет SVGZ как SVG, сжатый gzip, и его связь с SVG.GZ.
2. MDN — Getting started with SVG — Различает формы файлов и описывает заголовки ответа SVGZ.
3. MDN — Content-Encoding — Объясняет декодирование и связь кодирования и медиатипа.
4. MDN — Compression in HTTP — Рассматривает согласование сжатия ответа и варианты кеширования.

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