it-swarm-ru.tech

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

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

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

89
zeckdude

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

40
peter.murray.rust

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

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

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

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

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

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

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

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

46
JohnnySoftware

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

Canvas

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

SVG

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

Подробнее о разнице читайте http://msdn.Microsoft.com/en-us/library/ie/gg193983 (v = vs.85) .aspx

30
Fizer Khan

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

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

Чтобы немного рассказать о формате и API:

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

22
Erik Dahlström

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

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

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

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

10
Sam007

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

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

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

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

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

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

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

4
Aji

SVG

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

Canvas

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

3
Purushoth

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

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

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

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

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

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

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

2
ceving

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

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

0
Narayana Swamy