На первый взгляд, canvas и SVG — это разные методы, которые достигают одного и того же. Оба позволяют графические манипуляции в браузере, и любой может быть решением для некоторых проектов. Однако между ними есть несколько тонких различий, и выбор неправильной технологии может в дальнейшем вызвать головную боль при разработке.
Векторы против пикселей
Основное различие между этими двумя форматами заключается в том, что SVG основан на векторах, а canvas предлагает пиксельные операции.
Различие несколько размыто — вы можете загружать растровые изображения в SVG, а API-интерфейс canvas может рисовать линии и фигуры. Но конечный результат важен: SVG остаются векторами, а элементы canvas — растровыми. Вы можете нарисовать фигуру на поверхности элемента canvas, но он станет набором пикселей.
Документ против скрипта
Изображения SVG определены в XML. Изображение может быть создано на стороне сервера или в пакете, таком как Inkscape , и загружено непосредственно в браузер для просмотра и манипулирования на стороне клиента.
Canvas основан на сценариях и не может работать, если JavaScript отключен. Все изображения холста строятся с использованием ряда команд рисования API.
Объекты против графики
Каждый элемент SVG становится частью DOM и может соответствующим образом управляться. Например, вы можете прикрепить обработчик события «onclick» к фигуре или проверить его свойства с помощью такого инструмента, как Firebug. Хотя это полезно, при работе с большим количеством объектов наблюдается снижение производительности.
Canvas — это низкоуровневый графический API. Вы рисуете пиксели — это очень быстро, но невозможно манипулировать существующими фигурами или прикреплять обработчики событий.
Доступность против альтернативного контента
Доступны SVG: текст остается в виде текста, и что-то должно появляться, даже если браузер не поддерживает SVG.
Элементы холста зависят от JavaScript: если это не доступно, браузер должен будет показать альтернативный контент.
Дизайнер против разработчика
Многие пакеты векторной графики уже поддерживают формат SVG, поэтому дизайнеру легко создать изображение и сразу его использовать.
Холст-образы создаются программно и требуют от разработчика реализации кода. Я подозреваю, что появятся инструменты создания холста, но знание программирования всегда будет необходимо.
Поддержка браузера
Firefox, Chrome, Safari и Opera поддерживают обе технологии, и Microsoft объявила, что canvas и SVG будут доступны в Internet Explorer 9. К сожалению, IE9 не ожидается до следующего года и не будет доступен в XP — многие пользователи будут оставайтесь на IE8 или ниже на долгие годы.
На момент написания статьи SVG, вероятно, является наиболее жизнеспособным кросс-браузерным решением. Существует несколько плагинов IE SVG, а библиотеки, такие как Raphaël, используют встроенную поддержку IE VML.
Что выбрать?
В общем, SVG лучше всего подходит для масштабируемой и интерактивной графики. Canvas — лучший вариант для быстрых игр или анимаций, в которых отображаются сотни элементов. Будут ситуации, когда можно использовать любой формат, например диаграммы данных.
Более осторожные разработчики, вероятно, будут избегать SVG и canvas, пока подавляющее большинство пользователей не активируют один или оба. Тем не менее, они являются жизнеспособными технологиями, и есть небольшая причина, почему вы не должны исследовать их дальше. Они, безусловно, являются опцией для прогрессивных методов улучшения — например, IE8 и более ранние версии показывают таблицу данных, тогда как поддерживаемые браузеры показывают анимированную круговую диаграмму.
Используете ли вы SVG или Canvas в своих проектах или слишком рано внедрять эти технологии?