Выбор между технологиями SVG и Canvas
Если отвечать кратко: обе технологии можно использовать. Но стоит учитывать, что:
- SVG — технология рисования с хранением объектов в памяти (Retained mode graphics). Это значит, что её предпочтительно использовать для реализации интерактивных действий (таких как управление мышью и т.п.), поскольку события привязываются непосредственно к элементам DOM. Например, SVG отлично подходит для создания карт и т.п.
- Однако, эта технология не очень подходит для тяжёлой анимации, поскольку DOM, в общем-то, медлительный. В частности, SVG не рекомендуется для построения быстроизменяющихся детализированных графиков и т.п., так как их построение требует много манипуляций с DOM, что может просто подвесить браузер.
- Касательно библиотек для работы. С ходу могу порекомендовать raphaeljs. Отличная, простая в использовании вещь.
Теперь что касается Canvas.
- Это технология мгновенного рисования, она не хранит свои элементы в дереве DOM, следовательно там не так удобно вешать события на объекты. Хотя, если прибегнуть к сторонним библиотекам, то можно добиться довольно-таки комфортной работы с событиями.
- Зато эта технология отлично подходит для пиксельного рисования объектов, и особенно — для быстрой анимации.
- Из библиотек могу посоветовать processingjs, libcanvas и jCanvaScript
Ответ №2
Лично я бы порекомендовал тебе остановить свой выбора на Canvas. Добиться кроссбраузерности можно с помощью библиотеки ExplorerCanvas, которая позволяет реализовать приемлемое отображение в InternetExplorer.
SVG хорошая вещь, но в контексте тенденций развития HTML можно сказать, что Canvas становится дочерней технологией в HTML5.
Есть ещё один нюанс, который стоит учитывать при выборе между ними. SVG — векторная технология, а Canvas — растровая. Это означает, что в разных проектах, в зависимости от их типа, одна технология может быть значительно предпочтительной другой в плане производительности.