Canvas або SVG: як вибрати правильний інструмент для роботи?

20

Від автора: чи є випадки, коли HTML5 Canvas буде використовувати краще, ніж SVG? Ці дві HTML5 технології можна використовувати для створення дивовижною графіки і візуальних ефектів. Проте є відмінності в тому, яку технологію використовувати в своїх проектах?

У якийсь момент коментар Крейга підвів тему до прямого протиставлення Canvas і SVG, і він пише: «Одна з переваг Canvas – в ньому немає DOM! Це дозволяє анімувати тисячі об’єктів без зайвого навантаження, що ідеально підходить для ігор.»

Розвинувши тему, підняту Крейгом, я постараюся найкращим чином розкрити питання, поставлене вище, та обговорити ключові фактори при виборі тієї або іншої технології. Спершу, скажемо пару слів і познайомимо вас з HTML5 Canvas і SVG.

Що таке HTML5 Canvas?

Ось як WHATWG специфікація описує елемент canvas: «Елемент canvas містить скрипти з полотнами під різні дозволи екрану, які можна використовувати для візуалізації діаграм, ігрової графіки, малюнків або іншої візуальної графіки нальоту.»

Іншими словами, тег canvas — це поверхня, на якій ви можете створювати і маніпулювати кожним пікселем растрових зображень за допомогою JavaScript інтерфейсу. Приклад стандартного коду.

var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
context.fillStyle = ‘#c00’;
context.fillRect(10, 10, 100, 100);

Отримуючи посилання на 2D об’єкти контексту, можна використовувати методи і властивості HTML5 Canvas API. У прикладі вище я намалював простий червоний квадрат 100 х 100 пікселів, розташований на canvas поверхні 10px зліва і 10px зверху.

Canvas або SVG: як вибрати правильний інструмент для роботи?

Так як технологія залежна від дозволу зображення canvas можуть втратити в якості при збільшенні полотна або перегляді на ретина дисплеях.

Малювання простих форм – це вершина айсберга. З допомогою HTML5 Canvas API можна малювати дуги, контури, текст, градієнти і т. д. Також ви можете маніпулювати кожним пікселем отриманого зображення. Це означає, що ви можете замінити один колір іншим в певної області зображення, анімації малюнок і навіть вставити відео в canvas і змінювати його зовнішній вигляд.

Що таке SVG?

SVG розшифровується як Scalable Vector Graphics (масштабована векторна графіка). З специфікації: «SVG – це мова опису двовимірної графіки. Незалежно і в парі з XML мова використовує XML синтаксис XML10. В парі з HTML5 використовується HTML5 синтаксис HTML… Малюнки в SVG можуть бути динамічними, і з ними можна взаємодіяти. Анімацію можна створити декларативно (тобто додавши елементи SVG анімації в контент) або з допомогою скрипта.»

SVG – файл формату XML, спроектований для створення векторної графіки. На відміну від HTML5 Canvas згенерованих зображень у даній технології є перевага – при збільшенні або зменшенні векторного зображення зберігається його чіткість і висока якість.

Той же самий червоний квадрат, створений вище на HTML5 Canvas, тільки тепер на SVG:

Red rectangle shape

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

Негайний режим і режим утримання

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

HTML5 Canvas API – приклад негайного режиму: для того, щоб намалювати об’єкти, створити і підтримувати модель або сцену фінального виду, а також визначити, що потрібно оновити, вам, як розробнику, необхідно розробити команди. Graphics API браузера просто передає ваші команди в браузер на виконання.

А SVG використовує режим утримання. Ви просто задаєте команди для малювання, а Graphics API створює в пам’яті браузера модель або сцену кінцевого результату і переводить її в команди для відтворення в браузері.

Повертаючись до коментарю Крейга, canvas, як приклад негайної графіки, не має DOM, Document Object Model. В Canvas ви малюєте пікселі, а система відразу ж все про них забуває, знижуючи обсяг пам’яті, необхідний на підтримку внутрішньої моделі малюнка. В SVG кожен намальований об’єкт додається в свою внутрішню модель, що полегшує вам життя, як розробнику, але знижує продуктивність.

На основі відмінностей негайного режиму і режиму утримання та інших характеристик canvas і SVG можна виділити кілька прикладів, коли одна технологія буде більше підходити під мети вашого проекту.

HTML5 Canvas і SVG разом

В HTML5 Canvas дають чітку рекомендацію не використовувати авторам елемент canvas там, де можна підібрати що-то краще. Приміром, у багатому на графіку хедері краще використовувати HTML і CSS, а не canvas.

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

Для чого підходить HTML5 Canvas

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

Трасування променів

Трасування променів – це техніка створення 3D графіки. Якщо вам цікаво, по ссылке можете поглянути на додаток з трасуванням променів в дії, автор Марк Вебстер.

Canvas або SVG: як вибрати правильний інструмент для роботи?

HTML5 Canvas, безумовно, підходить набагато краще, ніж SVG для цієї задачі, однак це не означає, що трасування променів найкраще працює на canvas. Насправді, навантаження на процесор може бути досить значною, а браузер може зависнути.

Малювання великої кількості об’єктів на маленькій поверхні

Ще один приклад – це, коли у додатку необхідно намалювати велику кількість об’єктів на відносно невеликій поверхні. Наприклад, неинтерактивная візуалізація даних в реальному часі, як прогноз погоди.

Canvas або SVG: як вибрати правильний інструмент для роботи?

Заміна пікселів відео

Як показано у статті HTML5 Doctor, ще один приклад-це заміна фонового кольору в відео на інший колір, сцену або зображення.

Canvas або SVG: як вибрати правильний інструмент для роботи?

Для чого не підходить HTML5 Canvas

З іншого боку, є безліч випадків, коли canvas не самий кращий вибір на відміну від SVG.

Масштабування

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

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

Доступність

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

Вимкнено JavaScript

Якщо ви хочете вимкнути JavaScript у своєму додатку, тоді canvas вам точно не підійде. По суті, з canvas можна працювати тільки з ввімкненим JavaScript. А з SVG все навпаки: малювати SVG графіком можна в стандартному редакторі векторних зображень типу Adobe Illustrator або Inkscape, а контролювати зовнішній вигляд і анімацію можна з допомогою одного лише CSS.

Розширені сценарії спільного використання HTML5 Canvas і SVG

Є випадки, коли ваш додаток може взяти найкраще від двох світів і об’єднати Canvas і SVG. Наприклад, у грі на canvas для того, щоб зберегти гарну масштабованість і знизити вагу в порівнянні з PNG, спрайт можна зробити з SVG-зображень, отриманих з графічного редактора; або на самому графічному редакторі інтерфейс може бути зроблений на SVG, а полотно для малювання на canvas.

Висновок

У цій статті я розібрала деякі з ключових особливостей HTML5 Canvas і SVG, а також дала кілька порад про те, яка з технологій може більше підходити під конкретні завдання.

Результатом даного дослідження, на мій погляд, стало усвідомлення того, що не існує жорстких правил, коли краще використовувати canvas, а не SVG. Тим не менше, різниця між негайним режимом і режимом утримування дало нам невеликі підказки про сценарії, в яких можна використовувати переваги canvas над SVG і навпаки. Щоб допомогти вам вибрати між HTML5 Canvas і SVG, закінчити статтю я хочу дуже точним радою:

«… якщо вам потрібно намалювати пікселі на екрані і забути про можливості їх зміни і отримання доступу до них, можливо, вам більше підійде canvas. І якщо з іншого боку вам необхідно, щоб ви могли отримувати доступ до зображення і змінювати його, то тут більше підійде SVG. HTML5 & CSS3 For the Real World, 2nd Edition»

HTML5 Canvas або SVG, а що виберіть ви?