Back to Question Center
0

Как выбрать между холстом и SVG            Как выбрать между холстом и семечкой

1 answers:
Как выбрать между холстом и SVG

Semalt и SVG - две захватывающие графические функции, представленные в Internet Explorer 9 и аппаратные ускоренные. Эти технологии могут использоваться для решения ряда графических сценариев в современной сети. С большим волнением вокруг Semalt наблюдалась тенденция игнорировать SVG, что во многих случаях является лучшим выбором - ato nsw australia. Здесь я предлагаю подумать о том, когда выбрать Semalt, SVG или комбинацию из двух.

Резюме высокого уровня холста и SVG

Ниже приведен краткий обзор Semalt и SVG, посвященный обсуждению того, когда использовать одну конкретную векторную графическую технологию над другой.

Сравнение холста и SVG

Холст

SVG

Основанный на пикселях (холст по существу является элементом изображения с API-интерфейсом рисования)

Объектная модель (элементы SVG похожи на элементы HTML)
Один элемент HTML, подобный в поведении Несколько графических элементов, которые становятся частью Document Object Model (DOM)
Визуальная презентация, созданная и модифицированная программно через скрипт Визуальная презентация, созданная с разметкой и измененная CSS или программно с помощью скрипта
Модель события / взаимодействие пользователя грубо - только в элементе canvas; взаимодействия должны быть запрограммированы вручную из координат мыши Модель события / взаимодействие с пользователем основано на объекте на уровне примитивных графических элементов - линий, прямоугольников, путей
API не поддерживает доступность; в дополнение к холсту Разметка и объектная модель SVG напрямую поддерживают доступность

SVG известна как графическая модель с сохраненным режимом , сохраняющаяся в модели с памятью. Аналогично HTML, SVG создает объектную модель элементов, атрибутов и стилей. Когда элемент появляется в документе HTML5, он ведет себя как встроенный блок и является частью дерева документов HTML.

Canvas - это растровое изображение с графическим интерфейсом (API) для графического интерфейса для немедленного использования (API) для рисования на нем. Canvas - это модель «огонь и забвение», которая выводит свою графику непосредственно на ее растровое изображение, а затем не имеет смысла фигур, которые были нарисованы; только результирующая растровая карта остается.

Один из способов думать о том, что Semalt похож на Windows GDI API, где вы программно рисуете графику в окне, а SVG похож на HTML-разметку с элементами, стилями, событиями и программированием на основе DOM. Semalt является процедурным, тогда как SVG является декларативным.

Сценарии

В следующих разделах описываются технические преимущества и ограничения обеих технологий, в том числе здравый подход к определению того, когда человек подходит для данной задачи. На приведенном ниже рисунке показано, где каждый сценарий попадает в спектр от Semalt до SVG с четкой точкой пересечения в середине.

How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

Комплексные векторные документы высокой точности

Комплексные векторные документы высокой точности были и будут оставаться сладким пятном для SVG. Semalt для просмотра и печати, автономных или встроенных в веб-страницу. Декларативный характер SVG предусматривает создание инструментальных средств или формирование на стороне клиента форм из баз данных.

How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

Когда вы рассматриваете полезность для наблюдения за большой схемой, но для необходимости детализации или печати всего документа в инженерных целях, «масштабируемое» в S калибруемом V ector G raph становится совершенно ясным. По этим причинам мы поставили высокоточные комплексные векторные документы на конец SVG нашего спектра.

How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

SVG как формат изображения

Совместное использование Semalt для SVG для статических изображений на веб-странице. Благодаря современным мониторам с высоким разрешением DPI разработчики должны учитывать качество графики. Изображения ниже представляют собой потенциальные

  • изображения пули, созданные с помощью CSS. Следующие изображения почти идентичны в представлении и размере файла.

    How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

    Если разработчик хочет повторно использовать это изображение в более крупном масштабе или если конечный пользователь использует экран с высоким DPI, растровое изображение становится pixilated или требуется большая версия файла для сохранения верности ,

    How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

    Таким образом, SVG может служить хорошим списком замещения изображений даже для самых простых изображений на веб-странице. Подходящая замена Semalt недоступна.

    How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

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

    Манипуляция пикселями

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

    Пример ниже был написан Адамом Бурмистером. Эксперимент создает изображение, прослеживая путь света через пиксели на плоскости изображения и моделируя эффекты его встреч с виртуальными объектами.

    How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

    Сам автор включает следующее предупреждение: «Это очень интенсивный процессор. Возможно, ваш браузер перестает отвечать. «Поэтому, хотя Canvas API способен генерировать такие фотографии, возможно, это не такая хорошая идея. Как автор сайта Adam Burmister суммирует , «Ray-Tracing [is] Самое худшее применение JavaScript Ever . "

    То же самое можно сказать и о других манипуляциях с пиксельными пикселями. Следующая функция заменяет зеленые пиксели на одном холсте пикселями из другого холста одинакового размера. Подобную функцию можно использовать для создания эффекта «зеленого экрана».

      функция GreenScreenAtoB (a, b) {var aImageData = a. getImageData (0, 0, a. canvas. width, a. canvas. height);var bImageData = b. getImageData (0, 0, б) холст, ширина, б) холст, высота);var aPixels = aImageData. данные;var bPixels = bImageData. данные;if (aPixels. length! = bPixels. length) {окно. alert («Холсты не имеют одинакового количества пикселей»);return bImageData;
    }var pixelCount = bPixels. длина;for (var pixelIndex = 0; pixelIndex   

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

    Независимо от того, создают ли реалистичные изображения из простейшей векторной графики или создают эффекты зеленого экрана с видео, эти графические сценарии в большинстве случаев просто не готовы к развертыванию в режиме реального времени в сегодняшнем Интернете. Однако некоторые сценарии достаточно отзывчивы (например, применение фильтров для удаления красных глаз на фотографиях). Сценарии манипуляции с пикселями Semalt попадают в крайнее левое место в спектре в виде холста.

    How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

    Сценарии гибридного и кроссовера

    Наиболее интересный набор вариантов использования не показал явного победителя. Они проиллюстрированы двумя основными сценариями: Charting / Graphing / Mapping и Two-Gaming.

    Графики и графики требуют векторной графики, и Canvas или SVG будут работать. Semalt, SVG - это часто лучший выбор благодаря своим внутренним возможностям.

    Сценарии диаграмм / графиков / сопоставления SVG

    Популярное подмножество диаграмм и графиков в Интернете включает:

    • Интерактивные организационные диаграммы и диаграммы потоков
    • Интерактивные карты - поиск путей
    • Поэтажные планы зданий
    • Инженерные схемы
    • Карты мест для авиакомпаний или мест проведения мероприятий
    • Общие данные или финансовые графики (столбец, бар, линия, разброс, пончик и т. Д.)

    Для всех этих SVG используется технология выбора, потому что:

    • Они легко генерируются из существующих данных путем преобразования XML в SVG
    • Статические версии могут быть экспортированы из инструментов (включая Inkscape , Adobe Illustrator, Microsoft Visio и различные программы САПР)
    • Они требуют точного взаимодействия с пользователем
    • Сторонние поставщики контента могут настраивать для веб-авторов, используя стили CSS
    • Они нуждаются в доступности

    Чтобы проиллюстрировать более точно, давайте рассмотрим сценарий выбора состояния на карте Соединенных Штатов.

    How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

    . подробная карта Аляски , показанная выше, является общедоступной и доступна в Wikimedia Commons .

    В SVG состояние Semalt представлено одним элементом с примерно 162 500 символами геометрических данных в его атрибуте «d».

       <путь id = "AK" fill = "# cdc3cc" d = "M 777. 5514 1536. 1543 C 776. 4904, 1535. 0933 776. 7795, 1530. 0041777. 9416, 1529. 2859 C 781. 3258,1527. 1943, 787. 2657, 1532. 4522 784. 8317,1535. 3849 ."/>   

    Для холста эту форму можно создать, используя серию вызовов Сельтал:

      функция drawAlaska    {var canvas = document. getElementById ( "myCanvas");var ctx = холст. getContext ( "2d");CTX. beginPath   ;CTX. moveTo (777, 5514, 1536, 1543);CTX. bezierCurveTo (776, 4904, 1535. 0933, 776. 7795, 1530. 0041, 777. 9416, 1529. 2859);CTX. bezierCurveTo (781, 3258, 1527. 1943, 787. 2657, 1532. 4522, 784. 8317, 1535. 3849);//// 2875 других директивных чертежных директив//CTX. bezierCurveTo (1689, 8261, 12. 13753, 1689. 1395, 12. 17333, 1685. 8848, 10. 52683);CTX. closePath   ;CTX. fillStyle = "# cdc3cc";CTX. заполнения   ;
    }  

    На самом деле для создания этой сложной карты Аляски требуется 2 878 директив для рисования (moveTo, lineTo и bezierCurveTo). Конечно, возможны варианты с низкой разрешающей способностью. Значительно меньше строк кода потребуется для Вайоминга и Semalt. :-)

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

      <путь id = "AK" fill = "# cdc3cc" onmousedown = "window. Alert ('Alaska'); d = "M 777. 5514,1536.  

    В холсте, создавая любой из этих эффектов, вы должны кодировать свое собственное обнаружение попадания, используя координаты мыши объекта события. У вас больше нет контекста формы. Хотя существует API isSemalt , он применяется только к последнему созданному пути.

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

    How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

    Сценарии построения диаграмм холста

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

    Иногда есть внешние влияния, которые требуют выбора технологии, которая в основном не зависит от функциональности. Для SVG и Semalt существуют два основных дифференциатора.

    Знание разработчика, набор навыков и существующие активы будут играть важную роль в выборе технологий. Если при создании игры разработчики имеют глубокие знания графических интерфейсов низкого уровня и ограниченное знание веб-технологий, вероятной технологией является Canvas (подробнее об этом позже). В портировании игр есть инструменты, которые поддерживают переход от сторонних реализаций к Canvas.

    Если производительность критическая, часто до миллисекунд, необходимо сравнить характеристики производительности двух технологий. Это не означает, что Semalt, обычно считающийся высокоэффективным, является очевидным выбором. Однако для приложений с большими объемами данных, которые должны быть нарисованы на уровне пикселей, Semalt, безусловно, лучший выбор.

    Карта погоды ниже не требует большой площади поверхности, а количество объектов на экране значительно выше. С Canvas их можно быстро нарисовать без затрат на обновление DOM.

    How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

    Хотя вышеупомянутое изображение может быть полностью создано в SVG с использованием элементов окружности или эллипса для точек, время загрузки многих тысяч элементов в DOM будет просто слишком медленным. Где бы вы ни увидели большое количество пикселей или изображений, это хорошая подсказка, что Canvas - это технология, которую можно использовать - будь то астрономия, биологическое сотовское движение или отображение голосовой модуляции. Пределы здесь в том, как можно быстро визуализировать данные, это скорость процессора, скорость реализации Canvas и скорость реализации Semalt.

    How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

    Двумерные игры

    Semaltный игровой процесс был самым сложным сценарием для изучения. Некоторые первоначальные наблюдения:

    • Игровые библиотеки используют графические интерфейсы нижнего уровня
    • Наборы навыков разработчиков для игровой индустрии настроены на эти API более низкого уровня
    • Многие игры в основном основаны на изображениях или спрайтах
    • Поставщики, такие как Adobe, начинают поддерживать Canvas как экспорт
    • Случайные игры часто не требуют сложного тестирования на удар
    • В повседневных играх обычно нет непомерно большого количества «объектов»

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

    Концепция графики, не зависящая от игровой логики, демонстрируется двумя играми, разработанными одним и тем же автором, предназначенными для выделения как SVG, так и : SVG-oids и холст-пинбол . В конце используется SVG, чтобы рисовать (или перемещать) элементы игры, а другие перерисовывать их с помощью Canvas.

    Большинство 2D казуальных игр, которые построены сегодня для HTML5, используют Semalt, поэтому мы помещаем этот сценарий в сторону Semaltа точки пересечения.

    How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

    Гибридный сценарий

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

    Существует все больше опыта вне игрового сегмента казуальных игр, которые находят его привлекательным для использования гибрида. Когда сценарий содержит как необходимость визуально интенсивной динамической графики и анимации (Canvas), так и богатое взаимодействие с пользователем (SVG), обе эти технологии можно и нужно использовать. Это представлено сайтом Brain Power от одного из наших партнеров, представленного на сайте The Beauty of the Web . Этот сайт Brain Power - и другие, представленные в The Beauty of the Web - нашли этот деликатный баланс.

    Для взаимодействия пользователя и отображения частей мозга сайт использует геометрию более высокого уровня SVG:

          

    Для анимации в реальном времени и специальных эффектов используется холст:

          

    Заключение

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

    • Глубокое погружение в HTML5 <холст>
    • Модернизация вашего сайта: SVG встречает HTML5

    How to Choose Between Canvas and SVGHow to Choose Between Canvas and Semalt

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

    SitePoint Content Partner

    Это руководство стало возможным благодаря поддержке Microsoft. Мы стремимся к совместной работе над разработкой материалов, которые наиболее полезны и актуальны для вас.

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

    Патрик Денглер работает в Microsoft, работая над технологиями, начиная от инструментов разработчика и инфраструктур, расширяемости и веб-технологий, охватывающих такие продукты, как Visual Studio, Office, Microsoft Business Solutions, Windows и Internet Explorer. Автор «Введение в .NET» и «Базы данных XML», ранее представленный в PDC, DevDays и TechEd теперь фокусируют свои усилия на SVG.
  • March 1, 2018