Когда мне следует использовать SVG или SVGZ для веб-графики?

Насколько я понимаю,

SVGZ — это сжатый тип файла SVG. Я люблю использовать изображения SVG и имею большой опыт работы с ними.

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

Я использую SVG для адаптивной графики при создании адаптивных веб-сайтов. Я также использую их, так как мой любимый стиль дизайна — векторная графика. Моя самая сильная сторона дизайна — это иллюстратор, особенно когда дело доходит до графического дизайна.

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

Особенно фоновые элементы, такие как город, занимающий всю страницу, пока я анимирую мерцание огней и так далее.

Если файл сжат, потеряет ли он код SVG, чтобы я не мог его анимировать?

Есть ли причина, по которой я должен использовать SVGZ вместо SVG?

Обновлять

Что ж, я решил просто сделать SVG и SVGZ, чтобы посмотреть, как они работают с сетью, так как я узнал, что мои работы, древний CS3, могут спасти SVGZ!

После тестирования я столкнулся с очень неожиданной проблемой с типом файла SVGZ. (Проверено в Chrome, Firefox и IE). Если вы перейдете по прямому URL-адресу изображения, вы получите сообщение об ошибке. Я предполагаю, что вы не можете получить доступ к коду SVG для этих типов файлов, но после создания скрипки он даже не отображает изображение.

Они бесполезны для сети?

.svg

.svgz

JSFIDDLE

Похоже, что это может быть отчасти проблема с конфигурацией веб-сервера, .svgzкоторая должна обслуживаться с использованием правильного типа MIME, см . stackoverflow.com/questions/16725380/svgz-doesnt-display . Лично я всегда использую Raphael.js для SVG/векторной графики в Интернете, потому что мне нужна поддержка IE8.
Хм, спасибо за очень полезные ссылки. Есть ли причина использовать SVGZ? Я подумал, может быть, было бы неплохо уменьшить размер файла изображения. Мне просто любопытно, является ли это SVGZкаким-либо образом полезным для Интернета или действительно полезным в любом случае.
Если это сработает, это значительно сократит размер файла. Это может быть полезно, если вы используете интерактивность для чего-то сложного — например, для очень подробной карты мира в формате SVG, которую можно масштабировать. Это zозначает сжатие gzip, которое используется для уменьшения размера файла и почти ни для чего другого.
@JoshPowell: учитывая, что большинство http-серверов отправляют содержимое со сжатием gzip, я не вижу цели этого вопроса. А на некоторых серверах, если вы назовете свой файл .svg.gz, браузер получит информацию о том, что исходный файл не был сжат.

Ответы (2)

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

Ответ сервера для svgz необходимо настроить так, чтобы он включал «кодирование содержимого: gzip».

svg     Content-Type: image/svg+xml

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

Для веб-сервера Apache это можно сделать с помощью файла .htaccess:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Обратите внимание, что независимо от того, заархивируете ли вы его на лету или запечете перед размещением на сервере, Content-encoding должен указываться. Я думаю, что для таких ресурсов лучше предварительно сжать их. В противном случае вы потребляете процессор сервера для каждого запроса файла. Это может показаться не таким уж большим, но это своего рода проблема неоптимизации, которая приводит к падению, например, веб-сайта здравоохранения США.

Если ваш сервер или платформа хоть сколько-нибудь интеллектуальны, сжатие там оптимизировано, так как оно может кэшироваться. Это, безусловно, не та вещь, которая приведет к сбою вашего сайта, не говоря уже о Health.gov.
Знаете ли вы, есть ли способ просматривать файлы SVGZ локально в браузере без настройки локального веб-сервера?

Это может быть не тот ответ, который вы ожидаете, но для Интернета нет необходимости использовать какие-либо файлы SVGZ. Причина в том, что файл SVGZ — это просто файл SVG, предварительно сжатый Gzip.

Современные веб-серверы могут выполнять это сжатие сами перед обслуживанием актива (дополнительную информацию см. В этом ответе на StackOverflow), поэтому, если у вас есть SVG размером 300 КБ, который составляет 50 КБ при сжатии, он будет примерно таким же, когда Gzip автоматически веб-сервер. Таким образом, это будет не 300 КБ, а 50 КБ, а затем браузер будет распаковывать.

Вы уверены, что сжатый файл где-то кэшируется? Сжимать эти svg-ресурсы снова и снова для 5000 посетителей — это большой труд.
@bokan: некоторые серверы предлагают возможность предварительного сжатия содержимого путем добавления расширения файла .gz. Поэтому, если клиент ищет index.html, сервер ответит предварительно сжатым файлом с именем index.html.gz.
@ user2284570: Итак, вам нужно создать .gz вручную. В противном случае он будет сжимать файлы каждый раз, когда отправляет их, а это большая работа для сервера.
@bokan: Да, и это часто требует дополнительной настройки сервера, чем простое сжатие с кодировкой содержимого. Даже IE5 поддерживает это. создание скрипта для сжатия всех статических файлов внутри каталога остается простым. Во втором случае это экономит и место на диске, и пропускную способность.
Далеко не так, что нет необходимости использовать SVGZ. Сжатие файлов экономит место на стороне сервера, что часто является ограничивающим фактором в стоимости хостинга. Это также влияет на пропускную способность и скорость загрузки. Поскольку SVG — это текстовый формат, экономия огромна. Кроме того, сжатие файла только перед подачей увеличивает нагрузку на ЦП сервера, поскольку его необходимо выполнять неоднократно; это ужасно неэффективно в долгосрочной перспективе. Файлы SVGZ можно сжать один раз, сохраняя скорость загрузки и пропускную способность, экономя место в хранилище в долгосрочной перспективе и многократно экономя ЦП.
Когда мне следует использовать SVG или SVGZ для веб-графики?
СпросиСетьПолитика конфиденциальности1y, 1v