Vector Graphics for the Web

If you’re a developer who creates serious Web applications, you would surely be having a list of pet peeves that you wished could be done on the Web but wasn’t possible due to limitations in technology. One of my pet wishes was that my Web applications be able to generate graphics on the fly, say for drawing graphs, charts or other applications. This is to an extent possible using server-side technologies and clever GIF manipulation. (This method, however, is a different story and requires an article on its own). But for performance reasons, the graphics should take place at the client-end (the Web browser, that is). 

Before I get into the technology that allows you to do this, let me tell you a bit about graphics. Graphics in computers are of two types–raster and vector. Raster graphics store the exact location and color of every individual pixel in the picture. Vector graphics on the other hand store mathematical information about the structure that makes up a picture. That is, no pixels are stored, only the formulae that make up the pixel structure for the graphics. Vector graphics are therefore much smaller and more efficient that

raster graphics, but can’t store the richness of a photograph or painted image.

Now, Web pages allow you to render and display vector graphics quite easily. This technology is called the Vector Markup Language (VML). VML is based on the Extensible Markup Language (XML) and is a joint proposal by Microsoft, HP, Adobe, and some others to the World Wide Web Consortium. 



VML is currently supported by the IE 5 HTML rendering engine. Therefore, it can be used in other browsers that use this engine, such as NeoPlanet. 

VML tags follow the syntax . Note that the closing tag is not optional and nesting of tags is allowed as long as they follow the XML convention. Let’s quickly create a small

VML-enhanced page and see the result. Start off with a normal HTML template that contains a head, title, and body. Change the

This informs the parser that the VML is to be rendered as default. These two additions to your HTML page will make the page ready to contain VML elements.

To create a smiley face using VML, insert the following code into the

This code is pretty simple. All it does is create a large oval of equal height and width (therefore a circle) for the face, a couple of smaller circles for the eyes and an arc for the smiling mouth. This entire shape is “grouped” under a single ID called “face” to allow manipulation by client script if required. 

You may have noticed that the elements are positioned as well as sized using the STYLE attribute. And yes, this is the same STYLE attribute used for setting CSS values in your Web pages. You can use CSS to customize your VML as you like. 

The code also shows some other attributes in the arc element. The startangle and endangle let you define the angles for the arc. These attributes are specific to the arc element. However, elements like strokecolor and strokeweight are generic and can be used with almost all other elements. 

So, what are the shapes you can draw? Well, the table shows you a list of predefined shapes, their most common attributes, and an example of usage.

Each of these can be highly customized with colors, filling, positioning, and sizing. They can also be grouped together to form more complex shapes. However, sometimes you need to create a shape that doesn’t fit into any of the above cases. This is where the element comes handy. 

We’ll look at the shape element, how it’s used, and a practical application of VML in the next and final part of this series. Till then, have fun experimenting.

Vinod Unny

is a technology Consultant at iSquare Technologies Pvt Ltd.