Каковы плюсы и минусы HTML5 Canvas против SVG + Raphael.js?

Еще пара вещей: вы хотите, чтобы ваши данные работали в мобильных браузерах? SVG (Рафаэль) не будет работать на Android (не знаю об iphone). И наоборот, если вам нужно что-то, что будет работать со старыми версиями Internet Explorer, холст может не работать (не уверен, поддерживает ли ExCanvas IE6), но SVG в некоторой степени работает (Raphael поддерживает IE6).

Кроме того, вы просто делаете анимацию / рисование или создаете полноценное приложение, которому могут потребоваться такие вещи, как кнопки, ползунки, контейнеры вкладок, списки, сетки и т. Д.

Если вы создаете законченное приложение и если вы хотите, чтобы он работал и с мобильными устройствами, вы можете проверить набор инструментов dojo, в частности dojox.gfx и другие графические библиотеки dojox: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/

dojox.gfx - это библиотека векторной графики, которая поддерживает несколько бэкэндов: холст, SVG и даже silverlight. Вот статья, в которой сравнивается его с raphael: http://www.lrbabe.com/?p=217

Также обратите внимание на cake.js для автономной библиотеки графов сцены для холста: http://code.google.com/p/cakejs/ А также обратите внимание на processingjs.

Этот ответ скопирован из моего ответа на другой вопрос. Но OP затем изменил вопрос, и поэтому этот ответ стал для него менее актуальным. IMHO, это более актуально для этого вопроса, так что вот оно:

Думайте о разнице между холстом и svg как о разнице между Photoshop и Illustrator (или Gimp и Inkscape для вас, ребята из OSS). Один занимается растровыми изображениями, а другой - векторной графикой.

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

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

Иногда их варианты использования частично совпадают.Например, многие люди используют холст для рисования простых линий и отслеживания объектов как структур данных в javascript. Но на самом деле они оба служат разным целям. Если вы попытаетесь реализовать векторный рисунок общего назначения в чистом javascript поверх холста, я сомневаюсь, что вы будете быстрее, чем использование svg, который, скорее всего, реализован в C.