Які відмінності між SVG та HTML5 Canvas? Здається, вони обидва роблять те саме зі мною. В основному, вони обидва малюють векторні ілюстрації за допомогою координатних точок.
Чого мені не вистачає? Які основні відмінності між SVG та HTML5 Canvas? Чому я повинен вибрати одне над іншим?
Відповіді:
Дивіться Вікіпедію: http://en.wikipedia.org/wiki/Canvas_element
SVG - це більш ранній стандарт для малювання фігур у браузерах. Однак SVG знаходиться на принципово вищому рівні, оскільки кожна намальована фігура запам'ятовується як об'єкт на графіку сцени або DOM, який згодом відображається на бітовій карті. Це означає, що якщо атрибути об’єкта SVG змінені, браузер може автоматично рендерити сцену.
У наведеному вище прикладі, як тільки намальований прямокутник, система забуває той факт, що він був намальований. Якщо його положення потрібно було змінити, потрібно було б перемалювати всю сцену, включаючи будь-які об’єкти, які могли бути охоплені прямокутником. Але в еквівалентному випадку SVG можна просто змінити атрибути положення прямокутника, і браузер визначить, як його перефарбувати. Також можна намалювати полотно шарами, а потім відтворити певні шари.
Зображення SVG представлені у форматі XML, а складні сцени можна створювати та підтримувати за допомогою інструментів редагування XML.
Графік сцени SVG дозволяє обробникам подій бути пов'язаними з об'єктами, тому прямокутник може реагувати на подію onClick. Щоб отримати однакову функціональність з полотном, потрібно вручну узгодити координати клацання миші з координатами намальованого прямокутника, щоб визначити, чи було натиснуто його.
Концептуально, canvas - це протокол нижчого рівня, на якому може бути побудований SVG. [Потрібне цитування] Однак, це не так (зазвичай) - вони є незалежними стандартами. Ситуація ускладнюється, оскільки для Canvas існують бібліотеки графіків сцен, а SVG має певну функціональність маніпулювання бітовими картами.
ОНОВЛЕННЯ: Я використовую SVG через його можливості мови розмітки - він може оброблятися XSLT і може містити іншу розмітку у своїх вузлах. Подібним чином я можу тримати SVG у своїй розмітці (хімія). Це дозволяє мені маніпулювати атрибутами SVG (наприклад, рендеринг) за допомогою комбінацій розмітки. Це можливо в Canvas, але я підозрюю, що це набагато складніше.
SVG - це як програма "розіграшу". Креслення вказано як інструкції для малювання для кожної фігури, і будь-яку деталь будь-якої фігури можна змінити. Малюнки орієнтовані на форму.
Полотно - це як програма "фарби". Як тільки пікселі потраплять на екран, це ваш малюнок. Ви не можете змінювати фігури, крім як замінюючи їх іншими пікселями. Картини орієнтовані на пікселі.
Вміння змінювати креслення дуже важливо для деяких програм; наприклад, складання програм, інструменти складання діаграм тощо. Тому SVG тут має перевагу.
Вміння керувати окремими пікселями важливо для деяких художніх програм.
Отримати чудову продуктивність анімації для маніпулювання користувачами за допомогою перетягування миші простіше за допомогою Canvas, ніж SVG.
Один піксель на екрані комп’ютера часто споживає 4 байти інформації, а екран комп’ютера в наші дні займає кілька мегабайт. Тож Canvas може бути незручним, якщо ви хочете дозволити користувачеві редагувати зображення, а потім завантажити його знову.
На відміну від цього, малювання декількох фігур, які охоплюють весь екран за допомогою SVG, займає кілька байтів, швидко завантажується і може бути легко завантажене знову з тими ж перевагами, що йдуть у цьому напрямку, як і в іншому напрямку. Отже, SVG може бути швидшим за Canvas.
Google впровадив Карти Google за допомогою SVG. Це надає веб-програмі швидкої продуктивності та плавного прокручування.
Короткий огляд полотна проти SVG
Полотно
SVG
Детальну різницю читайте на веб-сайті http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx
Існує різниця в тому, що вони є і що вони роблять для вас.
Щоб трохи детальніше розказати про формат у порівнянні з API:
За допомогою svg ви можете переглядати, зберігати та редагувати файл у багатьох різних інструментах. За допомогою полотна ви просто малюєте, і нічого не зберігається у тому, що ви щойно зробили, крім отриманого зображення на екрані. Ви можете анімувати обидва, SVG обробляє вам перемальовування, просто переглядаючи вказані елементи та атрибути, тоді як за допомогою полотна вам доведеться перемальовувати кожен кадр за допомогою API. Ви можете масштабувати і те, і інше, але SVG робить це автоматично, тоді як із полотном знову вам доведеться повторно видавати команди креслення для заданого розміру.
Дві речі, які мене найбільше вразили для SVG і Canvas:
Можливість використання Canvas без DOM, де як SVG сильно залежить від DOM, а зі збільшенням складності продуктивність сповільнюється. Як в ігровому дизайні.
Перевагою використання SVG було б те, що роздільна здатність залишається незмінною на всіх платформах, чого не вистачає в Canvas.
На цьому сайті ви знайдете багато деталей. http://dev.opera.com/articles/view/svg-or-canvas-choose-between-the-two/
Це абсолютно залежить від ваших потреб / вимог.
Якщо ви хочете просто показати зображення / діаграму на екрані, то рекомендований підхід - полотно. (Приклад - PNG, GIF, BMP тощо)
Якщо ви хочете розширити можливості вашої графіки, наприклад, якщо навести курсор на діаграму і хочете збільшити певну область, не зіпсувавши якість відображення, тоді виберіть SVG. (Хороший приклад - файли AutoCAD, Visio, GIS).
Якщо ви хочете побудувати інструмент для створення динамічної діаграми потоку із сполучником фігури, краще вибрати SVG, а не CANVAS.
Коли розмір екрану збільшується, полотно починає погіршуватися, оскільки потрібно намалювати більше пікселів.
Коли на екрані збільшується кількість об'єктів, SVG починає
погіршуватися, оскільки ми постійно додаємо їх до DOM.
Також зверніться до: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx
SVG
На основі випадку використання SVG використовується для логотипів, діаграм, оскільки його векторну графіку ви намалювали і забули про це. Коли порт перегляду змінюється, як перерозмір (або масштабування), він самостійно регулюється і не потрібно перемальовувати.
Полотно
Полотно - це растрове зображення (або растрове зображення), яке воно робиться шляхом малювання пікселів на екрані. Він використовується для розробки ігор або графічного досвіду ( https://www.chromeexperiments.com/webgl ) у певній області, він малює пікселі та змінює, перемальовуючи інший. Оскільки це растровий тип, нам потрібно перемалювати повністю, коли змінюється порт перегляду.
Довідково
http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas
http://en.wikipedia.org/wiki/WebGL
http://vector-conversions.com/vectorizing/raster_vs_vector.html
SVG- це специфікація креслення, як формат файлу. SVG - це документ. Ви можете обмінюватися SVG-файлами, такими як HTML-файли. Крім того, оскільки елементи SVG та елементи HTML мають однаковий API DOM, можна використовувати JavaScript для створення SVG DOM так само, як це можливо для створення HTML DOM. Але для створення файлу SVG вам не потрібен JavaScript. Для написання SVG достатньо простого текстового редактора. Але для обчислення координат фігур на кресленні потрібен хоча б калькулятор.
CANVASце просто область малювання. Для генерації вмісту полотна необхідно використовувати JavaScript. Ви не можете обміняти полотно. Це не документ. А елементи полотна не є частиною дерева DOM. Ви не можете використовувати API DOM для обробки вмісту полотна. Натомість вам потрібно використовувати спеціальний API полотна, щоб намалювати фігури на полотні.
Перевага a SVGполягає в тому, що ви можете обміняти креслення як документ. ПеревагаCANVAS тому, що він має менш детальний API JavaScript для генерації вмісту.
Ось приклад, який показує, що ви можете досягти подібних результатів, але спосіб, як це зробити в JavaScript, дуже різний.
// Italic S in SVG
(function () {
const ns='http://www.w3.org/2000/svg';
let s = document.querySelector('svg');
let p = document.createElementNS (ns, 'path');
p.setAttribute ('id', 'arc');
p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
s.appendChild (p);
let u = document.createElementNS (ns, 'use');
u.setAttribute ('href', '#arc');
u.setAttribute ('transform', 'rotate(180)');
s.appendChild (u);
})();
// Italic S in CANVAS
(function () {
let c = document.querySelector('canvas');
let w = c.width = c.clientWidth;
let h = c.height = c.clientHeight;
let x = c.getContext('2d');
x.lineWidth = 0.05 * w;
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*0.02, h*0.4,
w*0.4, -h*0.02,
w*0.95, h*0.05);
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
w*(1-0.4), h*(1+0.02),
w*(1-0.95), h*(1-0.05));
x.stroke();
})();svg, canvas {
width: 3em;
height: 3em;
}
svg {
vertical-align: text-top;
stroke: black;
stroke-width: 0.1;
fill: none;
}
canvas {
vertical-align: text-bottom;
}
div {
float: left;
}<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>Як бачите, результат майже однаковий, але код JavaScript зовсім інший.
SVG створюється за допомогою DOM API з використанням createElement, setAttributeі appendChild. Вся графіка знаходиться в рядках атрибутів. SVG має більш потужні примітиви. Наприклад, CANVAS не має нічого еквівалентного дуговому шляху SVG. Приклад CANVAS намагається емулювати дугу SVG за допомогою кривої Безьє. У SVG ви можете повторно використовувати елементи, щоб перетворити їх. У CANVAS ви не можете повторно використовувати елементи. Натомість вам потрібно написати функцію JavaScript, щоб викликати її двічі. SVG маєviewBox що дозволяє використовувати нормалізовані координати, що спрощує обертання. У CANVAS ви повинні розрахувати координати самостійно на основі clientWidthіclientHeight. І ви можете стилізувати всі елементи SVG за допомогою CSS. У CANVAS ви не можете нічого стилізувати за допомогою CSS. Оскільки SVG - це DOM, ви можете призначити обробники подій для всіх елементів SVG. Елементи в CANVAS не мають DOM і обробників подій DOM.
Але з іншого боку, код CANVAS набагато легший для читання. Вам не потрібно дбати про простори імен XML. І ви можете безпосередньо викликати графічні функції, тому що вам не потрібно будувати DOM.
Урок зрозумілий: якщо ви швидко хочете намалювати якусь графіку, використовуйте ПОЛОТНУ. Якщо вам потрібно поділитися графікою, вам подобається стилізувати її з CSS або хочете використовувати обробники подій DOM у своїй графіці, створіть SVG.
додаючи до вищезазначених пунктів:
SVG є легким для передачі через Інтернет у порівнянні з JPEG, GIF тощо, а також надзвичайно масштабується при зміні розміру без втрати якості.
SVG
На основі об'єктної моделі.
Підходить для використання великих областей візуалізації.
SVG надає будь-яку підтримку для обробників подій.
Модифікація дозволена за допомогою сценарію та CSS.
SVG має кращу масштабованість
SVG базується на векторі (складається з фігур).
SVG не підходить для графіки Ігор. SVG не залежить від роздільної здатності.
SVG підходить для анімації API.
SVG підходить для друку з високою якістю та будь-якою роздільною здатністю.
Елементи полотна
Він базується на пікселях.
Підходить для використання невеликого візуалізації
Canvas не передбачає жодного звернення для обробників подій.
Модифікація дозволена лише за допомогою сценарію.
Полотно має погану масштабованість.
Полотно базується на растровому зображенні (складається з пікселя).
Полотно підходить для ігрової графіки.
Полотно повністю залежить від роздільної здатності.
Canvas не має жодного API для анімації.
Полотно не підходить для друку високої якості та високої роздільної здатності.