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

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

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

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

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

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

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

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

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

обзор холста и SVG

холст

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

SVG

1. формы на основе
2. несколько графических элементов, которые становятся частью DOM
3. изменено через скрипт и CSS
4. событие и модель взаимодействия с пользователем абстрактны (прямоугольник, контур)
5. производительность лучше с меньшим количеством объектов (

для детальной разницы, прочитайте http://msdn.microsoft.com/en-us/library/ie/gg193983 (v=vs. 85). aspx

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

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

чтобы немного уточнить, о формате и API:

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

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

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

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

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

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

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

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

Если вы хотите построить инструмент создания динамической блок-схемы с соединителем формы, лучше выбрать 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. Но вам не нужен JavaScript для создания SVG-файла. Для написания SVG достаточно простого текстового редактора. Но вам нужен хотя бы калькулятор для вычисления координат фигуры на чертеже.

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

преимущество a SVG это то, что вы можете обменять чертеж как A документ. Преимущество 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>

как вы можете видеть результат почти такой же, но код JavaScript совершенно другой.

SVG создается с помощью DOM API с помощью createElement, setAttribute и appendChild. Все графики находятся в строках атрибутов. SVG имеет более мощные примитивы. Например, холст не имеет ничего эквивалентного пути дуги SVG. Пример CANVAS пытается эмулировать дугу SVG с кривой Безье. В SVG вы можете повторно использовать элементы для их преобразования. В холсте вы не можете повторно использовать элементы. Вместо этого вам нужно написать функцию JavaScript, чтобы вызвать ее дважды. СВГ имеет viewBox что позволяет использовать нормализованные координаты, что упрощает вращения. На холсте вы должны вычислить координаты самостоятельно на основе clientWidth и clientHeight. И вы можете стилизовать все элементы SVG с помощью CSS. На холсте вы не можете ничего стилизовать с помощью CSS. Поскольку SVG является DOM, вы можете назначить обработчики событий для всех элементов SVG. Элементы на холсте не имеют обработчиков событий DOM и DOM.

но с другой стороны код холста гораздо легче читать. Вам не нужно заботиться о пространствах имен XML. И вы можете сразу вызвать графические функции, потому что вам не нужно строить DOM.

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

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

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