В чем разница между холстом SVG и HTML5?

Ответ 1

См. Википедию: http://en.wikipedia.org/wiki/Canvas_element

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

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

Изображения SVG представлены в XML и сложные сцены могут быть созданы и поддерживается с помощью инструментов редактирования XML.

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

Концептуально, холст - более низкий уровень протокол, по которому SVG может построенный. [править] Однако, это не является (обычно) случаем - они независимые стандарты. Ситуация сложно, потому что есть сцена графические библиотеки для холста и SVG имеет некоторую манипуляцию с картами функциональность.

UPDATE: Я использую SVG из-за его возможностей языка разметки - он может обрабатываться XSLT и может содержать другую разметку в своих узлах. Аналогично, я могу держать SVG в своей разметке (химии). Это позволяет мне манипулировать атрибутами SVG (например, рендерингом) комбинациями разметки. Это возможно в Canvas, но я подозреваю, что это намного сложнее.

Ответ 2

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

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

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

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

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

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

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

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

Ответ 3

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

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

Чтобы разработать немного, в формате по сравнению с API:

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

Ответ 4

Сводка верхнего уровня холста и SVG

Canvas

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

SVG

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

Подробнее см. http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

Ответ 5

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

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

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

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

Ответ 6

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

• Если вы хотите просто показать изображение/диаграмму на экране, тогда рекомендуется подход - холст. (Пример: PNG, GIF, BMP и т.д.)

• Если вы хотите расширить функции вашей графики, например, если вы наведите курсор мыши на диаграмму, чтобы увеличить определенную область без портики качество отображения, то вы выбираете SVG. (Хорошим примером является AutoCAD, Visio, GIS).

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

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

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

Также см. http://msdn.microsoft.com/en-us/library/gg193983 (v = vs .85).aspx

Ответ 7

SVG

На основе использования SVG используется для логотипов, графиков, потому что его векторная графика вы рисуете и забыли об этом. Когда изменение порта просмотра, например, изменение размера (или масштабирование), оно будет самовосстанавливаться и не нужно перерисовывать.

Canvas

Холст - это растровое изображение (или растр), выполненное путем рисования пикселей на экране. Он используется для разработки игр или графического опыта (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

Ответ 8

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

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

Ответ 9

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

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

Преимущество SVG заключается в том, что вы можете обменивать рисунок как документ. Преимущество CANVAS заключается в том, что у него есть менее подробный JavaScript API для создания содержимого.

Вот пример, который показывает, что вы можете достичь аналогичных результатов, но способ, как это сделать в 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>