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

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

Сначала давайте коротко рассмотрим HTML5 Canvas и SVG.

Что такое HTML5 Canvas?

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

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

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

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

HTML:

<canvas id="myCanvas" width="800" height="800"></canvas>

JavaScript:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = '#c00';
context.fillRect(10, 10, 100, 100);

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

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

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

Что такое SVG?

SVG расшифровывается как Scalable Vector Graphics. Согласно спецификации:

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

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

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

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

<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 600">
  <desc>Red rectangle shape</desc>
  <rect x="10" y="10" width="100" height="100" fill="#c00"  />  
</svg>

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

Мгновенный режим и сохраненный режим

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

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

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

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

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

HTML5 Canvas: Преимущества и недостатки

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

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

DOM и фреймворки DOM хорошо подходят для отображения информации, особенно текстовой информации. В сравнении, canvas является изображением. Текст можно добавить на canvas и сделать его отзывчивым, но текст не может быть легко выбран или проиндексирован, как на DOM. Длинные прокручиваемые страницы текста или текста с изображениями являются отличным применением DOM. DOM превосходно подходит для социальных сетей, форумов, покупок и всех информационных приложений, к которым мы привыкли. — “Когда использовать библиотеку или фреймворк JavaScript Canvas”

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

Этот твит от Сары Дразнер обобщает основные преимущества и недостатки возможностей canvas, которые могут помочь нам определить некоторые случаи применения этой мощной технологии:

I had this slide in a lot of talks and workshops over the years: pic.twitter.com/4K0C7mNzg2

— Sarah Drasner (@sarah_edo) October 2, 2019

Вы можете посмотреть изображение из твита здесь.

Для чего HTML5 Canvas может быть отлично подходить

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

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

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

Игры и Генеративное Искусство

Для графически интенсивных, высоко интерактивных игр, а также для генеративного искусства, Canvas обычно является лучшим выбором.

Трассировка лучей

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

Трассировка лучей может использоваться для обогащения изображения, отслеживая путь света через пиксели в плоскости изображения и моделируя эффекты его встреч с виртуальными объектами. … Эффекты, достигнутые с помощью трассировки лучей, … варьируются от … создания реалистичных изображений из обычных векторных график до применения фотореалистичных фильтров для удаления красных глаз. — SVG против Canvas: как выбирать, Microsoft Docs.

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

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

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

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

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

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

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

Для чего HTML5 Canvas не так удобен

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

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

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

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

Также, эти графики часто интерактивны. Подумайте о схемах мест в самолете при бронировании билетов в Интернете, например, что делает их отличным применением для системы сохраненной графики, такой как SVG.

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

Доступность

Хотя существуют шаги, которые можно предпринять для того, чтобы сделать графику на Canvas более доступной — и хорошая библиотека Canvas, как Zim, может быть полезна здесь, чтобы ускорить процесс — Canvas не сияет, когда речь заходит о доступности. То, что вы рисуете на поверхности Canvas, это просто куча пикселей, которые не могут быть прочитаны или интерпретированы средствами поддержки или ботами поисковых систем. Это еще одно место, где 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, когда не можете использовать svg” (где “не можете” может означать анимацию тысяч объектов, манипуляцию каждым пикселем индивидуально и т. д.). Другими словами, SVG должен быть вашим основным выбором, а canvas — резервным планом.

— Benjamin De Cock (@bdc) October 2, 2019

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

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

Часто задаваемые вопросы (FAQ) о Canvas vs SVG