От автора: есть ли случаи, когда HTML5 Canvas будет использовать предпочтительнее, чем SVG? Эти две HTML5 технологии можно использовать для создания удивительной графики и визуальных эффектов. Однако есть ли различия в том, какую технологию использовать в своих проектах?
В какой-то момент комментарий Крэйга подвел тему к прямому противопоставлению Canvas и SVG, и он пишет: «Одно из преимуществ Canvas – в нем нет DOM! Это позволяет анимировать тысячи объектов без лишней нагрузки, что идеально подходит для игр.»
Развив тему, поднятую Крэйгом, я постараюсь наилучшим образом раскрыть вопрос, поставленный выше, и обсудить ключевые факторы при выборе той или иной технологии. Сперва, скажем пару слов и познакомим вас с HTML5 Canvas и SVG.
Что такое HTML5 Canvas?
Вот как WHATWG спецификация описывает элемент canvas: «Элемент canvas содержит скрипты с холстами под разные разрешения экрана, которые можно использовать для рендеринга диаграмм, игровой графики, рисунков или другой визуальной графики налету.»
Другими словами, тег canvas — это поверхность, на которой вы можете создавать и манипулировать каждым пикселем растровых изображений с помощью JavaScript интерфейса. Пример стандартного кода.
|
1 |
<canvas id="myCanvas" width="800" height="800"></canvas> |
|
1 2 3 4 |
var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.fillStyle = '#c00'; context.fillRect(10, 10, 100, 100); |
Получая ссылки на 2D объекты контекста, можно использовать методы и свойства HTML5 Canvas API. В примере выше я нарисовал простой красный квадрат 100 х 100 пикселей, расположенный на canvas поверхности 10px слева и 10px сверху.
Так как технология зависима от разрешения, изображения на canvas могут потерять в качестве при увеличении холста или просмотре на ретина дисплеях.
Рисование простых форм – это вершина айсберга. С помощью HTML5 Canvas API можно рисовать дуги, контуры, текст, градиенты и т.д. Также вы можете манипулировать каждым пикселем полученного изображения. Это значит, что вы можете заменить один цвет другим в определенной области изображения, анимировать рисунок и даже вставить видео в canvas и изменять его внешний вид.
Что такое SVG?
SVG расшифровывается как Scalable Vector Graphics (масштабируемая векторная графика). Из спецификации: «SVG – это язык описания двумерной графики. Независимо и в паре с XML язык использует XML синтаксис XML10. В паре с HTML5 используется HTML5 синтаксис HTML… Рисунки в SVG могут быть динамичными, и с ними можно взаимодействовать. Анимацию можно создать декларативно (т.е. добавив элементы SVG анимации в контент) или с помощью скрипта.»
SVG – это файл XML формата, спроектированный для создания векторной графики. В отличие от HTML5 Canvas сгенерированных изображений у данной технологии есть преимущество – при увеличении или уменьшении векторного изображения сохраняется его четкость и высокое качество.
Тот же самый красный квадрат, созданный выше на HTML5 Canvas, только теперь на SVG:
|
1 2 3 4 |
<svg xmlns="//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 – пример немедленного режима: для того, чтобы нарисовать объекты, создать и поддерживать модель или сцену финального вида, а также определить, что нужно обновить, вам, как разработчику, необходимо разработать команды. Graphics API браузера просто передает ваши команды в браузер на выполнение.
А SVG использует режим удержания. Вы просто задаете команды для рисования, а Graphics API создает в памяти браузера модель или сцену конечного результата и переводит ее в команды для отрисовки в браузере.
Возвращаясь к комментарию Крэйга, canvas, как пример немедленной графики, не имеет DOM, Document Object Model. В Canvas вы рисуете пиксели, а система сразу же все о них забывает, снижая объем памяти, необходимый на поддержание внутренней модели рисунка. В SVG каждый нарисованный объект добавляется в свою внутреннюю модель, что облегчает вам жизнь, как разработчику, но снижает производительность.
На основе отличий немедленного режима и режима удержания и других характеристик canvas и SVG можно выделить несколько примеров, когда одна технология будет больше подходить под цели вашего проекта.
HTML5 Canvas и SVG вместе
В HTML5 Canvas дают четкую рекомендацию не использовать авторам элемент canvas там, где можно подобрать что-то лучше. К примеру, в богатом на графику хедере лучше использовать HTML и CSS, а не canvas.
Теперь необходимо разработать несколько возможных сценариев применения canvas, где он будет подходить больше, чем SVG. Для этого давайте рассмотрим некоторые функции по canvas и SVG. Так мы сможем понять их возможности и ограничения.
Для чего подходит HTML5 Canvas
Обобщая все сказанное, HTML5 Canvas – это система немедленной графики, зависимая от разрешения экрана, не поддерживающая собственную модель. Последняя особенность является ключевой и делает технологию молниеносно быстрой. Поэтому HTML5 Canvas отлично подходит для выполнения следующих задач:
Трассировка лучей
Трассировка лучей – это техника создания 3D графики. Если вам интересно, по ссылке можете взглянуть на приложение с трассировкой лучей в действии, автор Марк Вебстер.
HTML5 Canvas, безусловно, подходит намного лучше, чем SVG для этой задачи, однако это не означает, что трассировка лучей лучше всего работает на canvas. На самом деле, нагрузка на процессор может быть весьма значительной, а браузер может зависнуть.
Рисование большого количества объектов на маленькой поверхности
Еще один пример – это, когда в приложении необходимо нарисовать большое количество объектов на относительно небольшой поверхности. Например, неинтерактивная визуализация данных в реальном времени, как прогноз погоды.
Замена пикселей в видео
Как показано в статье HTML5 Doctor, еще один пример это замена фонового цвета в видео на другой цвет, сцену или изображение.
Для чего не подходит HTML5 Canvas
С другой стороны есть множество случаев, когда canvas не самый лучший выбор в отличие от SVG.
Масштабирование
В большинстве вариантов, где требуется масштабируемость, SVG подходит намного лучше, чем canvas. Примеры это графика высокой точности и сложности, такая как строительные и инженерные диаграммы, организационные диаграммы, биологические диаграммы и т.д.
В SVG при увеличении или печати изображений сохраняется как высокое качество, так и все детали. Такие документы можно генерировать из базы данных, из-за чего XML формат SVG очень подходит под эту задачу. Также очень часто графика на SVG интерактивна. Как пример подумайте о карте мест при заказе билета на самолет онлайн – крайне подходящий пример использования для такой системы удерживаемой графики, как SVG.
Доступность
Крайне не рекомендуется использовать canvas в том случае, если вам важна доступность. Все нарисованное в canvas это просто кучка пикселей, которые нельзя считать или интерпретировать с помощью вспомогательных технологий или ботов поисковых движков. Это еще одна область, где лучше справится SVG: SVG это просто XML файл, который могут считывать как люди, так и машины.
Отключенный JavaScript
Если вы хотите выключить JavaScript в своем приложении, тогда canvas вам точно не подойдет. По существу, с canvas можно работать только с включенным JavaScript. А с SVG все наоборот: рисовать SVG графику можно в стандартном редакторе векторных изображений типа Adobe Illustrator или Inkscape, а контролировать внешний вид и анимацию можно с помощью одного лишь CSS.
Расширенные сценарии совместного использования HTML5 Canvas и SVG
Есть случаи, когда ваше приложение может взять лучшее от двух миров и объединить Canvas и SVG. К примеру, в игре на canvas для того, чтобы сохранить хорошую масштабируемость и снизить вес по сравнению с PNG, спрайты можно сделать из SVG изображений, полученных из графического редактора; или в самом графическом редакторе интерфейс может быть сделан на SVG, а холст для рисования на canvas.
Заключение
В этой статье я разобрала некоторые из ключевых особенностей HTML5 Canvas и SVG, а также дала несколько советов о том, какая из технологий может больше подходить под конкретные задачи.
Результатом данного исследования, на мой взгляд, стало осознание того, что не существует жестких правил, когда лучше использовать canvas, а не SVG. Тем не менее, различие между немедленным режимом и режимом удерживания дало нам небольшие подсказки о сценариях, в которых можно использовать преимущества canvas над SVG и наоборот. Чтобы помочь вам выбрать между HTML5 Canvas и SVG, закончить статью я хочу очень точным советом:
«… если вам нужно нарисовать пиксели на экране и забыть о возможности их изменения и получения доступа к ним, возможно, вам больше подойдет canvas. И если с другой стороны вам необходимо, чтобы вы могли получать доступ к изображению и изменять его, то тут больше подойдет SVG. HTML5 & CSS3 For the Real World, 2nd Edition»
HTML5 Canvas или SVG, а что выберите вы?
Автор: Maria Antonietta Perna
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
