Главная » HTML & CSS » Canvas vs SVG: выбираем лучший инструмент для работы
Canvas vs. SVG

13.05.2016 by Devjournal

Canvas vs SVG: выбираем лучший инструмент для работы

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

Что такое HTML5 Canvas?

Вот как WHATWG отвечает на этот вопрос:

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

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

HTML:

</pre>
<pre class=" language-markup"><code class=" language-markup"><span class="token tag"><span class="token punctuation"><</span>canvas <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myCanvas<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>800<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>800<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>canvas<span class="token punctuation">></span></span></code></pre>
<pre>

Javascript:

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

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

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

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

Что такое SVG?

SVG расшифровывается как Масштабируемая Векторная Графика(МВГ):

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

SVG рисунки могут быть интерактивными и динамичными. Анимация может быть определена декларотивна или сценарной.

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

Здесь пример того же красного квадрата, который я создал на HTML5 Canvas. С использованием SVG:

<svg xmlns="http://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 для будущего проекта.

Срочный режим и нераспределенный режим

Очень важно различать эти два режима. Это два разных подхода для отображения контента на экране вашего браузера.

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

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

На этих базовых различиях этих режимов можно сделать выбор между двумя технологиями.

HTML5 Canvas и SVG бок о бок.

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

Например, для насыщенных графикой <header> элементов, лучше это реализовать на HTML и CSS, а не <canvas>.

Необходимо выработать некоторые возможные сценарии где <canvas> был бы предпочтительнее чем простой HTML и даже SVG.

Для этой цели, давайте перейдем к специфическим особенностям <canvas> и SVG соответственно.

Для чего HTML5 Canvas подходит лучше всего

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

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

Рисовка большого количества элементов на маленьком пространстве.

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

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

Масштабирование

Доступность

Зависимость от JavaScript

Объединение HTML5 Canvas и SVG для расширения сценариев

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

#Canvas#HTML 5#SVG

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

Your email address will not be published / Required fields are marked *