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