Октябрь 13th, 2014 
Topaz Наверняка мало кто из вас слышал о VML (Vector Markup Language). Этот удобный и мощный язык был незаслуженно забыт по трем причинам:
— выполнение его предполагало наличие специального plug-in в IE у пользователя
— FLASH во многих случаях оказался удобней
— SVG (альтернативный язык, применяемых для сходных целей) вытеснил его
Но VML привлекателен своей простотой (достаточно базового знания HTML) и безопасностью (в нем не было обнаружено «дырок», таких как во Флеше). С помощью него можно рисовать графики и много других нужных вещей. Вот, например, один из примитивов VML:
Итак, с чего начать? Начать нужно с понимания того, что этот язык является подмножеством XML и, следовательно, все тэги должны быть обязательно закрыты. Теперь нам нужно немного изменить начало нашей странички, а точнее, аттрибуты тэга html:
С этой строки начинается любой VML-документ.
Далее нам нужно сделать следующее объявление:
Ну вот, теперь в любом месте между тэгами <body> и </body> мы можем использовать тэги VML, например:
(нарисует прямоугольник со скругленными углами, ширина 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: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, например кривую такого графика:
можно заменить такой строкой
В следующей соей статье я постараюсь осветить SVG, а пока — поэкспериментируйте с VML.
Успехов!
Источник: woweb.ru
Опубликовано в рубрике 
Метки: