Infographica

На сайті прикладів до бібліотеки d3js помітив, що останні роботи почали використовувати canvas як основу для відображення(як приклад, Adjustable Link Strength, Hello), в той час як раніше використовували SVG. Цей пост якраз і буде присв’ячений тому, який з інстурментів обрати для свого проекту.

Для початку нагадаю, що таке SVG та Canvas.

SVG (від англ. Scalable Vector Graphics — масштабована векторна графіка) — мова розмітки для масштабованої векторної графіки, що базується на мові розмітки XML. SVG зображення мають природню інтеграцію з HTML. Анімація може бути визначена як декларетивно (прописані властивості складових елементів), так і через js-скрипти.

HTML5 Canvas надає користувачу можливість малювати в рамках елемента < canvas > (з чітко визначеними розмірами) за допомогою скриптів. Відображенння графіки відбувається в моментальному режимі(«on the fly»), проте Canvas не запам’ятовує елементи, що були намальовані («зробив та забув») — тому всі команди малювання потрібно викликати для кожного нового кадру.

На MSDN приводять наступну таблицю порівняття технологій:

Canvas	SVG
На базі пікселів (динамічний .PNG)	На базі фігур
Один елемент HTML	Декілька графічних елементіва, що входять до складу DOM
Змінюється тільки за допомогою скриптів	Змінюється за допомогою CSS та скриптів
Модель подій/взаємодій з користувачем детальні (x,y)	Модель подій/взаємодій з користувачем абстрактна (прямокутники, шляхи — елементи графіки)
Производительность покращується при зменшені поверхні, збільшені кількості об’єктів (> 10.000) або обох умов одночастно	поліпшується при зменьшенні кількості об’єктів (< 10.000), збільшення поверхні або обох умов одночастно

Переваги та недоліки

Повертаючись до основного питання цього посту: що використовувати в проектах? відповідь залишається незмінною, як для будь-якої web-технологій: it depends. Але, як показує практика, вистачає розглянути декілька факторів — і відповідь приходить сама.

Переваги:

Canvas	SVG
Ви отримуєте високопродуктивну поверхню для творчості в 2D/3D, де можна намалювати будь-що, маніпулюючи пікселями. Ви может зберігати результат в .png чи .jpg	SVG має дуже хорошу підтримку анімаціїї, в тому числі як і JS, так і CSS. Можливість повного конторолю кожного елементу через SVG DOM API. Зображення адаптивні до розмірів (векторна основа)

Недоліки:

Canvas	SVG
Canvas немає DOM елементів, якими можна маніпулювати. Немає API  для анімації. Потрібно перемальовувати Canvas на кожній ітерації та налаштовувати таймер (або інші умови) оновлення. Слабка підтримка текстового рендерингу Залежність від первинно встановлених розмірів	Повільний рендеринг при збільшені елементів — чим більше DOM елементів, тим складніше їх обробити.

Як підсумок

Підсумовуючи вище вказані таблиці, можемо узагальнити ситуації застосування Canvas та SVG.

Задачі для Canvas

• Рендеринг ігрової графіки (спрайти та фони)
• Аналіз зображень (считування пікселів для збору даних)
• Створення растрової графіки (разних візуалізацій, графіків функцій)
• Редагування картинок: обрізання, зміна розмірів, накладання фільтрів

Задачі для SVG:

• Редагування векторних зображень
• Графіки та діаграми
• Користувацькі інтерфейси з великою кількістю анімації
• Адаптивні інтерфейси

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

Sources:

• MSDN — SVG или Canvas: как выбрать
• Mihai Susan — SVG or Canvas
• StackOverflow — HTML5 Canvas vs. SVG vs. div
• Sitepoint.com — Canvas vs. SVG: Choosing the Right Tool for the Job