Introduction to VML

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:

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

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

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

<v:roundrectstyle="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:

<v:linefrom="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.

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.

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.

I am generating a popup window from a javascript function. In the popup, i want to show some boxes joined by lines. I have drawn the boxes using the div objects (setting their border, width and height properties). All this being done using javascript. I then generate the nodelist(in VML) for the lines. Afterwards, I append this list to another dummy div object which updates its innerHTML property. But the lines are nowhere on the screen.

Before I can drag to draw a rectange on an image which is created by image.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif)
But now I only do that on some computers and can't do that with another computer. I wonder how?
In my computer I can't do that and I replace the image.aspx by an image.gif that becomes ok, drag well. I don't know how to do!Help me

Hello,
First of all, sorry for my bad english. Fill free to ask me some precisions.
I have developped in VML (and ASP) a dynamic hierarchical tree (like a family tree. And I get a very big problem when I want to print it (I use the file / print menu of the navigator).
If the tree horizontally fit the screen, there is no problem : IE manage the print (single page or several pages if the tree doesn't fit vertically).
But in the orher case (the tree does not horizontally fit), IE cannot print the all tree.
Have you ever have the same problem? Do you get a solution?
The X and Y points of all the elements of all the tree are saved in a database. For "drawing" my tree, I just had to read the database and put the X and Y positions to VML elements. Can I use this database with another software which can managed the print on several pages?

From what I understand, if the tree is too big, then it doesn't fit onto a page?
What you might try is to programmatically scale the tree down to fit onto a page. Not a clean solution, but it *might* work for you.

Depending on how much work you have already put into this project, I would recommend moving over to SVG as there is a lot more support for it around the world (albeit not from MS).
Contact me directly if I can help with this: simon_stewart@hotmail.com (MSN Messenger) or simon@brokenkeyboards.com (email).

Cheers,
Simon

sig :: "Don't try to be like Jackie. There is only one Jackie.... Study computers instead.", Jackie Chan on career choices.

I've tried to run one of your examples in an ASPX file (w/code-behind), but the drawing doesn't show. When I move the mouse pointer over the area where the drawing should've appeared the cursor changes to the i-beam shape. (I've added the vml-namespace to the html-tag and added the style attribute inside the head-section). The drawing I'm trying to display is the first simple line in your example with the addition of fillcolor="green".

Does VML work within an ASPX-page and if so, is there anything special one has to do to make it work?

True, VML wasn't originally designed for this purpose, and I have been told a lot that directX is a better approach, but the problem is that there are global legal restrictions against the use of that on webpages for microsoft.
It's not possible to move ahead using that technology, if you want it to be directly editable using DOM.
Secondly, this is a just playing around with a concept, that might evolve into an entirely new technlogy that is specifically designed for this purpose, while still being acceptable, since it's allready submitted to W3C for public review.
It's possible to create a logical 'nextGen' of VML that is geared towards 3D from the very start, thus creating a contender to any other 3D-technology both in speed and power.
If Jscript can do 3D this fast, imagine a technology aimed at that from the start, using the same principles.
This might involve a fusion of VML and directX in some capacity..