June 22, 1998

Lisa Rein

VML was designed to provide a textual way to describe vector graphics that can be easily cut and pasted for use in a wide variety of authoring tools. It's also written to be integrated into existing HTML 4.0 markup, (which, of course, must be well formed), and to simplify the process of editing text-based vector graphics.

Like PGML, VML was written primarily to be integrated into editors and for use as an export format. Like PGML, VML's markup is frighteningly verbose, but remember that most likely the code will be generated by an application, not written by hand.

VML has "built-in" provisions that can be used to describe objects that may be further edited. It also contains a few MS Office-centric features, such as the adjustable handles used to manipulate graphics in Microsoft Word.

VML uses v: to define its own namespace for VML tags. This should not be confused with v-space in CSS. The v: is actually an extension from a CSS2-compliant rendering engine. The namespace prefix never appears within the CSS information.

The <shape> element is a VML tag that defines a path for drawing the object. The stroke attribute determines whether the outline of the object is visible and the strokecolor attribute makes the outline red. The fill and fillcolor attributes determine whether an object is filled and with what color.

A <shape> within a group can use left/top or center-x/center-y as appropriate. The rotation, z-index and flip properties may also be given when required.

style='left: 100; top: 100; width: 1000; height: 1000'

style='center-x: 550; center-y: 550; width: 1000; 

  height: 1000; rotation: 55deg'

VML uses XML templates to summarize the full set of attributes that may appear on each element. The shape elements -- <shape>, <group> and most of the predefined shapes -- have CSS2 positioning information that locates the shape within its container. This is not reflected in the templates as there are several different ways of specifying the same information.

Here's an example of an XML template:















  style='visibility: visible'





  coordsize="1000, 1000"

  coordorigin="0, 0"



A Simple Rectangle

The <rect> element is used to draw a simple rectangle. The rectangle is defined by the content width specified in the CSS2 properties.

<!element rect (%shape.elements;)*>
<!attlist rect %coreattrs; %shapeattrs;>

The following code would generate a five-point star that has a red border and is filled in green, shown in the box below.


   style='top: 0; left: 0; width: 250; height: 250'

   stroke="true" strokecolor="red" 

   strokeweight="2" fill="true"

   fillcolor="green" coordorigin="0 0" 

   coordsize="175 175">


<v:path v="m 8,65

 l 72,65,92,11,112,65,174,65,122,100,


      x e"/>


Attributes associated with the <group> element are used to specify information about positioning and the containing block only; not about transparency. <Shape> and <shapetype> are defined as children of the <group> element.

Both opacity and chromakey attributes can be specified within the <shape> and <shapetype> elements. Attributes which are specified at the <shape> level in the hierachy override those at the <shapetype> level.

All standard HTML/XML/CSS parsing can handle VML down to the level of attribute values. Each attribute value falls into a limited set of possible "basic types," each of which is parsed consistently. Attribute values themselves can be parsed using standard parsing techniques (even the very concise path representation). Each v:shape element, together with its associated v:shapetype, can be validated without reference to other shapes.

All CSS2 positioning information is expressed in terms of this local coordinate space. Consequently CSS2 position attributes (left, top, width, height and so on) have no unit specifier -- they are simple numbers, not CSS length quantities. The <shape> and <group> elements are containing blocks for their content -- they define a CSS2 "block level box". Inside the containing block a local coordinate system is defined for any sub-elements using the coordsize and coordorigin attributes.

The coordsize attribute defines how many units there are along the width of the containing block. The coordorigin attribute defines the coordinate at the top left corner of the containing block.

For example, if a group were defined as follows, the containing block would be 300 pixels wide by 250 pixels high (assuming that the parent element of this group was not another group):

  <v:group style='width: 300px; 

    height: 250px' coordsize="1000,1000"

    coordorigin="-500,-500" />

The coordinate system inside the containing block would range from –500.0 to 500.0 along the x-axis and –500.0 to 500.0 along the y-axis with 0.0, 0.0 right in the center of the rectangle.   Any shapes inside the group will be positioned and sized according to this local coordinate system.  No matter how the width and height of the group is changed, the local coordinate system inside will remain the same.

The rationale behind this is that the vectors defining a shape can be specified in a local coordinate system.  If the containing block for the shape is changed, the outline of the shape will be automatically scaled to the new box. Similarly, shapes within the local ordinate system of a group will be automatically scaled if the containing block of the group changes.

It is important to note that the containing block does not establish a clipping region.  Sub-elements and paths may be drawn outside the boundaries of the containing block.  The containing block merely serves to map the local coordinate space to the page space.

Although the VML specification does not provide a complete DTD, it does include DTD snippets throughout the document. It would be more efficient to design your custom "snippets" required for your project's XML templates, and then merge them together to create a complete DTD or schema, if validation is desired.

Other VML features include:

  • Rediting (after cutting and pasting elsewhere in the HTML page or into another application) with no loss in output quality
  • Adjust handles
  • Stateless graphics (grabbing the multipointed star which lies under the circle)
  • Parametric-based graphics (or formula based)

While the core engine is based on the Microsoft Office graphic model, the co-submitters suggested improvements that were incorporated into the VML spec, such as the refinement of the parameterized paths and the compactness of the path description.

Yet, the biggest advantage VML has going for it is the backing of Microsoft and the likelihood that it will be supported in IE5.