В чем разница между SVG и HTML5 Canvas?

Question 1

В чем разница между SVG и HTML5 Canvas? Кажется, они оба поступают со мной одинаково. По сути, они оба рисуют векторные изображения с помощью координатных точек.

Что мне не хватает? В чем основные различия между SVG и HTML5 Canvas? Почему я должен выбирать одно вместо другого?

Question 2

См. Википедию: 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, но я подозреваю, что это намного сложнее.

Question 3

SVG похож на программу «рисования». Чертеж определяется как инструкции по рисованию для каждой формы, и любая часть любой формы может быть изменена. Рисунки ориентированы на форму.

Холст похож на программу «рисования». Как только пиксели попадают на экран, это ваш рисунок. Вы не можете изменять формы, кроме как перезаписывая их другими пикселями. Картины пиксельно-ориентированные.

Для некоторых программ очень важно иметь возможность изменять рисунки; например, для создания приложений, создания диаграмм и т. д. Таким образом, SVG имеет здесь преимущество.

Для некоторых художественных программ важно иметь возможность управлять отдельными пикселями.

Получить отличную анимацию для манипуляций пользователем с помощью перетаскивания мышью проще с Canvas, чем с SVG.

Один пиксель на экране компьютера часто занимает 4 байта информации, а экран компьютера в наши дни занимает несколько мегабайт. Так что Canvas может быть неудобным, если вы хотите позволить пользователю редактировать изображение, а затем загружать его снова.

Напротив, рисование нескольких фигур, которые покрывают весь экран с использованием SVG, занимает несколько байтов, быстро загружается и может быть легко загружено снова с теми же преимуществами, что и в том направлении, что и в другом направлении. Таким образом, SVG может быть быстрее, чем Canvas.

Google внедрил Google Maps с SVG. Это дает веб-приложению высокую производительность и плавную прокрутку.

Question 4

Резюме высокого уровня Canvas и SVG

Холст

На основе пикселей (динамический .png)
Один элемент HTML. (Проверьте элемент в инструменте разработчика. Вы можете увидеть только тег холста)
Изменено только через скрипт
Модель событий / взаимодействие с пользователем гранулярно (x, y)
Производительность лучше с меньшей поверхностью, большим количеством объектов (> 10k) или и тем, и другим

SVG

На основе формы
Множественные графические элементы, которые становятся частью DOM
Изменено через скрипт и CSS
Модель событий / взаимодействие с пользователем абстрагируются (прямоугольник, путь)
Производительность лучше с меньшим количеством объектов (<10k), большей поверхностью или обоими

Для получения подробной информации прочтите http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

Question 5

Есть разница в том, что они из себя представляют и что они для вас делают.

SVG - это формат документа для масштабируемой векторной графики.
Canvas - это API-интерфейс javascript для рисования векторной графики в растровое изображение определенного размера.

Чтобы уточнить формат по сравнению с API:

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

Question 6

Две вещи, которые больше всего поразили меня в SVG и Canvas:

Возможность использовать Canvas без DOM, где SVG сильно зависит от DOM и по мере увеличения сложности производительность замедляется. Как в игровом дизайне.

Преимущество использования SVG в том, что разрешение остается неизменным на разных платформах, чего нет в Canvas.

Более подробная информация представлена на этом сайте. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Question 7

Это абсолютно зависит от ваших потребностей / требований.

Если вы хотите просто показать изображение / диаграмму на экране, рекомендуется использовать холст. (Пример: PNG, GIF, BMP и т. Д.)
Если вы хотите расширить возможности своей графики, например, если вы наводите указатель мыши на диаграмму, чтобы увеличить определенную область без ухудшения качества отображения, вы выбираете SVG. (Хороший пример - файлы AutoCAD, Visio, GIS).

Если вы хотите создать инструмент для создания динамической блок-схемы с коннектором формы, лучше выбрать SVG, а не CANVAS.

Когда размер экрана увеличивается, холст начинает ухудшаться, так как необходимо отрисовывать больше пикселей.
Когда количество объектов на экране увеличивается, SVG начинает
ухудшаться, поскольку мы постоянно добавляем их в DOM.

Также обратитесь: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

Question 8

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

Question 9

SVG- это спецификация чертежа, подобная формату файла. SVG - это документ. Вы можете обмениваться файлами SVG, например файлами HTML. Кроме того, поскольку элементы SVG и элементы HTML используют один и тот же DOM API, можно использовать JavaScript для создания SVG DOM таким же образом, как это возможно для создания HTML DOM. Но для создания файла SVG не требуется JavaScript. Для написания SVG достаточно простого текстового редактора. Но вам понадобится как минимум калькулятор, чтобы рассчитать координаты фигур на чертеже.

CANVASэто просто область рисования. Для создания содержимого холста необходимо использовать JavaScript. Холст обменять нельзя. Это не документ. И элементы холста не являются частью дерева DOM. Вы не можете использовать DOM API для управления содержимым холста. Вместо этого вам нужно использовать специальный API холста для рисования фигур на холсте.

Преимущество 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.

Урок ясен: если вы хотите быстро нарисовать графику, используйте CANVAS. Если вам нужно поделиться графикой, например, стилизовать ее с помощью CSS или использовать обработчики событий DOM в своей графике, создайте SVG.

Question 10

добавив к вышеуказанным пунктам:

SVG легче передавать через Интернет по сравнению с JPEG, GIF и т. Д., А также чрезвычайно масштабируется при изменении размера без потери качества.

Question 11

SVG
Он основан на объектной модели.
Подходит для использования больших областей рендеринга.
SVG предоставляет любую поддержку для обработчиков событий.
Модификация разрешена через скрипт и CSS.
SVG имеет лучшую масштабируемость.
SVG основан на векторах (состоит из фигур).
SVG не подходит для игровой графики. SVG не зависит от разрешения.
SVG поддерживает анимацию API.
SVG подходит для печати с высоким качеством и любым разрешением.

Элементы холста

Он основан на пикселях.

Подходит для использования мелкого рендеринга

Canvas не предоставляет обработчиков событий.

Модификация разрешена только через скрипт.

Canvas имеет плохую масштабируемость.

Холст основан на растре (состоит из пикселя).

Холст подходит для игровой графики.

Холст полностью зависит от разрешения.

У Canvas нет API для анимации.

Холст не подходит для печати высокого качества и высокого разрешения.