Предыдущий ролик Следующий ролик  

Видео урок: Различие между Canvas и SVG

HTML5: графика и анимация с Canvas

Давайте сравним canvas с SVG, или Scalable Vector Graphics (масштабируемая векторная графика). SVG - это другой способ рисовать контент на веб странице. Он похож на canvas, но он работает в несколько иной манере. Давайте их сравним. В canvas есть элементы, которые рисуются программно. Другими словами, ваш скриптовый код рисует элементы напрямую на поверхности canvas. В SVG элементы являются частью страницы DOM, или Document Object Model (объектной модели документа).

В SVG, если вы работаете, допустим, с прямоугольником, дугой или какой-то кривой, это, на самом деле, тег, находящийся в документе. Ваш скрипт может обратиться к нему в DOM. Вы можете им манипулировать. Но вы не можете этого сделать в canvas. Если что-то нарисовано в canvas, браузер об этом забывает. Он просто вставляет биты информации в canvas, а затем переходит к следующей операции. В canvas рисование идет в пикселях, тогда как в SVG рисование происходит при помощи векторов. Векторы - это линии, которые определяются начальной точкой, конечно точкой и направлением, а в canvas вы делаете это вот так.

Вы просто вставляете пиксели напрямую на поверхность canvas. В canvas нет встроенной анимации, как в SVG. В canvas, если вы хотите создать анимацию, вы должны сделать это при помощи скрипта и временных механизмов, и позже в этом курсе мы это рассмотрим. В SVG, базовая анимация, например, перемещение объектов и тому подобное, является встроенной. canvas имеет довольно высокую эффективность в операциях рисования, основанных на пикселях, тогда как SVG основан на XML синтаксисе.

Итак, canvas обладает немного лучшей производительностью, потому что он может напрямую использовать ускоренный GPU, или Graphics Processing Unit (графический процессор), вашего компьютера, SVG использует XML, который обрабатывается немного медленнее, но он дает большую доступность, потому что, опять же, элементы рисования являются частью DOM. В общем, мы довольно подробно рассмотрели основную разницу этих двух элементов, но имейте в виду, что они не являются взаимоисключающими. Вы можете использовать canvas и SVG на одной и той же веб странице.

А поскольку вы можете размещать элементы, вы даже можете найти способ использовать их совместно, например, canvas на заднем фоне, а SVG сверху. Однако вы не можете вставить SVG в canvas или наоборот, просто запомните, что они не являются взаимоисключающими. Вы можете использовать оба эти элемента.