Canvas vs SVG

Итак, вопрос, который по определению провокационный и флеймообразующий: что использовать — canvas или SVG, — на первый взгляд, он не очень правомерен: SVG — это векторная графика, Canvas представляет растовые изображения. Но тем не менее области применения обеих технологий на веб-страницах сильно пересекаются. Какими преимуществами обладает каждая из них и на какой все-таки остановиться?

Объекты в svg — это часть DOM-дерева документа, они доступны из JavaScrip-сценариев, к ним можно привязать события (такие как click или mouseover) и организовать интерактивное взаимодействие пользователя с контентом. К этим элементам можно непосредственно применять CSS-стили.

Кроме этого, у данного формата есть еще два, не столь очевидных преимущества. Первое — это возможность масштабирования: картинку в SVG можно увеличивать в размерах без видимой потери качества, чего нельзя сказать про битмапные изображения canvas.

Второе преимущество заключается в возможности индексации csg-контента поисковыми системами. И это не просто теоретическая возможность — поисковые механизмы Google индексируют SVG уже почти два года, а это серьезно!

Следует ли из этого, что SVG однозначно удобнее и лучше по всем параметрам? Естественно, нет. Применение SVG нам дает невероятную простоту при рисовании… простых вещей.

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

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

Еще одно преимущество Canvas — возможности оптимизации и кэширования графики.

Подытоживая, можно сказать, что сфера применения SVG — это ифографика, диаграммы, схемы, графики, иллюстрации, в то время как сфера действия canvas — видеоигры, обработка фотографий, «веб-живопись». Впрочем, это всего лишь мое мнение, которое я никому не навязываю.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *