Портал для веб-мастера
Вход пользователей
Поиск статей
WoWeb.ru » Статьи » Программирование для Web » HTML

Введение в VML - язык описания векторной графики
Обзор

Наверняка мало кто из вас слышал о VML (Vector Markup Language). Этот удобный и мощный язык был незаслуженно забыт по трем причинам:

- выполнение его предполагало наличие специального plug-in в IE у пользователя
- FLASH во многих случаях оказался удобней
- SVG (альтернативный язык, применяемых для сходных целей) вытеснил его

Но VML привлекателен своей простотой (достаточно базового знания HTML) и безопасностью (в нем не было обнаружено "дырок", таких как во Флеше). С помощью него можно рисовать графики и много других нужных вещей. Вот, например, один из примитивов VML:

Итак, с чего начать? Начать нужно с понимания того, что этот язык является подмножеством XML и, следовательно, все тэги должны быть обязательно закрыты. Теперь нам нужно немного изменить начало нашей странички, а точнее, аттрибуты тэга html:

<html xmlns:v="urn:schemas-microsoft-com:vml">

С этой строки начинается любой VML-документ.
Далее нам нужно сделать следующее объявление:

<style> v:* { behavior: url(#default#VML); } </style>

Ну вот, теперь в любом месте между тэгами <body> и </body> мы можем использовать тэги VML, например:

<v:roundrect style="width:150pt;height:50pt"/>

(нарисует прямоугольник со скругленными углами, ширина 150б высота 50)

Подробнее

Так в чем же фишка? А фишка в том, что мы можем делать с нашими объектами после загрузки все, что пожелаем - ведь, как вы заметили, параметры фигур описываются точно так же, как и в стилях. Кроме того, мы можем менять параметры и положение объектов VML при помощи скриптов. Например, нарисовать линию в VML очень просто:
<v:line from="10,10" to="100,100"/>
Еще можно нарисовать, например, овал - это для сравнения:
<v:oval style="position:absolute;top:100;left:100; width:150pt;height:50pt" fillcolor="green"/>
А вот пример с использованием многих разных фигур:

<v:line strokecolor="red" strokeweight="2pt" from="100pt,100pt" to="200pt,150pt">
<v:stroke endarrow="diamond"/>
</v:line>

<v:line strokecolor="yellow"strokeweight="2pt" from="100pt,100pt" to="50pt,100pt" >
<v:stroke endarrow="classic"/>
</v:line>

<v:line strokecolor="blue" strokeweight="2pt" from="100pt,100pt" to="120pt,120pt" >
<v:stroke endarrow="block"/>
</v:line>

<v:line strokecolor="black" strokeweight="2pt" from="100pt,100pt" to="150pt,200pt">
<v:stroke endarrow="none"/>
</v:line>

<v:line strokecolor="green" strokeweight="2pt" from="100pt,100pt" to="200pt,85pt">
<v:stroke endarrow="oval"/>
</v:line>

<v:line strokecolor="green" strokeweight="2pt" from="100pt,100pt" to="200pt,100pt">
<v:stroke endarrow="open"/>
</v:line>

<v:oval style="width:100pt; height: 50pt" fillcolor="pink" />
<v:curve from="10pt,10pt" to="100pt,10pt" control1="40pt,30pt" control2="70pt,30pt">
</v:curve>

<v:rect id=myrect fillcolor="red" style="position:relative;top:100;left:100;width:20;height:20;rotation:10">
</v:rect>
<>

Для удобства можно включать в этот код комментарии HTML.
Фигуры VML при этом являются такими же объектами для скриптовых языков типа JavaScript, как и объекты HTML, таким образом, мы имеем к ним полный доступ и можем динамически модифицировать. И еще одно хорошее преимущество: можно значительно уменьшить размер Вашей странички, заменяя несложные рисунки и графики тэгами VML, например кривую такого графика:

можно заменить такой строкой

<v:polyline points="5pt,10pt 15pt,20pt 100pt,50pt 50pt,100pt 5pt,10pt"/>

В следующей соей статье я постараюсь осветить SVG, а пока - поэкспериментируйте с VML.
Успехов!
Автор: Валерий Полях · Добавлена: 2002-10-14
Источник статьи · Просмотров: 5910 · Рейтинг: 5.0

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела
Flash
Apache
WWW
PhotoShop
Веб-дизайн
Раскрутка и реклама
Базы данных
3D графика
Хостинг
Истории веб-мастеров
Web-технологии
Сетевая безопасность
Программирование для Web
Операционные системы

Новые статьи
Лучшие статьи
Популярные статьи
Комментируемые статьи
Разделы сайта
Скрипты
Статьи
Шрифты
Флэш исходники
HTML шаблоны
Партнерки
Клипарты
Смайлы
Фоны
Гифы
Иконки
Опрос сайта
Есть ли у вас свой сайт?
Всего ответов: 140899
Наша кнопка
WoWeb.ru - портал для веб-мастера