Предыстория. Canvas: один шаг назад, два шага вперед. Технологии будущего. Оптимизация структуры веб-страниц
Появление Canvas
Основные возможности
Примеры использования Canvas, SVG и VML
Проблемы быстродействия
В 1998 году компания Microsoft при поддержке других крупных производителей предложила W3C свой стандарт отображения векторной информации – VML (англ. Vector Markup Language – векторный язык разметки). Он был основан на текущем формате представления документов в вебе – HTML – и расширял его до некоторого «векторного» языка. Компания Microsoft активно продвигала и продвигает данный формат и включает его во все версии IE, начиная с 5.0. В рамках стандарта он окончательно закреплен в качестве части спецификации Open Office XML (ISO 29500:2008 и ECMA-376) в 2008 году.
В этом же 1998 году Adobe, IBM, Netscape и Sun вносят в W3C предложение о рассмотрение своего стандарта в противовес Microsoft – PGML (англ. Precision Graphics Markup Language – точный графический язык разметки). Не желая делать ни один стандарт проприетарным, W3C создает рабочую группу, которая на основе имеющихся предложений в 1999 году создает набросок еще одного стандарта – SVG (англ. Scalable Vector Graphics – масштабируемая векторная графика). Этот стандарт (хотя до сих пор закрепленный только в форме рекомендации, последняя версия 1.1 от 2003 года) находит гораздо большую поддержку у производителей браузеров и на данный момент включен практически везде (кроме, естественно, IE).
Сейчас большинство JavaScript-библиотек, которые предлагают работу с векторной графикой, включают поддержку SVG для всех браузеров и поддержку VML для IE. В качестве характерного примера можно привести Яндекс.Карты или Google Maps. Оба формата (SVG и VML) обладают практически одинаковыми возможностями, например, ниже приведен код на VML для отображения синего овала:
<html xmlns:v="VML">
<style type="text/css">
v\:*{behavior:url(#default#VML);position:absolute}
</style>
<body>
<v:oval style="left:0;top:0;width:100;height:50"
fillcolor="blue" stroked="f"/>
</body>
</html>
Этот же код на SVG:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50">
<ellipse cx="50" cy="25" rx="50" ry="25" fill="blue" stroke="none" />
</svg>