HTML5 Canvas и SVG — это основанные на стандартах технологии HTML5, которые можно использовать для создания потрясающей графики и визуальных эффектов. Вопрос, который я задаю в этой статье, заключается в следующем: имеет ли значение, какой из них вы используете в своем проекте? Другими словами, есть ли варианты использования HTML5 Canvas вместо SVG?
Что такое холст HTML5?
Вот как спецификация WHATWG представляет этот canvasэлемент:
Этот canvasэлемент предоставляет сценариям растровое полотно, зависящее от разрешения, которое можно использовать для рендеринга графиков, игровой графики, рисунков или других визуальных изображений на лету.
Вы можете воспользоваться преимуществами методов и свойств HTML5 Canvas API, получив ссылку на объект
Красный квадрат, нарисованный с помощью HTML5 Canvas
Поскольку изображения, которые вы создаете, зависят от разрешения
Рисование простых фигур — это только вершина айсберга. HTML5 Canvas API позволяет рисовать дуги, контуры, текст, градиенты и т. д. Вы также можете манипулировать изображениями попиксельно. Это означает, что вы можете заменить один цвет на другой в определенных областях графики, вы можете анимировать свои рисунки и даже нарисовать видео на холсте и изменить его внешний вид.
Что такое SVG?
SVG означает масштабируемую векторную графику. Согласно спецификации:
SVG — это язык описания двухмерной графики. В качестве самостоятельного формата или в сочетании с другим XML он использует синтаксис XML. При смешивании с HTML5 используется синтаксис HTML5...
Рисунки SVG могут быть интерактивными и динамичными. Анимации можно определять и запускать либо декларативно (т. е. путем встраивания элементов анимации SVG в содержимое SVG), либо с помощью сценариев.
SVG — это формат файла XML, предназначенный для создания векторной графики. Преимущество масштабируемости заключается в том, что вы можете увеличивать или уменьшать векторное изображение, сохраняя при этом его четкость и высокое качество. (Это невозможно сделать с изображениями, сгенерированными с помощью HTML5 Canvas.)
Вот тот же красный квадрат (ранее созданный с помощью HTML5 Canvas), на этот раз нарисованный с помощью SVG:
Вы можете делать с SVG почти все то же, что и с Canvas — например, рисовать фигуры и контуры, градиенты, шаблоны, анимацию и так далее. Однако эти две технологии работают принципиально
. Как станет яснее в следующих разделах, это различие играет важную роль, когда вам нужно сделать выбор между Canvas и SVG для вашего следующего проекта.
Немедленный режим и сохраненный режим
Крайне важно различать немедленный режим и сохраненный режим. HTML5 Canvas — пример первого, SVG — второго.
Немедленный режим означает, что как только ваш рисунок окажется на холсте, холст перестанет отслеживать его. Другими словами, вы, как разработчик, должны разработать команды для рисования объектов, создания и поддержки модели или сцены того, как должен выглядеть окончательный результат, и указать, что необходимо обновить. Графический API браузера просто передает ваши команды рисования браузеру, который затем их выполняет.
SVG использует сохраненный подход, когда вы просто выдаете свои инструкции по рисованию того, что вы хотите отобразить на экране, а графический API браузера создает в памяти модель или сцену окончательного вывода и переводит ее в команды рисования для вашего браузера.
Будучи непосредственной графической системой, Canvas не имеет DOM или объектной модели документа. С Canvas вы рисуете свои пиксели, а система забывает о них, тем самым сокращая дополнительную память, необходимую для поддержания внутренней модели вашего рисунка. С SVG каждый рисуемый вами объект добавляется во внутреннюю модель браузера, что несколько упрощает вашу жизнь как разработчика, но за счет некоторых затрат с точки зрения производительности.
На основе различий между немедленным и сохраненным режимами, а также других специфических характеристик Canvas и SVG соответственно можно выделить несколько случаев, когда использование одной технологии вместо другой может лучше служить целям вашего проекта.
Холст HTML5: плюсы и минусы
Спецификация HTML5 Canvas четко рекомендует авторам не использовать
Например, для графически богатого
элемента лучшими инструментами являются HTML и CSS, а не
В этой статье я рассмотрел некоторые ключевые функции как HTML5 Canvas, так и SVG, чтобы помочь вам решить, какая технология лучше всего подходит для конкретных задач.
