Главная » Полезные статьи » Разное » SVG или Canvas? Сложности выбора
Распечатать статью

SVG или Canvas? Сложности выбора

Новые веб-технологии все шире используются браузерами, появляются решения, доступные для многих браузеров, например, Raphaёl для поддержки SVG, и ExCanvas для Canvas. Даже Internet Explorer начал понимать SVG — а какую поддержку мы можем увидеть в будущем! Наличие нескольких похожих технологий создают проблемы выбора подходящего решения.

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

Scalable Vector Graphics (SVG)

SVG — векторный графический формат, основанный на XML. SVG-контент может быть статическим, динамическим, интерактивным и анимированным — он очень гибок. Вы также можете изменять оформление SVG с помощью CSS и определять поведение объектов с помощью SVG DOM. И конечно, так как текст внутри SVG сохраняется в файле, он остается относительно доступным для использования. Также SVG-контент можно вставить непосредственно в (X)HTML с использованием элемента object.

Пример круга, созданного с помощью SVG

Ниже представлен пример круга, нарисованного с помощью SVG с использованием радиального градиента и простой анимации:

01 <svg version="1.1"
02   width="320" height="320"
03   xmlns="http://www.w3.org/2000/svg">
04   <defs>
05     <radialGradient id="circleGrad">
06       <stop offset="0%"   stop-color="rgb(255, 255, 0)" />
07       <stop offset="100%" stop-color="rgb(  0, 255, 0)" />
08     </radialGradient>
09   </defs>
10
11   <ellipse fill="url(#circleGrad)" stroke="#000" cx="50%"
12   cy="50%" rx="50%" ry="50%">
13     <animate attributeName="rx" values="0%;50%;0%" dur="2s"
14       repeatCount="indefinite" />
15     <animate attributeName="ry" values="0%;50%;0%" dur="2s"
16       repeatCount="indefinite" />
17   </ellipse>
18 </svg>

Обратите внимание на то, что анимация в настоящее время работает только в Opera и браузерах, основанных на движке Webkit.

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

HTML5 Canvas

Спецификация HTML5 Canvas определяет универсальный JavaScript API, позволяющий выполнять операции отрисовки объектов. Для рисования на канве можно использовать два разных подхода:

  • 2D-подход,
  • 3D-подход (WebGL).

Первый лучше внедрён и доступен во всех современных веб-браузерах (за исключением IE), в то время как второй находится на ранней стадии определения, имея лишь несколько экспериментальных реализаций.

Мы рассмотрим только 2D Canvas, так как она наиболее широко распространена. 2D Canvas позволяет вам использовать мощный API для выполнения быстрых операций рисования на растровых 2D-поверхностях. Не существует каких-либо файловых форматов, и вы можете рисовать только с использованием скриптов. При рисовании не используются узлы DOM — все состоит из пикселей. Это означает, что вы можете сконцентрироваться на рисовании без ограничений сложности изображения.
В примере ниже тот же круг, нарисованный с помощью канвы HTML 5:

001 <!DOCTYPE html>
002 <html lang="en">
003   <head>
004     <meta charset="utf-8">
005     <title>Пример анимации на HTML-канве</title>
006     <script type="text/javascript"><!--
007 window.addEventListener('load', function () {
008   // Получить элемент канвы.
009   var canvas = document.getElementById('myCanvas'),
010       w = 4,
011       h = 4,
012       zoompx = 6,
013       step = 'zoomin';
014
015   if (!canvas || !canvas.getContext) {
016     return;
017   }
018
019   // Получить 2d окружение канвы.
020   var ctx = canvas.getContext('2d');
021   if (!ctx) {
022     return;
023   }
024
025   var K = 4*((Math.SQRT2-1)/3);
026
027 setInterval(function () {
028   if (step == 'zoomin') {
029     w += zoompx;
030     h += zoompx;
031   } else if (step == 'zoomout') {
032     w -= zoompx;
033     h -= zoompx;
034   }
035
036   if (w > canvas.width) {
037     w = canvas.width;
038     step = 'zoomout';
039   } else if (w < 4) {
040     w = 4;
041     step = 'zoomin';
042   }
043
044   if (h > canvas.height) {
045     h = canvas.height;
046     step = 'zoomout';
047   } else if (h < 4) {
048     h = 4;
049     step = 'zoomin';
050   }
051
052   // Создать радиальный градиент: x0, y0, r0, x1, y1, r1.
053   // Начальные координаты (x0,y0) и радиус r0,
054   // за которыми следуют конечные координаты (x1,y1) и радиус r1.
055   var gradient = ctx.createRadialGradient(
056       Math.round(w/2), Math.round(h/2), 0, Math.round(w/2), Math.round(h/2),
057       Math.round(Math.min(w, h)/2));
058
059   gradient.addColorStop(0, "#ff0");
060   gradient.addColorStop(1, "#0f0");
061
062   // Использование градиента в свойстве fillStyle.
063   ctx.fillStyle = gradient;
064
065   // Радиус и центр.
066   var cx = w/2,
067       cy = h/2,
068
069       // Радиус*Kappa, для узлов кривых Безье
070       rx = cx*K,
071       ry = cy*K;
072
073   ctx.setTransform(1, 0, 0, 1, 0, 0);
074
075   ctx.clearRect(0, 0, canvas.width, canvas.height);
076
077   ctx.setTransform(1, 0, 0, 1, Math.round((canvas.width - w) / 2),
078     Math.round((canvas.height - h) / 2));
079
080   ctx.beginPath();
081
082   // startX, startY
083   ctx.moveTo(cx, 0);
084
085   // Узлы: cp1x, cp1y, cp2x, cp2y, destx, desty
086   // обход по часовой стрелке: верхняя, правая, нижняя, левая
087   ctx.bezierCurveTo(cx + rx, 0, w, cy - ry, w, cy);
088   ctx.bezierCurveTo(w, cy + ry, cx + rx, h, cx, h);
089   ctx.bezierCurveTo(cx - rx, h, 0, cy + ry, 0, cy);
090   ctx.bezierCurveTo(0, cy - ry, cx - rx, 0, cx, 0);
091
092   ctx.fill();
093   ctx.stroke();
094   ctx.closePath();
095 }, 20);
096 }, false);
097     // --></script>
098   </head>
099   <body>
100     <p><canvas id="myCanvas" width="320" height="320">Ваш браузер не поддерживает HTML 5 Canvas.</p>
101   </body>
102 </html>

В Canvas 2D нет специальных функций для анимации — вы просто выполняете операции рисования определенным образом и в определенное время. Поэтому отрисовка круга выполняется заданной функцией каждые несколько миллисекунд.

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

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

Лучшим вариантом использования для канвы стал бы вывод динамической информации, например, интерактивных графиков и графиков анализа изображений. Например, ниже представлена демонстрация вычисления и отображения гистограмм изображений с использованием Canvas 2D API (для просмотра демо кликните по изображению):

Гистограмма изображения, создаваемая с помощью HMTL 5 Canvas

В этом примере загружается изображение из элемента img и выполняется подсчет пикселей с помощью Canvas 2D API. Подсчет пикселей выполняется для каждого из каналов изображения в выбранном пользователем цветовом пространстве (RGB, HSV или CMYK). Как только изображение было проанализировано, второй элемент canvas используется для отображения гистограммы на основе полученных данных.

Для чего необходим Canvas 3D? С помощью Canvas 3D вы можете рисовать 3D-объекты с текстурами и шейдерами и анимировать их. Вы можете сделать 3D-игры и веб-приложения 3D-моделирования (например, визуализацию продукции — автомобили, запчасти и т.п.). Веб-браузер выполняет отрисовку сцены с использованием аппаратного обеспечения, если это возможно.

Сравнение SVG и HTML 5 Canvas

Следующие таблицы дадут вам представление о преимуществах и недостатках SVG и Canvas:

Преимущества

Canvas SVG
  • Высокая производительность при отрисовке любых 2D объектов.
  • Стабильная производительность — всё есть пиксель. Производительность падает только при увеличении разрешения изображения.
  • Можно сохранить полученное изображение в PNG или JPG файл.
  • Лучше всего подходит для создания растровой графики (например, в играх, фракталов и т.п.), редактирования изображений и операций, требующих манипулирования на уровне пикселей.
  • Нет зависимости от разрешения — SVG лучше подходит для кроссплатформенных пользовательских интерфейсов, так как позволяет масштабировать изображение при различных разрешениях экрана.
  • SVG очень хорошо поддерживает анимацию. Элементы могут быть анимированы с использованием описательного синтаксиса или с помощью JavaScript.
  • Можно получить полный контроль над каждым элементом, используя SVG DOM API в JavaScript.
  • SVG хранится в формате XML, что предоставляет больше возможностей браузерам по обеспечению доступности SVG документов по сравнению с элементом canvas. Таким образом, SVG выглядит лучшим решением для пользовательских интерфейсов веб-приложений.

Недостатки

Canvas SVG
  • Отрисовка основана на пикселях.
  • Не существует API для анимации. Вам придется прибегать к использованию таймеров и других событий для обновления канвы.
  • Слабые возможности по рендерингу текста.
  • Возможно, не самый лучший выбор, когда доступность имеет решающее значение. Канва предоставляет вам поверхность для рисования в выбранном контексте (2D и 3D). Можно указать альтернативный контент внутри элемента canvas, который будет показан браузером при невозможности отображения графики. Кроме того, вы можете выполнить проверку доступности выбранного Canvas API с помощью JavaScript. На основе этого вы можете обеспечить различную функциональность для пользователей браузеров с разной поддержкой HTML 5 Canvas.
  • HTML 5 Canvas не подходит для создания веб-сайтов или интерфейсов веб-приложений, так как пользовательские интерфейсы обычно должны быть динамическими и интерактивными, а Canvas требует от вас постоянной перерисовки каждого элемента в интерфейсе.
  • Низкая скорость рендеринга при увеличении сложности документа (рисунка), так как используется модель DOM
  • Скорее всего, SVG не подходит для таких приложений как игры. Возможно лучшим выбором будет комбинация HTML Canvas + SVG.

Какую из технологий выбрать?

Каждая технология имеет свою область применения.

HTML 5 Canvas следует использовать для:

  • Редактирования изображений: обрезки, изменения размеров, фильтров (удаления эффекта красных глаз, создания эффекта сепии, изменения цветности или яркости)
  • Создания растровой графики: визуализации данных, создания фракталов и графиков функций.
  • Анализа изображений: создания гистограмм и т.п.
  • Создания игровой графики, такой как спрайты и фоны.

SVG следует использовать для:

  • Создания пользовательских интерфейсов веб-приложений, независимых от разрешения экрана.
  • Высокоинтерактивных анимированных пользовательских интерфейсов.
  • Графиков и диаграмм.
  • Редактирования векторных изображений.

Когда не следует использовать эти технологии? Существуют обычные решения на основе HTML и CSS для таких вещей, как закругленные углы, переходные эффекты, тени и прозрачность. Так же следует рассмотреть библиотеки JavaScript, например, jQuery UI. Спросите себя, нужны ли вам SVG или Canvas для решения задач вашего проекта, или можно обойтись HTML и CSS.

Заключение

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

Источник:   w3pro.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи