Коли я повинен використовувати 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

— user56reinstatemonica8

Хм, дякую за дуже корисні посилання. Чи є підстави використовувати SVGZ? Я думав, може, було б непогано скоротити розмір файлу зображення. Мені просто цікаво, чи SVGZкорисна послуга в Інтернеті чи корисна в будь-якому випадку.

— Джош Пауелл

Якщо він працює, він скоротить розмір файлу досить багато. Це може бути корисно, якщо ви використовуєте інтерактивність на чомусь складному - наприклад, дуже детальній карті світу SVG, яка масштабується. Засіб zстиснення gzip, яке використовується для зменшення розміру файлу і майже нічого іншого.

— користувач56reinstatemonica8

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

— користувач2284570

Відповіді:

Підтримка стисненого 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

Зауважте, що незалежно від того, чи зациклюєте ви його на льоту або запекти його перед тим, як розмістити його на сервері, кодування вмісту повинно бути натякано. Для таких активів, я думаю, що краще їх попередньо стиснути. В іншому випадку ви харчуєтеся процесором сервера для кожного запиту файлу. Це може здатися не дуже, але це така проблема з неоптимізацією, яка призводить, наприклад, до веб-сайту охорони здоров’я США.

— Гораціо
джерело

Якщо ваш сервер або платформа взагалі розумні, виконання компресії там дуже оптимізовано, оскільки його можна кешувати. Це, звичайно, не та річ, яка призведе до збою вашого веб-сайту, не кажучи вже про healthcare.gov.

— Josh Koenig

Можливо, це не відповідь, яку ви очікуєте, але для Інтернету користуватися файлами SVGZ справді не потрібно. Причина полягає в тому, що файл SVGZ - це просто SVG, який був попередньо Gziped.

Сучасні веб-сервери можуть зробити це Gzipping самостійно, перш ніж обслуговувати об’єкт (див. Цю відповідь на StackOverflow для отримання додаткової інформації), тому якщо у вас SVG 300KB, що становить 50 КБ при стисненні, він буде приблизно таким же, коли Gzipped веб-сервером автоматично. Таким чином, це не буде 300 КБ вниз за лінією, це буде 50 КБ, а потім браузер не буде стискати.

— Тейлор Ясько
джерело

Ви впевнені, що стиснутий файл десь кешований? Потрібно багато роботи, щоб знову і знову збирати ці SVG-активи для 5000 відвідувачів.

— bokan

@bokan: деякі сервери пропонують можливість попередньо стиснути вміст, додавши розширення файлу .gz. Тож якщо клієнт шукає index.html, сервер відповість заздалегідь стиснутим файлом на ім’я index.html.gz.

— користувач2284570

@ user2284570: Отже, ви повинні створити .gz вручну. В іншому випадку він буде стискати файли кожного разу, коли надсилає їх, і це велика робота для сервера.

— bokan

@bokan: Так, і це часто вимагає багато додаткової конфігурації сервера, ніж просто стиснення кодування вмісту. Навіть IE5 підтримують це. створення сценарію для стиснення всіх статичних файлів всередині каталогу залишається простим. У другому випадку це економить як дисковий простір, так і пропускну здатність.

— користувач2284570