За статистикою 60% людей у світі - це візуали, тобто люди, що сприймають довкілля очима. Інші 40% розподіляються між аудіалами (сприйняття на слух) та кінестетиків (сприйняття на дотик). Це умовне розподілення, але воно важливе при розробці сайтів. Безумовно, сайт, на якому є цікаві фото, ілюстрації, анімація завжди виглядає більш привабливо, ніж просто текстовий контент.
Але ж тут є певні проблеми. Картинку хочеться показувати якісну, а там де якість, там великі розміри файлів. А там, де великі розміри – там проблема завантаження сторінки для користувача, який вимушений чекати, чекати… Та він і чекати не буде – просто піде до іншого ресурсу. Тому приходиться постійно балансувати між красою та зручністю.
І зараз на багатьох сайтах виходять з того, що статичні або анімовані зображення (png, jpg, gif) розміщують максимально стислими, втрачаючи якість зображення.
Все більше й більше набирає обертів тренд на векторні зображення. У даному пості говоримо про SVG формат (Scalable Vector Graphics).
SVG – це векторний графічний формат зображень, що легко масштабується без втрати якості та може бути як статичним зображенням, так і анімованим.
Ключова цінність цього формату - необмежена можливість масштабування зображення без витрати якості та з невеликим розміром файлу.
Це означає, що де б ви не дивилися сторінку з SVG зображенням: на мобільному, на звичайному чи retina дисплеї – якість зображення буде однаково високою, і це зображення швидко завантажиться разом з текстовим контентом.
В першу чергу SVG формат рекомендовано використовувати у розробці саме адаптивних сайтів, бо від роздільної здатності екрану напряму залежить розмір зображень.
Де його використовувати на сайті:
- Логотипи
- Іконки
- Анімовані елементи сайту
- Фонові зображення
- Кнопки
- Діаграми
І ще декілька приємних бонусів
1. Якщо svg зображення інтегроване у сторінку html, то деякі реакції сайту на дію користувача (як то зміна кольору кнопки або іконки при наведенні миші) можна реалізувати за допомогою стилів CSS.
Щоб зовсім було зрозуміло наведемо приклад:
У вас на сайті є іконки із соціальними мережами. Коли користувач наводить мишкою на якусь з іконок, то вона змінює колір, тим самим показує, що вона активна і можна на неї клікнути.
2. SVG спрайт.
Спрайт – це один графічний файл, що поєднує в собі декілька зображень: іконки, смайлики, логотипи. Завдяки позиціонуванню фонового зображення CSS демонструється тільки необхідна частина графіки. Це використовується для прискорення завантаження сайту завдяки тому, що зменшується кількість запитів на сервер.
Ну, це вже суто технічні властивості.
Для простих користувачів – власників сайтів, висновок один: SVG формат рулить, бо значно прискорить завантаження сайту для користувача і збереже красу та якість зображень на ньому.
Є, правда, одне застереження! Не намагайтеся растрові зображення перевести у svg формат – нічого нормального з цього не вийде.