VML, SVG, Canvas: вчера, сегодня, завтра
VML / PGML: капелька истории
Sun / IBM / Adobe 10 апреля 1998 возраст выкатывают свое решение на представления данных в векторном формате в течение вебе — PGML. Microsoft тожественный не дремлет и в сопровождении с рядом крупных компаний предлагает дословно через месяц (13 мая) в рассмотрение W3C альтернативное приговор — стандарт VML. Дальше Microsoft иго свою линию и включает поддержку VML уже на IE 5.0 (на марте 1999 года).
Очевидно, который технология, обладающая такой мощной поддержкой в течение браузерах того времени простой так не могла умереть (на отличие от PGML, которая, до-видимому, поддерживается только в течение настольных приложений тех компаний, которые его выдвинули). И на 2008 году VML совершенно закрепляется в качестве стандарта на составе Open Office XML.
SVG: малость истории
SVG, будучи инициативой, исходящей конкретно с W3C, развивался как величина весьма динамично. В конце 1998 возраст была образована SVG Working Group, которая занялась разработкой этого формата, сквозь полгода (в июле 1999 возраст) она предложила первый видоизменение спецификации, и уже в течение 2001 году увидел аристократия стандарт SVG 1.0.
На известный момент основным работающим стандартом является SVG 1.1 (утвержденный в течение 2003 году). В июне 2012 возраст планируется предоставить полностью снаряженный SVG 2.0.
Canvas: истоки
История Canvas в течение многом отлична от упомянутых векторных стандартов. В в отношении-первых, в 2005 году Apple предложила извлекать уже вендренную ею технику Canvas с целью попиксельного изменения изображения внутри который-то области (Canvas, холста). Эта мысль была подхвачена Mozilla, которая интегрировала ее на Gecko 1.8 (Firefox 1.5 да выше), а позже равным образом Opera (Opera 9.0 вышла от поддержкой Canvas).
Затем Canvas был включен на готовящийся стандарт Web Applications 1.0, кто затем вошел в состам HTML5. Планируется, сколько поддержка Canvas войдет на следующую версию IE.
VML + SVG: векторные форматы
На воплощенный момент SVG поддерживается всеми современными браузерами. С Целью IE необходимо использовать эмуляцию всех методов после VML (либо создавать альтернативное добавление).
Для описания SVG используется XML величина. При этом, естественно, возможны любые преобразования получившегося изображения через DOM-методов (т.е. дозволительно использовать любую JavaScript-логику «поверх» векторных форматов).
Спектр использования векторной графики немедленно довольно широк: это отображение масштабируемых объектов, областей для картах, вывод графиков. Стоит отметить, который в силу XML-природы SVG может статься легко интегрирован с другими форматами, в течение частности, сейчас идет его интеграция от MathML. Также не грех назвать одно «нестандартное» применение VML — к эмуляции полупрозрачности в PNG на IE. Для этого разработана специальная JavaScript- комната — DD_belatedPNG.
Canvas: растровые операции
Основным отличием через SVG в Canvas является его чисто динамическая (дозволено использовать только при помощи JavaScript) да растровая (нет объектов равно связе между ними) природа. Однако на некоторых случаях это всего плюс (например, сложные области в картах было бы логичнее окружать при помощи растровой, а отнюдь не векторной графики).
Для работоспособности на IE используется эмуляция начиная с помощью VML.
Как равным образом всякую популярную технологию, Canvas используют за поводу и без повсюду, где только можно. Например, в видах отображения в браузере произвольных шрифтов (поскольку корректная помощь @font-face несколько запаздывает): typeface.js (кстати есть более правильное начиная с идеологической точки зрения приговор данной проблемы — cufon). Также хочется отметить прототип портирования библиотеки Processing — Processing.js. Множество других примеров использования технологии дозволительно посмотреть на www.canvasdemos.com.
Canvas противу SVG: раунд 1
На известный момент Canvas при решении большинства задач справляется почти ними быстрее, чем SVG. Довольно давно был разработан модель использования Canvas для ряда задач Google Maps. В нем зафиксирован польза скорости в 200-500% ( в пользу кого всех браузеров, которые поддерживают Canvas).
Также позволительно привести еще один тест скорости отображения объектов на Canvas и SVG. Здесь SVG еще проигрывает.
Для уточнения вопросов производительности не возбраняется обратиться к исследованию, установившему закономерность в обществе производительностью SVG, Canvas равным образом параметрами изображения. В результате оказывается весь очевидным, что при увеличении числа объектов ( чтобы SVG — векторных) производительность SVG падает изо всех сил (почти экспоненциально), а Canvas — остается для стабильном уровне. Здесь стоит отметить, сколько размер активной области быть этом не изменяется.
Однако ежели мы начнем увеличивать круг построения (размеры объектов), то тогда векторный формат показывает себя в течение всей красе: производительность практически отнюдь не меняется. Производительность Canvas падает ( как бы и следовало ожидать) квадратичным образом через числа объектов (площадь активной области увеличивается квадратично).
Из этого дозволено сделать простой вывод: коль вы собираетесь использовать точечную (пиксельную) графику, то лучше Canvas в видах этой цели ничего отнюдь не подходит. При работе из большими (по площади) векторными объектами лучше пользоваться SVG. Также довольно необходимо дублировать всю функциональность чрез VML для IE 8 да ниже.
Спасибо после внимание. Вопросы?