Click here to Skip to main content
15,861,172 members
Articles / Web Development / HTML
Article

Introduction to VML

Rate me:
Please Sign up or sign in to vote.
4.86/5 (4 votes)
16 Jan 20023 min read 277.2K   32   36
This article gives a brief overview of VML and shows some examples and practical uses of this cool technology.

Introduction

When I first started playing around with HTML, I couldn't understand why there was no functionality to draw shapes and non-horizontal lines. It was only a couple of years later that I discovered VML (soon to be replaced by SVG). Don't get me wrong, HTML is an incredibly powerful GUI tool, but with the advent of vector graphics for the web, its power grows exponentially.

Overview

VML (vector markup language) is the technology that allows developers to draw directly onto an HTML page as if it were a GDI canvas. The syntax is made up of 2 parts: markup and code. These are mutually exclusive. Unfortunately, possibly due to a very slow adoption rate, the VML object model is poorly documented and rarely used in samples (here too). In order to use VML, you need to ensure that the IE5.0 install included the VML plugin. Here's a really basic VML shape.

Want to get a complete sample going on your machine? Firstly, you'll need to "import" the namespace into you HTML page:

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

Next, you'll need to add a new behaviour to the page:

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

That's it. It won't do anything, but it makes your page VML-aware. This base code will be presumed for the rest of examples. Try adding this anywhere within the <body> tag:

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

Note that valid XML syntax applies. If you don't adhere to this axiom, then the page could display unpredictably and make debugging very tedious. The actual VML markup is pretty self-explanatory and human-readable (a general goal of the XML standard). Note the v: tag-prefix, this specifies to the IE rendering engine that the roundrect tag in this case is to be handled differently to other tags.

Detailed view:

So, what's the point? One of the advantages of VML is its minute size when compared to images. Depending on the type of webplications you design, this could be reason enough. Also:

  • ability to alter styles(colors, etc...) at after-load time.
  • ability to engage dynamic scripts. (explained later)

So, hopefully, you can see that VML is more than just a distorted 1x1 pixel image. Here's the code for the famous diagonal line that I wanted to do in HTML for so long:

HTML
<v:line from="10,10" to="100,100"/>

The code is really neat and simple (albiet for simple shapes). For this type of shape, a from(x,y) to(x,y) co-ord syntax is used. The above samples are probably enough for most simple web graphics, but let's dive into some more.

Try this:

HTML
<v:oval style="position:absolute;top:100;left:100; width:150pt;height:50pt" fillcolor="green"/>

Same concept, just a different shape. Note the all too familiar style tag attributes.

Here's a sample that uses a bunch of different shapes.

HTML
<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>

As foreign as it seems (to most), using comments in HTML might be a really good plan here.

One of the awesome things about VML as a graphics tool is that ALL paint events are handled for you. Try minimising the browser or "un-maximise" it and move a part of it off the edge of your screen and out again. It repaints on it's own - and with no noticable performance penalty! This is a massive bonus for those graphics guys out there.

What about a real world use? Here's the output from a graphing engine I supposedly work on during bouts of insomnia.

A huge bonus that this approach has over the standard "let-the-server-make-a-gif" idea, is that the client (browser) can alter the shapes at the client's will. I achieve this by giving each applicable shape an id and use inline event-handlers to setup how mousedown, mousemove and mouseup events are handled. After that it's just a matter of implementing a bit of drag-and-drop code. So, put another way, VML shapes are still objects as far as JScript/VBScript is concerned.

The other technique that you can use to draw shapes is co-ordinate pairs. This can be a lot trickier to code by hand, but does gives you (virtually) unlimited power over your web presentation.

Here's an example:

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

Conclusion & Call to action

Currently, the SVG specification is set to overtake VML and will eventually be supported natively by the main browsers. But in the meantime, VML is easy to use and can offer a new avenue of expression for lowly web developers.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
South Africa South Africa
* Visual C# MVP 2004, 2005 - South Africa
* SADeveloper.NET User Group co-founder and lead 2003, 2004, 2005

MSN : simon_stewart AT hotmail.com
Email : simon AT brokenkeyboards.com
Skype: brokenkeyboards
CEO of Broken Keyboards Software



Founder of these startups:


Browse This For Me


Monitor My URL



My full CV can be download here in PDF format.

Comments and Discussions

 
GeneralVML not working in aspx page. Pin
exploreworld24-Oct-09 8:38
exploreworld24-Oct-09 8:38 
QuestionVML in javascript Pin
sabhandari3-Oct-07 6:14
sabhandari3-Oct-07 6:14 
GeneralVML &amp; Netscape Pin
vu hai yen6-Dec-04 15:09
sussvu hai yen6-Dec-04 15:09 
I wan't to ask about VML run or not in Netscape, Mozila...?
Who know this, help me!

GeneralRe: VML &amp; Netscape Pin
Dmitry Khudorozhkov10-Jul-06 5:04
Dmitry Khudorozhkov10-Jul-06 5:04 
GeneralOn Drag Pin
yenvh12345-Dec-04 20:50
yenvh12345-Dec-04 20:50 
GeneralRe: On Drag Pin
SimonS5-Dec-04 20:58
SimonS5-Dec-04 20:58 
GeneralRe: On Drag Pin
yenvh12345-Dec-04 22:03
yenvh12345-Dec-04 22:03 
GeneralRe: On Drag Pin
Anonymous31-Aug-05 16:17
Anonymous31-Aug-05 16:17 
GeneralVML - drag and drop Pin
kdhglkfjhflkhkh26-Jan-04 22:34
kdhglkfjhflkhkh26-Jan-04 22:34 
GeneralRe: VML - drag and drop Pin
SimonS27-Jan-04 4:45
SimonS27-Jan-04 4:45 
GeneralRe: VML - drag and drop Pin
yenvh12347-Dec-04 16:25
yenvh12347-Dec-04 16:25 
GeneralVML printing Pin
Jollt18-Dec-03 23:11
sussJollt18-Dec-03 23:11 
GeneralRe: VML printing Pin
SimonS18-Dec-03 23:57
SimonS18-Dec-03 23:57 
GeneralRe: VML printing Pin
Member 396886014-Dec-09 0:44
Member 396886014-Dec-09 0:44 
GeneralVML &amp; ASPX (ASP.NET) files Pin
Anonymous16-Dec-03 4:21
Anonymous16-Dec-03 4:21 
GeneralRe: VML &amp; ASPX (ASP.NET) files Pin
Anonymous16-Dec-03 5:39
Anonymous16-Dec-03 5:39 
GeneralRe: VML &amp; ASPX (ASP.NET) files Pin
SimonS16-Dec-03 5:42
SimonS16-Dec-03 5:42 
GeneralRe: VML &amp; ASPX (ASP.NET) files Pin
SimonS16-Dec-03 5:41
SimonS16-Dec-03 5:41 
GeneralNeeded Some Process to Save an image physically from the Clipboard Pin
shahmansoor23-Dec-02 20:17
shahmansoor23-Dec-02 20:17 
GeneralRe: Needed Some Process to Save an image physically from the Clipboard Pin
SimonS30-Dec-02 19:00
SimonS30-Dec-02 19:00 
GeneralVML and 3D Pin
18-Jun-02 0:09
suss18-Jun-02 0:09 
GeneralRe: VML and 3D Pin
SimonS3-Dec-02 20:41
SimonS3-Dec-02 20:41 
GeneralRe: VML and 3D Pin
Anonymous3-Dec-02 23:26
Anonymous3-Dec-02 23:26 
GeneralRe: VML and 3D Pin
SimonS4-Dec-02 0:28
SimonS4-Dec-02 0:28 
GeneralRe: VML and 3D Pin
Anonymous6-Dec-02 2:37
Anonymous6-Dec-02 2:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.