?>

SVG vs Canvas, по выбору

comparaison svg canvas quel format choisir

Какой формат выбрать для интеграции графики в веб-страницу или для создания онлайн-приложения ?

Теги и элементы

SVG - язык тегов, производный от XML. Canvas - это API, поэтому набор функций JavaScript, использующий в качестве контейнера тег <canvas> (SVG использует тег <svg>).

Например, векторный текст отображается в SVG:

Текст в SVG 

<svg width="320px" height="48px">
  <g>
    <text font-size="24" font-style="italic"  x="16" y="24" style="fill:purple">
        Un texte en SVG
    </text>
  </g>
</svg>

И с Канвасом :

Текст с Canvas 
<canvas id="can" width="320" height="48">Un texte avec Canvas</canvas>
<script>
function cText()
{
  var ctx = document.getElementById('can').getContext('2d');
  ctx.fillStyle="rgb(255,32,32)";
  ctx.font='italic normal 24px Calibri, sans-serif';
  ctx.fillText("Un texte avec Canvas", 16, 24);
}
window.onload=cText;
</script>

Векторный и растровый?

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

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

Взаимодействие с пользователем

Код SVG состоит из тегов, которые могут сочетаться с HTML-тегами. Например, ссылку можно поместить в изображение SVG следующим образом:

Ссылка 

<svg width="320px" height="48px">
  <g>
     <a href="#" onclick='alert("Clic")'>
        <text font-size="16" x="16" y="16" style="fill:blue">
             Un lien cliquable
       </text>
   </a>
  </g>
</svg>

Можно щелкнуть текст. Фактически можно прикрепить такое событие, как onclick к любому тегу SVG: код SVG является частью DOM .

Автоматическое создание динамического содержимого

Так как SVG сделан из XML-тегов, возможно создание графики в формате SVG с помощью графического редактора. Рисунок, созданный с помощью Inkscape, можно сохранить как SVG-файл и вставить непосредственно на веб-страницу.
С другой стороны, графика в Canvas динамически создается кодом JavaScript во время загрузки страницы.

Сценарий

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

<svg width="320px" height="100px">
  <g id="mysvg"></g>
</svg>
function rect(svgelement, x, y, w, h) 
{
  var rec = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rec.setAttribute("style", "fill:green");
  rec.setAttribute("x", x);
  rec.setAttribute("y", y);
  rec.setAttribute("width", w);
  rec.setAttribute("height", h);
  svgelement.appendChild(rec);
}
rect(document.getElementById("mysvg"), 10, 10, 200, 80);

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

Скорость

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

Классическая игра Invaders носится в SVG медленно. Canvas в этом случае подходит лучше.

Заключение

Часто можно сделать одно и то же с обоими форматами, например создать кнопку в SVG или canvas. Преимущество SVG - возможность визуально производить документы с помощью программного обеспечения. Эти документы могут стать интерактивными, добавляя такие события, как onClick.
Можно легко определить графический пользовательский интерфейс в SVG, как в XUL или XAML.
Но Canvas гораздо быстрее и лучше подходит для анимации, для графики, которая меняется при программировании.

Ресурсы