Выбор между технологиями SVG и Canvas

Вопрос

Мне предстоит выбрать между двумя технологиями (SVG и Canvas) в одном грядущем проекте. Хотелось бы услышать мнение о том, какая технология из этих двух удобнее, быстрее и более перспективная в своем развитии, и с какой связано будущее веба.

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


Ответ №1

Если отвечать кратко: обе технологии можно использовать. Но стоит учитывать, что:

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

Нет комментариев

Добавить комментарий


(обязательно)