VML: Vector Markup Language

Use these to jump around or read it all...

[Vector...Hah?]
[Prepare the Page]
[Other Shapes]
[Placement]
[Is There More I Can Do?]

Some of the best HTML Goodies tutorials have come from friends of mine rolling up to my office with a new trick and asking how it's done. It's fun to watch their face go blank when I have no idea how the trick is created. This tutorial is such a trick.

At first, my friend thought that this was some kind of image or table set:

You can probably guess that it isn't. It's actually a new, and quite fun, style of markup language called VML (Vector Markup Language).

Vector...Hah?

Honest to goodness, that was my buddy's reaction when I finally figured out what this thing was. In short, VML allows you to set aside vectors on Web pages.

In shorter, you can draw shapes. Cool.

VML is not really a language unto itself but rather something that works as a namesake (ns) under XML, (eXtensible Markup Language). Using the power of XML, you can set aside specific sections (vectors) and fill them in with color and all sorts of other fun stuff.

The one downside of it all is that since this effect deals with XML, it is browser limited. You'll need to be running IE 5.0 or above to get the effect. Netscape Navigator will simply ignore the commands and display nothing.

Prepare the Page

To get the effect, you'll need to have a couple of lines of code on the page that will assist in the effect. This is the first:

That command replaces your basic, original <HTML> tag at the top of the HTML code. Note the attribute "xmlns" is setting an XML namesake and pointing the page towards a DTD where the supporting materials can be grabbed.

Next, you'll need to set a line in your Style Sheet block. If you don't have one, you'll need to create one. It looks like this:

v\:* {behavior:url(#default#VML);}

Again, this goes in your Style Block. If you don't have one -- create one.

Let's Draw!

Here's the code that made that yellow rectangle above:

<v:rect style="width:150pt;height:50pt" fillcolor="yellow"></v:rect>

Here's what's happening:

v:rect is reacting off of the line of text you set in the style sheet. If you remember, you set the letter "v" to a specific behavior. In this case, that behavior is going to be a four-cornered object. Yes, I know it reads "rect," buy you'll see that it can easily become a square.
style="width:150pt;height:50pt" sets the height and the width of the element you're drawing. Change the numbers to your heart's content to get different sizes. Set the sizes equal and you'll get a square.
fillcolor="yellow" fills the created shape with yellow. You can also use a hex code; just be sure to place a pound sign (#) in front of it.
</v:rect> ends the tag. Remember that in XML, all tags must have close tags.

You don't need a "fillcolor" command. In fact, if you don't have one, you'll simply get the outline of the shape. Here's the code above with the fillcolor attribute taken out:

Other Shapes

If there's "rect," there have to be other shapes, right? There are a few. According to the Microsoft Web Workshop, there are actually eight predetermined shapes. You've already been introduced to one. There are seven more. They are:

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

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

Looks like:

The numbers are relative pixels in from the left, and from the point of the code on the page. So this line starts ten pixels in from the left with no change vertically and runs 390 pixels along the axis with no change up or down. That's why I have a straight line.

Polyline: <v:polyline points="5pt,10pt 15pt,20pt"></v:polyline>

Looks like:

Two sets of points are drawn and connected by the computer. In this case I have 5,10 and 15,20.

Oval: <v:oval style="width:150pt;height:50pt" fillcolor="green"></v:oval>

Looks like:

Set the height and width points to equal numbers for a circle.

Image: <v:image src="/images/joe.gif" style="width:150pt;height:50pt" fillcolor="green"></v:image>

This does basically the same thing as an image tag containing height and width attributes.

Curve: <v:curve from="10pt,10pt" to="100pt,10pt" control1="40pt,30pt" control2="70pt,30pt"></v:curve>

Looks like:

The from and to points set the length of the line compared to the code's placement on the page. The two control points denote the pull or push of the line. It's actually pretty easy to get the hang of it once you begin popping in a few new numbers.

Arc: <v:arc style="width:100;height:100" startangle="0" endangle="90"></v:arc>

Looks like:

The overall size will be 100 pixels by 100 pixels. The arc itself will run from zero, the top, to 90 degrees. You can set start and end points at any one of the 360 degrees around the circle.

Placement

When you use the code above, the vector shapes will simply display where you put them, just like an inline image. However, because you often want shapes and images in specific places, you can set these shape's positions in stone.

It's done through the Style Sheet format. Here's an oval set to a specific position:

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

See the absolute:position setting in the Style attribute. That'll do it. You'll set the pixels to the exact point where you want the vector drawing to sit.

Is There More I Can Do?

Ugh! There's so much more it's overwhelming. I put this tutorial together once I understood the very basics of drawing vector images. Let me go back and play around with the coloring, gradient, and a slew of other elements and get back to you in a future tutorial. For now, happy drawing.

Enjoy!

[Vector...Hah?]
[Prepare the Page]
[Other Shapes]
[Placement]
[Is There More I Can Do?]