SoFunction
Updated on 2025-04-14

Basic concepts of VML

VML is equivalent to a brush in IE, which can realize the graphics you want, and combined with scripts, it can make the graphics produce dynamic effects. VML was released by Microsoft in September 1999 with IE5.0. In my opinion, VML is actually the product of the combination of Word and HTML. You can save Word documents as HTML, and the text and pictures in them can be easily converted, but if they are hand-drawn graphics, it will not be explained in previous IEs. If they are converted into graphic files, it is not realistic. So Microsoft combined the graphics controls in Word into IE, so that IE also has the drawing function.
The full name of VML is Vector Markup Language. Vector graphics means that the graphics can be enlarged and reduced at will without losing the quality of the graphics, which is of great use in making maps. In order to show its strength and increase your confidence in learning VML, let me first show you a VML example:

Hello world!
Hello VML!


In VML, the tag uses XML expansion and requires a namespace (namespace). You can use the idiomatic "v" as the namespace, and use the general definitions of IE5.0 to IE6.0 as follows:

<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>

The full name of xmlns is XML NameSpace, which is the namespace. Behavior is also something new in IE5.0. Its functions are very powerful. Combined with style sheets, it can add behavior (new properties, methods, events) to any HTML object. Here, its use is to connect the namespace "v" with the system-defined behavior VML. After this definition, you can use the following tags, which are different from ordinary HTML tags. Each tag has a namespace added:

<v:shape></v:shape>

Like other HTML elements, most DHTML attributes and events can be defined in VML tags, such as id, name, title, onmouseover, etc. VML is more flexible in writing. Many attributes can be written in tags, and a new tag can be independently expressed:

<v:shape id=shape1 name=shape1 onmouseover="alert()" StrokeColor=red Path="m 0,0 l 10,10 x e"></v:shape>
It is equivalent to the following writing method:
<v:shape id=shape1 name=shape1 onmouseover="alert()">
<v:Stroke StrokeColor=red/>
<v:Path v="m 0,0 l 10,10 x e"/>
</v:shape>

Of course, not all attributes can be written as independent markers. Commonly used methods such as Stroke (which can be translated into linear according to my understanding), Path, Shadow, Fill (filling), etc., VML can be understood as shape's attribute classification, making the attribute more intuitive.
Some objects derived from Shape objects are more direct images, such as Rect (rectangle), RoundRect (rectangle with round edges), Oval (circle), Line (line), PolyLine (irregular polyline), Image (graphic file), etc. These objects will be described in detail later.