Canvas vs SVG: выбор правильного инструмента для работы

HTML5 Canvas и SVG - это основанные на стандартах технологии HTML5, которые можно использовать для создания удивительной графики и визуальных эффектов. Вопрос, который мы будем изучать в этой статье, заключается в следующем: Должно ли иметь значение, какую из них ты используешь в своем проекте? Другими словами, существуют ли какие-либо случаи использования, в которых HTML5 Canvas предпочтительнее SVG?

Сначала давай поговорим о HTML5 Canvas и SVG.

Что такое HTML5 Canvas?

Вот как спецификация WHATWG представляет элемент canvas:

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

Другими словами, тег <canvas> открывает область, на которой можно создавать растровые изображения и манипулировать ими пиксель за пикселем с помощью программируемого интерфейса JavaScript.

Вот базовый пример кода:

Ссылка на Codepen: https://codepen.io/SitePoint/pen/LYbOBgm

HTML:

JavaScript:

Ты можешь воспользоваться методами и свойствами HTML5 Canvas API, получив ссылку на объект 2D контекста. В примере выше я нарисовал простой красный квадрат размером 100 x 100 пикселей, расположенный в 10px слева и 10px сверху от поверхности рисования <canvas>.

В зависимости от разрешения, созданные в <canvas> изображения могут потерять качество при увеличении или отображении на дисплеях Retina.

Рисование простых фигур - это только вершина айсберга. HTML5 Canvas API позволяет рисовать дуги, контуры, текст, градиенты и т.д. Ты также можешь манипулировать своими изображениями пиксель за пикселем. Это означает, что ты можешь заменить один цвет на другой в определенных областях графики, анимировать свои рисунки и даже нарисовать видео на холсте и изменить его внешний вид.

Что такое SVG?

SVG расшифровывается как Scalable Vector Graphics (масштабируемая векторная графика).

SVG - это язык для описания двумерной графики. Как самостоятельный формат или в сочетании с другими XML, он использует синтаксис XML. При смешении с HTML5 используется синтаксис HTML5.

Рисунки SVG могут быть интерактивными и динамичными. Анимация может быть определена и запущена как декларативно (т.е. путем встраивания элементов анимации SVG в содержимое SVG), так и с помощью скриптов.

Вот тот же красный квадрат (ранее созданный с помощью HTML5 Canvas), на этот раз нарисованный с помощью SVG:

Ссылка на Codepen: https://codepen.io/SitePoint/pen/zYoPLeE?editors=1000

С помощью SVG можно делать почти все то же самое, что и с помощью Canvas - рисовать фигуры и контуры, градиенты, узоры, анимацию и так далее. Однако эти две технологии работают принципиально по-разному. В отличие от графики на основе Canvas, SVG имеет DOM и поэтому к нему имеют доступ как CSS, так и JavaScript. Например, ты можешь изменить внешний вид SVG-графики с помощью CSS, анимировать ее узлы с помощью CSS или JavaScript, заставить любую из ее частей реагировать на события мыши или клавиатуры так же, как и <div>. Как станет ясно из следующих разделов, эта разница играет важную роль, когда тебе нужно сделать выбор между Canvas и SVG для твоего следующего проекта.

Немедленный режим и сохраненный режим

Очень важно различать немедленный режим и сохраненный режим. HTML5 Canvas является примером первого, SVG - второго.

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

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

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

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

HTML5 Canvas: плюсы и минусы

Спецификация HTML5 Canvas четко рекомендует авторам не использовать элемент <canvas>, если в их распоряжении есть другие более подходящие средства.

Например, для графически насыщенного элемента <header> лучшими инструментами являются HTML и CSS, а не <canvas> (и SVG, кстати, тоже). Доктор Абстракт, создатель и основатель canvas-фреймворка Zim JS, подтверждает эту точку зрения, когда пишет:

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

Итак, это наглядный пример того, когда не следует использовать <canvas>. Но когда <canvas> является хорошим вариантом?

В этом твите Сара Драснер обобщает некоторые основные плюсы и минусы функций и возможностей canvas, что может помочь нам разработать несколько вариантов использования этой мощной технологии.

Для чего HTML5 Canvas отлично подходит

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

В целом, лишние затраты на рендеринг DOM становятся более ощутимыми при жонглировании сотнями, а то и тысячами объектов; в этом случае, Canvas является явным победителем. Однако и Canvas, и SVG инвариантны к размерам объектов. При окончательном подведении итогов Canvas явно выигрывает в производительности.

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

Игры и творческое искусство

Для графически насыщенных, высокоинтерактивных игр, а также для творчества генеративного типа, как правило, используется Canvas.

Прослеживание/трассировка лучей

Трассировка лучей - это метод создания трехмерной графики.

Трассировка лучей может использоваться для гидратации изображения путем отслеживания пути света через пиксели в плоскости изображения и моделирования эффектов его столкновения с виртуальными объектами. Эффекты, достигаемые трассировкой лучей, варьируются от создания реалистичных изображений из простой векторной графики до применения фотоподобных фильтров для удаления эффекта "красных глаз".

Если тебе интересно, вот приложение raytracer в действии, созданное Марком Вебстером.

Однако, хотя HTML5 Canvas определенно лучше подходит для этой задачи, чем SVG, из этого не следует, что трассировку лучей лучше всего выполнять на элементе <canvas>. На самом деле, нагрузка на процессор может быть весьма значительной, вплоть до того, что твой браузер может перестать отвечать на запросы.

Рисование значительного количества объектов на небольшой поверхности

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

Приведенное выше изображение взято из статьи MSDN, которая была частью моего исследования для этой статьи.

Замена пикселей в видео

Как показано в статье HTML5 Doctor, еще один пример, когда Canvas будет уместен - это замена цвета фона видео на другой цвет, другую сцену или изображение.

Для чего не так хорош HTML5 Canvas?

С другой стороны, есть ряд случаев, когда Canvas может оказаться не лучшим выбором по сравнению с SVG.

Масштабируемость

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

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

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

Тем не менее, с помощью таких замечательных библиотек, как CreateJS и Zim (которая расширяет CreateJS), разработчики могут относительно быстро интегрировать события мыши, тесты на попадание, жесты мультитач, возможности перетаскивания, элементы управления и многое другое в свои творения на основе Canvas.

Доступность

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

Отсутствие зависимости от JavaScript

Если ты не хочешь использовать JavaScript в своем приложении, то Canvas не станет твоим лучшим другом. Фактически, единственный способ работы с элементом <canvas> - это JavaScript. И наоборот, ты можешь рисовать SVG-графику с помощью стандартной программы редактирования векторов, например Adobe Illustrator или Inkscape и использовать чистый CSS для управления их внешним видом и выполнения привлекательных, тонких анимаций и микровзаимодействий.

Комбинирование HTML5 Canvas и SVG для расширенных вариантов

Есть случаи, когда твое приложение может получить лучшее из двух миров, сочетая HTML5 Canvas и SVG. Например, игра на основе Canvas может реализовать элементы из SVG-изображений, созданных программой векторного редактирования, чтобы воспользоваться преимуществами масштабируемости и меньшего размера загрузки по сравнению с PNG-изображением. Или в программе рисования пользовательский интерфейс может быть разработан с использованием SVG, со встроенным элементом <canvas>, который можно использовать для рисования.

Наконец, такая мощная библиотека, как Paper.js, позволяет писать векторную графику поверх HTML5 Canvas, тем самым предлагая разработчикам удобный способ работы с обеими технологиями.

Заключение

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

Каков ответ?

Крис Койер согласен с Бенджамином Де Коком, о чем последний написал в своем твиттере:

Доктор Абстракт предлагает длинный список вещей, которые лучше всего создавать с помощью Canvas, включая интерактивные логотипы и рекламу, интерактивную инфографику, приложения для электронного обучения и многое другое.

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

Они не только облегчают работу с обеими технологиями в одной графической работе, но и делают так, что некоторые труднореализуемые функции в проекте на основе родного Canvas - такие как интерактивные элементы управления и события, отзывчивость, функции доступности и так далее - теперь могут быть под рукой у большинства разработчиков, что оставляет дверь открытой для возможности все более интересного использования HTML5 Canvas.

Источник: https://www.sitepoint.com/canvas-vs-svg/