SVG

Чи траплялося вам, що зображення на сайті втрачають чіткість при збільшенні, або займають надто багато місця в пам’яті?

SVG – це формат векторної графіки, який зберігає ідеальну якість при будь-якому масштабуванні.

У цій статті ми розглянемо, як працює SVG, чим він відрізняється від растрових форматів і коли його використання приносить найбільшу користь. Поділимося прикладами та порадами, щоб ви могли ефективно застосовувати цей формат у своїх проєктах.

Формат SVG

Що це таке? Формат SVG – це мова розмітки для створення зображень, текстів у масштабованій векторній графіці. На відміну від растрового формату, дозволяє «розтягувати» об’єкти до будь-яких розмірів без втрати якості.

Де застосовується? SVG формат активно використовується дизайнерами для розроблення логотипів, інфографіки, різних візуальних ефектів, ілюстрацій тощо. Для створення і перегляду файлів у цьому форматі застосовуються різні додатки та онлайн-сервіси.

Суть формату SVG

SVG розшифровується як Scalable Vector Graphics, що в перекладі українською означає «масштабована векторна графіка». Цей формат є повноцінною мовою розмітки, заснованою на XML. Він використовується для опису двовимірних векторних зображень. Стандарт був розроблений Консорціумом Word Wide Web (W3C). Файли зображень мають розширення *.svg і *.svgz.

На відміну від растрових форматів (JPG, PNG, TIFF, GIF), векторний формат SVG підтримує практично безмежне масштабування без втрати якості.

Растрові зображення, як відомо, формуються окремими пікселями (точками). Це забезпечує чудову якість фотографій, однак при масштабуванні може призводити до спотворень.

Своєю чергою, векторна графіка складається з векторів, у яких міститься інформація про форму та колір зображення, представлена у вигляді математичних формул. Це дає змогу створювати зображення з чіткими лініями незалежно від ступеня масштабування, оскільки тут відсутня прив’язка до пікселів.

Векторні SVG-зображення однаково добре адаптуються до будь-якої роздільної здатності та до будь-якого розміру екрана. Файли SVG також мають менший розмір порівняно з аналогічними растровими зображеннями. Таким чином, цей формат зручний для використання графіки у веб-дизайні, різних презентаціях та інших проектах.

Переваги формату SVG у роботі дизайнерів

Перед вивченням особливостей використання дизайнерами цього формату у своїй роботі корисно розглянути саму професію більш детально. У середовищі IT-фахівців заведено розділяти веб-дизайн і верстку сайтів. Однак таке розмежування не завжди відповідає дійсності під час розроблення веб-проектів.

Створення справді якісного і працюючого дизайну веб-сторінки неможливе без чіткого розуміння того, як вона буде завантажуватися і відображатися в браузері, яким чином її потрібно адаптувати до різних розмірів екрану і в разі зміни контенту. Тому професію веб-дизайнера слід вважати насамперед технічною, що вимагає логічного мислення.

Більш доречним тут буде термін «веб-інженер». Художні ж здібності фахівця відходять на другий план. Веб-дизайнер, який не володіє навичками верстки, показуватиме поганий результат.

Визначившись з істинною роллю сучасного дизайнера, далі можна перейти до обговорення переваг, які такий фахівець отримає під час використання технології SVG. Якщо говорити коротко, її застосування дає змогу підвищити швидкість і якість роботи. Кількість операцій скорочується. А отже, дизайнер витрачає менше часу на розробку проєкту.

Розглянемо переваги використання SVG детальніше:

• Формат простіше і гнучкіше модифікується порівняно з растровою графікою. За допомогою CSS можна легко змінити розташування, форму, розмір, пропорції, колір, заливку та інші властивості складових частин зображення, а також змінити їх на самій сторінці. На відміну від роботи з растром, де потрібно зберігати вихідний файл у форматі з шарами та експортувати зміни, у роботі з SVG такої необхідності не виникає.
• Екранам із високою чіткістю достатньо одного зображення в SVG, тоді як для растрових графічних зображень потрібно створювати щонайменше 3 варіанти картинки: в оригінальному, подвоєному та потроєному розмірах. В будь-якому векторному зображенні, пікселі самі формуються перед показом залежно від заданого піксельного розміру. Додаткових дій з боку користувача докладати не потрібно.
• Цей формат забезпечує відносно швидку швидкість завантаження, що особливо важливо для дизайнерів, адже надто повільне завантаження сторінки може призвести до зниження конверсії проекту. Файли SVG менші за розміром, ніж їхні растрові версії, до того ж один SVG-файл може вміщати в собі кілька версій однієї і тієї ж картинки для показу кожної за певними умовами, що помітно знижує кількість запитів до сервера. Також SVG підтримує так зване клонування.
• Формат SVG графіки вирізняється легкою адаптацією, що дуже корисно, коли потрібно на вузьких в’юпортах демонструвати спрощену версію логотипу сайту. Усе це можна реалізувати, зробивши всього один запит до сервера.
• SVG підтримує інтерактивність. Інакше кажучи, у файлі зображення можуть зберігатися різні атрибути – посилання, скрипти тощо. Ці інтерактивні елементи здатні реагувати на дії користувача. Таким чином реалізується, наприклад, анімація.
  Нарешті, працювати з цим форматом можна не тільки в пропрієтарному, а й у вільному ПЗ. Крім Adobe Illustrator, підтримка є, наприклад, у безкоштовній програмі Inkscape.

Сфери використання формату SVG

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

Тепер же цю проблему розв’язано, і SVG уже досить широко застосовують у веб-розробці. Далі перелічимо найпоширеніші випадки використання векторних зображень дизайнерами:

Логотипи та піктограми

Для збереження чіткості та якості всіх елементів інтерфейсу (від дрібних кнопок до великих екранних заставок) на екранах із будь-якою роздільною здатністю сьогодні необхідно використовувати саме векторний формат.

Він дає розробникам повний контроль над кожною лінією, формою та елементом зображення, а також полегшує позиціонування елементів і дає змогу маніпулювати ними.

Інфографіка

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

Візуальні ефекти

Користувачі можуть легко створювати різні візуальні ефекти. Наприклад, доступні зміна форми букв і елементів, трансформація одного логотипу в інший тощо.

Анімація

Векторний формат зображень SVG є також зручним інструментом для створення CSS-анімації. Це спрощує роботу фронтенд-програмістам, оскільки тепер не потрібне вивчення додаткових технік. Крім того, доступний інструмент SMIL SVG, що дає змогу анімувати векторні зображення і надає розробникам ще більше можливостей, ніж звичайна CSS-анімація.

Ілюстрації

Прості малюнки та ілюстрації легко конвертувати в SVG, що робить формат практично ідеальним для створення скетчів, всіляких схем та ілюстрацій.

Інтерфейси

За допомогою SVG зручно створювати складні інтерфейси в інтеграції із завантаженими інтернет-додатками (RIA, rich internet application). Наявні властивості формату дають змогу забезпечувати легкість інтерфейсних елементів, які за потреби можна анімувати та робити ще привабливішими.

9 додатків для формату SVG

Безліч сучасних редакторів і сервісів підтримує роботу з форматом SVG. Чим відкрити ці файли, якщо цих додатків немає в наявності? Навіть у такій ситуації переглядати SVG-зображення можна – для цього підійде будь-який популярний браузер.

Що ж стосується спеціалізованих програмних рішень, що включають в себе і онлайн-сервіси, то тут виявляється досить великий список. Більша частина програм працює під управлінням MS Windows. Деякі з них розглянемо детальніше.

Inkscape

Цей кросплатформний редактор векторної графіки поширюється вільно і безкоштовно. Крім Windows підтримується робота в системах сімейства Linux, а також у MacOS.

Користувачам пропонується досить значний функціонал. Inkscape виділяється наявністю власного векторного формату на основі стандарту XML. Редактор загалом орієнтований на професійних дизайнерів.

GIMP

Ця багатофункціональна програма примітна тим, що підтримує як растрову, так і векторну графіку. Також є безкоштовною і кросплатформеною (тобто, може працювати під усіма основними операційними системами).

Для розширення функціональності є підтримка під’єднуваних розширень і плагінів, представлених на просторах мережі у великій різноманітності.

IrfanView

Цей редактор поширюється безкоштовно, але працює виключно під Windows.

За допомогою IrfanView можна переглядати зображення (зокрема растрові) і редагувати їх із застосуванням різних фільтрів і ефектів.

Visio Standard

Програма призначена не тільки для перегляду зображень у форматі SVG. Багатий функціонал редактора дає змогу здійснювати безліч операцій з растровою і векторною графікою. Але на відміну від попередніх рішень ця програма платна, а тому вона менш доступна для пересічних користувачів.

Вартість використання на одному комп’ютері варіюється від 250 до 300 доларів. Утім, для реалізації великих проектів такі витрати можуть бути виправдані.

Adobe Illustrator

Цей умовно безкоштовний редактор містить великий набір професійних інструментів для малювання, роботи з кольорами і текстами. Випускаються версії під Windows і MacOS.

Продукт є частиною платного пакета додатків Creative Cloud. Деякий функціонал надається безкоштовно з метою ознайомити користувача з можливостями програми.

Adobe InDesign

Основне призначення цього редактора – верстка макетів для друкованих та електронних видань і книг. Програма також поширюється умовно безкоштовно і пропонує користувачам широкий набір функцій.

Серед іншого тут можна переглядати картинки у форматі SVG. Випускаються версії під Windows і MacOS. У безкоштовному варіанті користування програмою обмежене за часом.

CorelDraw Graphics Suite

Під цією назвою мається на увазі комплекс кількох програм, об’єднаних загальним функціоналом і спрямованих на повноцінне забезпечення комфортної роботи з растровою і векторною графікою, а також із цифровими фотографіями.

Пакет платний, але користувачі можуть оцінити всі можливості безкоштовно протягом 15 днів. Випускаються версії під Windows і MacOS.

Corel Paint Shop Pro

Цей професійний багатофункціональний редактор призначений для графічних дизайнерів і, зокрема, для обробки фотографій. Працює тільки під управлінням MS Windows, фактично є економічним варіантом Adobe Photoshop.

Програма містить у собі багатий інструментарій професійного рівня. Використання платне, але існує і безкоштовна демоверсія, що дає змогу оцінити всі можливості редактора протягом 30 днів.

ABViewer

Крім перегляду різних графічних файлів (зокрема SVG) і креслень, є можливість редагування, друку документів і їх конвертації в інші формати.

Цей універсальний редактор також надається на платній основі. Користувачі можуть спробувати в дії весь функціонал безкоштовно протягом 45 днів.

Поради щодо роботи з форматом SVG

Хоча дизайнер не зобов’язаний бути експертом у технічних деталях процесу розроблення веб-проєкту, у роботі йому все ж необхідно дотримуватися кількох простих принципів.

1. По-перше, бажано використовувати якомога менше точок у контурах векторного зображення. Це спростить процес редагування і зменшить розмір файлу. Якщо використовуються форми, створені іншими фахівцями, у них слід зменшити кількість опорних і керівних точок формату SVG. Програма Adobe Illustrator дає змогу отримати оптимальні контури за допомогою інструменту «перо» та правильно обраних типів точок.
2. По-друге, рекомендується використовувати піксельну сітку, розташовуючи контури рівно на кордонах пікселів або по лініях, що ділять піксель навпіл. Якщо необхідно змінити розмір елемента, слід спершу перевірити, як змінений розмір відповідатиме піксельній сітці. При цьому потрібно враховувати обмеження екрана, які можуть перешкодити дотриманню ідеальної точності пікселів.
3. По-третє, слід враховувати дизайн-проект. Перед тим як зберегти у форматі SVG створений файл, потрібно з’ясувати, в якому вигляді його буде використано в дизайні. Деякі макети можуть містити векторні елементи, до яких було додано, наприклад, окремий текстовий шар, растр тощо. Це може призвести до неможливості використання векторної графіки надалі для цього елемента.
4. По-четверте, необхідно прагнути до мінімізації кількості фігур, групуючи тільки те, що дійсно необхідно. Фігури, які не є частиною будь-якого зображення або повністю приховані іншими елементами, мають бути видалені.
5. По-п’яте, усі символи, текстури та пензлі бажано перевести в SVG формат або перетворити на векторні ділянки без використання растрових ефектів і режимів накладення.

Підсумок

Отже, використання векторної графіки в процесі створення сайтів сприяє зменшенню часу завантаження сторінок. Загалом поліпшується сприйняття контенту.

Елементи SVG легко піддаються адаптації під різні екрани, динамічно змінюють колір у відповідь на користувацьку дію, підтримують анімацію. Тому змінити формат SVG під конкретні умови не складає жодних труднощів.