Від автора: в підтримку використання масштабованої векторної графіки або SVG в інтернеті говорить кілька позитивних факторів. Відносно невелика вага, безумовно, один з них. Однак тут є деякі застереження. Давайте розбиратися.
Переваги векторних зображень
В основі растрових зображень (JPEG, PNG і т. д.) лежить сітка з квадратних пікселів. Чим більше зображення, тим більше використовується пікселів, що збільшує розмір файлів.
Піксельна графіка погано масштабується, та це не єдиний мінус. Нижче представлено JPEG-зображення квітки з розмірами 300 х 225px:
А ось те ж зображення, але показане на більшому дозволі:
Зверніть увагу на нечіткі краї, розмиття і загальний спад якості зображення.
Зараз дуже багато пристроїв з ретина-екранами, і ризик отримати растрові зображення такої якості дуже великий. Один з виходів – зберігати зображення високого дозволу, що сильно вдарить по продуктивності.
Елементи srcset і picture
На щастя сучасний HTML дає нам рятувальне коло у вигляді адаптивних зображень (елементи srcset і picture). На момент написання статті обидва тега підтримуються в останніх версіях всіх основних браузерів за винятком IE11 і Opera Mini.
Мета адаптивних зображень – забезпечити пристрій зображенням з найкращим якістю. Це включає в себе підтримку зображення під різні дозволи екрану. Однак браузер сам завантажує саме те зображення, яке підходить під можливості доступного пристрою.
Хочете детально розібратися в цих техніках, прочитайте статтю Saurabh Kirtani «створення адаптивних зображень з допомогою srcset».
У коді srcset виглядає наступним чином:
Нижче представлений приклад тегу picture:
Наскільки видно, викачуватися буде всього одна версія зображення під пристрій, але вам все одно доведеться підготувати і завантажити на сервер безліч копій зображення. Це ніяк не вплине на продуктивність на сайті, але ви витратите свій час і завантажте сервер.
SVG не залежить від дозволу
Масштабування лежить в основі векторної графіки, а SVG – це формат векторних зображень на основі XML. SVG-зображення складаються з інструкцій по геометричній графіку (фігури, лінії тощо), які не залежать від розміру пікселів. З точки зору розміру файлу немає різниці, на якій розмір рендери зображення, просто тому що інструкції не змінюються.
Як ще один наслідок незалежності від дозволу – не потрібно робити копії одного зображення під різні пристрої. Один розмір підходить під будь-екран і виглядає чітко на всіх дозволах.
Тим не менше, є один фактор, який може негативно позначитися на розмірі SVG-файл, і це складність зображення. Чим складніше інструкції до зображення, тим більше вага файлу.
Пропозиції по збільшенню продуктивності SVG-файлів
Взагалі, в інтернеті використовується досить простий SVG: логотипи, карти, іконки і т. д. Швидше за все, у таких простих SVG-зображень буде маленький вагу в порівнянні з растровими копіями.
Однак можна зробити ряд кроків з ще більшою оптимізації розміру файлів, щоб ваші користувачі отримали неймовірний досвід роботи з вашим сайтом.
Парочка рад.
Піклуйтеся про продуктивності в дизайні з самого початку
Просту SVG-графіку можна кодити самому або з допомогою JS-бібліотек типу Snap.svg. Часто ви просто запускаєте векторний графічний редактор типу Adobe Illustrator.
Якщо ви працюєте в графічному редакторі, подумайте про спрощення SVG-коду, це знизить ризик поломки зображення після оптимізації.
Перший крок, який можна зробити – це вказати розмір полотна прямо у вашому графічному редакторі. Sarah Drasner рекомендує поставити 100 х 100px, плюс мінус, в залежності від вашого проекту. Так полотно буде не занадто маленьким і не буде генерувати багато знаків після коми, які ви навряд чи зможете прибрати, не зіпсувавши графіком. З іншого боку, розмір і не дуже великий. Велике полотно передбачає більше точок у маршруті.
Зменшення кількості точок маршруту відіграє вирішальну роль у зниженні ваги SVG-файл. Тобто потрібно намагатися використовувати фігури замість маршрутів там, де це можливо, а також об’єднувати маршрути, якщо тільки ви не плануєте анімувати їх окремо. Adobe Illustrator є панель Simplify, на якій можна прибрати ще більше точок у маршруті. Швидкий урок з цієї панелі.
Розумний експорт SVG
Використовуйте всі можливості по експорту у своєму графічному редакторі. Якщо цього не робити, можна отримати SVG-код з пропрієтарної розміткою і сміттям, який вам зовсім не потрібен.
Наприклад, якщо у вас остання версія Adobe Illustrator (CC 2017 на момент написання статті), експортуйте SVG-графіку за допомогою пункту Export As, вибравши при цьому формат .svg:
В панелі Illustrator є кілька налаштувань, за допомогою яких можна знизити вага файлу і очистити вихідні дані. У підсумку ви отримаєте майже готову розмітку. Навіть можна подивитися код, натиснувши на кнопку Show Code.
Вичавіть ще більше байт з допомогою інструментів щодо оптимізації SVG
Після експорту SVG-графіку можна ще сильніше стиснути за допомогою одного з чудових інструментів оптимізації SVG. SVGOMG (і його веб GUI-аналог) і SVG Editor від Peter Collingridge – найпопулярніші інструменти. Більш детально про SVGOMG можете прочитати в статті Guillaume Cedric Marty по оптимізації SVG-зображень.
Увімкніть доставку стислих SVG-файлів
Останній крок щодо оптимізації SVG – активація gzip-стиснення на сервері. SVG – це всього лише XML, тому вона без проблем піддається стисненню.
З точки зору стиснення значні вигоди. У додатку J специфікації SVG 1.1 є порівняльна таблиця з прикладами нестиснутих і стислих SVG-файлів. У переважній більшості результати на користь стиснення, розмір файлу зменшується на 77-84%.
Висновок
SVG-графіка – відмінний вибір для інтернету. Така графіка використовується для створення простих іконок, логотипів і т. д. і часто має більшу продуктивність, ніж растрові копії. Особливо продуктивність буде помітна, якщо ви прийміть запобіжні заходи, описані в цій статті.
