Page 1 of 1

Introduction to VML (Vector Markup Language) Create shapes in HTML Rate Topic: -----

#1 bhandari   User is offline

  • D.I.C Addict
  • member icon

Reputation: 9
  • View blog
  • Posts: 754
  • Joined: 31-January 08

Posted 07 February 2008 - 07:36 AM

Attached File  Example.html (1.3K)
Number of downloads: 2023Hi All,

This tutorial will explain you how to draw vector shapes on the fly in your Internet Explorer. You can always use scalar images, but you can't modify their dimensions dynamically, using some logic e.g. Size of box based on text to be printed within it.

Microsoft’s proprietary language VML comes to rescue in such a scenario. It allows one to draw shapes (lines, rectangle, square), write text and fill them with colors. As you might expect it runs only for IE 5.0 or above. Basically, it’s VB Script based. But its interesting to learn and use. Lets get started with the basics.

In the header of the HTML document, you need to tell the browser that you will be using VML, so use the following lines at the very start of your document:

<!doctype html public '-//W3C//DTD html 4.0 Transitional//EN'><%@ Language=VBScript%><html xmlns:v='urn:schemas-microsoft-com:vml'><STYLE>v\:* {behavior:url(#default#VML);}}</STYLE>

After these lines you can write your normal HTML code like <HTML> and <BODY> tags.

All the code for VML shapes that you want to draw goes inside the <BODY> section of HTML document. Like to draw a line, you need to tell the starting and ending co-ordinates of the line which can be done by writing:

<v:line from=" 170 130 " to=" 179 190 "></v:line>

What if you want a line with arrow head, you use:

<v:line from=" 170 130 " to=" 179 190 "> <v:stroke endarrow="classic"/></v:line>

You can also specify the opacity (visible or not) for the line using:

<v:line from=" 170 130 " to=" 179 190 "> <v:stroke endarrow="classic" opacity="0"

To draw a rectangle, you need to tell the top, width and height and the browser will calculate all the four co-ordinates from that information. This is done as:

<v:rect style="position:relative;top:195;width:350;height:70"></v:rect>

Its usually that you need to place some information with in the rectangles which can be done by using textboxes as:

<v:rect style="position:relative;top:195;width:350;height:70<v:textbox><div ><center>Rectangle with text</center></div></v:textbox></v:rect>

There is no tag for drawing a square, so what to do?? Well, simply make the height and width of rectangle same as:

<v:rect style="position:relative;top:195;width:100;height:100"><v:textbox><div ><center>The Square trick</center></div></v:textbox>v:rect>

Now there is no tag for drawing a rhombus (diamond shape). The way out is to apply rotate trick to square trick which can be done as:
<v:rect style="position:relative;top:195;width:100;height:100;rotation:45<v:textbox><div ><center>Rhombus(Rotation)</center></div></v:textbox></v:rect>

Flowcharts are common to be drawn using such a language and fortunately there is a tag for showing the start and stop boxes in oval shape as:

<v:oval style='position:relative;margin-left:20;top:390;width:300;height:70'<v:textbox><div ><center>Control </center></div></v:textbox></v:oval>

Please note that the <v:textbox> thing can be included in any kind of shape. See attachment to see how to apply to a line.

Well flowcharts also sometime need rounded rectangle boxes which can be done in VML by:

<v:roundrect style="position:relative;top:130;width:165;height:100<v:textbox><div><center>Round rectangle</center></div></v:textbox></v:roundrect>

Now if you remember, I said that you can create VML documents on the fly. This can be done by using the Javascript's document.write() function which is out of scope as far as this tutorial is concerned. Will definitely tell you in some coming tutorials.

Reference Library:Click Here

Hope that makes things clear for the beginners


Is This A Good Question/Topic? 0
  • +

Page 1 of 1