Websites customarily display everything in the order they appear in the source code. With Divisions, you can define an area size and location anywhere on the page, and place those divisions in any order in the source code, and they will still display at the locations given in code. Still, the shape of a division is always a rectangle. All images, all text, all links, all headlines, occupy rectangles which can be defined by width and height. The closest thing that HTML has to vector graphics are the hot areas of imagemaps. The circle and polygon shapes are defined using formulas rather than width and height.
Vector graphics draw their shapes rather than order them bit by bit. Standard HTML does not allow drawing of shapes into the webpage. But with Vector Markup Language (VML), you can draw circles, rectangles, curves, arcs, triangles, hearts, and any other shape you can imaging. And not just draw, but fill and shade those shapes as well, place one shape on top of another, place a shadow behind them or even group them together to create scenes, animals, maps and much more.
The primary use of vector graphics on the web are section backgrounds and lines. And thats too bad, because both can be accomplished with standard HTML. Personally, I have put vector graphics together with layered maps to create line distances between points. Many creative programmers use vectors to create buttons with a 3-D look, embossed and beveled. In fact, with enough patience, it is possible to create elaborate artwork which resembles Corel Draw or Adobe Illustrator.
Microsoft's Internet Explorer has the VML engine already loaded, although it's rarely used. Well, this section of Webmaster Resources will dust off your VML engine and give it a little workout.
VML works with the VML engine and with your browsers Stylesheet processor. There are three parts to coding VML. First is to set your HTML to launch the VML engine. Then Internet Explorer will be watching for those programming elements unique to VML. Instead of a standard <HTML> tag to open your page, you will need a more powerful <HTML> tag as shown below:
<HTML XMLNS:V="urn:schemas-microsoft-com:vml">
Next you need to set a stylesheet to send any VML tags, <v\:> for example, to be correctly processed by CSS and VML. The odd looking style below, forwards any styles nested within the v tag (vectors), to the VML engine for proper formatting.
<STYLE>
v\:* {behavior:url(#default#VML);}
</STYLE>
Finally, within the BODY of your document, you add the shape to your document. There are sevel predefined shapes. Each one, rectangle, oval, line, etc, has a series of preset defaults. Certainly if you're content with the defaults, you don't need to change them. These include black lines, white fills, and so forth. The code for each of these predefined shapes are available by clicking on the buttons on the left. But there a copule of other thing to know about vector graphics.
You can place a vector graphic on the page as you would an image, that is using the static, relative, or absolute positioning. Static positioning is the default, that it, the location of the vector graphic will be part of the line of text where it is located, anchored at the baseline. Relative position places the vector in relation to its default location, but as a measurement FROM that point. Absolute position locates the vector from the upper left corner of the container where the vector is located, be it in the BODY, or CELL. Absolute positioning allows you to place your graphics at a consistantly predictible location on the page.
The WIDTH and HEIGHT of the vector graphic is the region (invisible box) where the vector graphic will exist. Within this box, a seried of unit are layed out, 1000 along the x-axis and 1000 along the y-axis by default. You can easly increase these units. These units within the position box have no correlation to pixels, points, inches, etc. They are just a grid which all internal x,y coordinates are laid out. For example a box of 1000x1000 units would have 500,500 as the center of this shape. By using these anchor points with shapes laid out within the invisible box, you create the curves, arc, lines, ovals and rounded boxes that make up the vector shapes. The "box" can occupy the entire window, or just a small point on a map. The grid of units is called the coordinate size. You can call up as many coordinate points as you need for your vector shapes.
Finally, you can lay one shape one top of another. The z-index is a style definition which allows one element to be placed on top of another. The higher the number (z-index: 4) the farther up the stack. This is easier to remember if you imagine that the screen surface is zero (0), and anything on top of the screen has an increasingly higher number. A negative number is for those elements which will appear behind those on the screen surface. So -1 in the deepest, 0 next, and finally 1 the highest. You can use negative numbers, or simply start with 1 for the screen and work you way out from there.
Now that you have a general idea of what is supposed to happen, click on the links to the left to see examples of standard vector elements.