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

Из моего понимания,

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

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

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

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

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

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

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

Обновить

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

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

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

.svg

.svgz

JSFIDDLE

adobe-illustrator website-design vector svg Джош Пауэлл
источник

Похоже, что это может быть отчасти проблема с настройкой конфигурации веб-сервера, .svgzкоторая должна обслуживаться с использованием правильного типа MIME, см. Stackoverflow.com/questions/16725380/svgz-doesnt-display . Лично я всегда использую Raphael.js для SVG / векторной графики в Интернете, потому что мне нужна поддержка IE8

user56reinstatemonica8

Хм, спасибо за очень полезные ссылки. Есть ли причина использовать SVGZ? Я подумал, может быть, было бы неплохо сократить размер файла изображения. Мне просто любопытно, SVGZполезен ли сайт для сети или действительно полезен в любом случае.

Джош Пауэлл

Если это сработает, это значительно уменьшит размер файла. Это может быть полезно, если вы используете интерактивность на чем-то сложном, например, на очень подробной карте мира SVG с возможностью масштабирования. В zсредство GZIP сжатие , которое используется , чтобы сократить размер файла и довольно много ничего.

user56reinstatemonica8

@JoshPowell: учитывая, что большинство http-серверов отправляют содержимое со сжатием gzip, я не вижу цели этого вопроса. А на некоторых серверах, если вы назовете свой файл .svg.gz, браузер получит информацию о том, что исходный файл не был сжат.

user2284570 10.06.15

Ответы:

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

Ответ сервера для svgz должен быть настроен для включения «Content-encoding: 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

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

Горацио
источник

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

Джош Кениг

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

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

Тейлор Яско
источник

Вы уверены, что сжатый файл где-то кешируется? Снова и снова нужно сжать эти ресурсы SVG для 5000 посетителей.

Бокан,

@bokan: некоторые серверы предлагают возможность предварительно сжать содержимое, добавив расширение файла .gz. Поэтому, если клиент ищет файл index.html, сервер ответит предварительно сжатым файлом с именем index.html.gz.

user2284570 10.06.15

@ user2284570: Таким образом, вы должны создать .gz вручную. В противном случае он будет сжимать файлы каждый раз, когда отправляет их, и это большая работа для сервера.

bokan

@bokan: Да, и это часто требует много дополнительных настроек сервера, чем простое сжатие с кодированием контента. Даже IE5 поддерживает это. Создание скрипта для сжатия всех статических файлов внутри директории остается простым. Во втором случае это экономит как дисковое пространство, так и пропускную способность.

user2284570 12.06.15