November 08, 2009

Hot Topics:

The Vector Markup Language (Part I)

June 29, 2001
By Elliotte R Harold

This article is brought to you by Hungry Minds, Inc. publisher of Elliotte Rusty Harold's
XML Bible, Second Edition

Microsoft's Vector Markup Language (VML) is an XML application for vector graphics that can be embedded in Web pages in place of the bitmapped GIF and JPEG images loaded by HTML's IMG element. Vector graphics take up less space and thus display much faster over slow network connections than traditional GIF and JPEG bitmap images. VML is supported by the various components of Microsoft Office 2000 (Word, PowerPoint, Excel), as well as by Internet Explorer 5.0 and later. When you save a Word 2000, PowerPoint 2000, or Excel 2000 document as HTML, graphics created in those programs are converted to VML.

What Is VML?

VML elements represent shapes: rectangles, ovals, circles, triangles, clouds, trapezoids, and so forth. Each shape is described as a path formed from a series of connected lines and curves. VML uses elements and attributes to describe the outline, fill, position, and other properties of each shape. Cascading Style Sheet (CSS) styles are used to position the individual VML elements on the Web page, alongside the usual HTML elements such as P and IMG.

Listing 1 is an HTML document. Embedded in this HTML file is the VML code to draw a five-pointed blue star and a red circle. Figure 1 shows the document displayed in Internet Explorer.

Figure 1:-An HTML document with embedded \tVML elements

Listing 1:--An HTML document with VML code that draws a five-pointed blue star and a red circle

<html xmlns:vml="urn:schemas-microsoft-com:vml">

  <head>
    <title>Example 26-1 from the XML Bible</title>
    <object id="VMLRender" 
      classid="CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E">
    </object>
    <style>
      vml\:* { behavior: url(#VMLRender) }
    </style>
  </head>

  <body>
    <h1>Example 26-1 from the XML Bible</h1>

    <div>
      <vml:oval 
        style="width:200px; height: 200px"
        strokecolor="red"
        strokeweight="2">
      </vml:oval>

      <vml:polyline 
        style="width: 200px; height: 200px"
        stroked="false"
        filled="true"
        fillcolor="blue"
        points="8, 65, 72, 65, 92, 11, 112, 65,
                174, 65, 122, 100, 142, 155, 92,
                121, 42, 155, 60, 100">
      </vml:polyline>
    </div>
    <hr></hr>
    Last Modified February 17, 2001<br />
    Copyright 2001 
    <a href="http://www.macfaq.com/personal.html">
      Elliotte Rusty Harold
    </a>
  </body>
  
</html>

Listing 1 obviously isn't an ordinary HTML document, even though it contains some standard HTML elements. First, the html root element binds the namespace prefix vml to the URI urn:schemas-microsoft-com:vml. As usual, the prefix can change as long as the URI stays the same. In fact, Microsoft uses the single-letter prefix v in most of its examples. In this chapter, I assume that the prefix vml is bound to urn:schemas-microsoft-com:vml without further comment.

The head element contains an object child with the id VMLRender. (VMLRender is a program installed with Internet Explorer 5.) There's also a CSS style element that specifies that all elements in the urn:schemas-microsoft-com:vml namespace (that is, all elements that begin with vml:) should have the behavior property url(#VMLRender). This is a relative URL that points to the aforementioned object element. This tells the Web browser to pass all elements in the VML namespace to the object with the ID VMLRender for display.

The body element contains several of the usual HTML elements, including div, h1, hr, and a. However, it also contains vml:oval and vml:polyline elements. The vml:oval element has a red border (stroke) two pixels wide. In addition, the style attribute sets the CSS width and height properties of this oval to 200 pixels each. The vml:polyline element is filled in blue, and also has an area of 200 pixels by 200 pixels. A 5-pointed star has 10 vertices. Therefore, the points attribute provides 10 pairs of x-y coordinates, one for each vertex.

Drawing with a Keyboard

Writing VML pictures by typing raw XML code in a text editor is not easy, but it can be done. I suggest that you start any attempt to program vector images with some graph paper, and draw the images with a pencil the way you wish to see them on the screen. You can then use the images from the graph paper to determine coordinates for various VML elements, such as shape, oval, and polyline.

The shape element

The fundamental VML element is vml:shape. This describes an arbitrary closed curve in two dimensions. Most shapes have a path that defines the outline of the shape. The outline may or may not have a stroke with a particular color and width—that is, the outline may or may not be visible. The shape may or may not be filled with a particular color. For example, in Figure 26-1 the circle has a red stroke but no fill, whereas the star has a blue fill but no stroke.

The properties of a shape are defined in three ways:

By the attributes of the vml:shape element
By the CSS styles of the vml:shape element, which are normally set inside a style attribute on the vml:shape element
By the child elements of the vml:shape element

At a minimum, each shape must have these three properties:

The height of the element defined by a CSS height property
The width of the element defined by a CSS width property
A path for the outline of the shape, defined either by a path attribute or a vml:path child element

For example, here's a vml:shape element that draws an isosceles triangle.

<vml:shape
  style="height: 200px; width: 200px"
  path="M 0,200 L 100,0, 200,200 X E">
</vml:shape>

The bounding box of the shape, that is, the rectangle that contains the shape and that will be positioned on the page in the midst of the HTML elements, is 200 pixels wide by 200 pixels high. This is established by the CSS height and width properties, which the style attribute provides.

The path attribute contains the instructions that draw an isosceles triangle. Don't worry if it isn't obvious to you that this is an isosceles triangle. In fact, I'd be surprised if it were even obvious that this is a triangle. Most VML elements (including this one) are drawn using a GUI, and only saved into VML form. Consequently, you don't need to know the detailed syntax of each and every VML element and attribute. However, if you know a little, you can sometimes do some surprising tricks with the VML file that may prove impossible with a graphical editor. For example, you can search for all the blue elements, and change them to red.

Here's how the value of this path attribute is interpreted. Each command is \trepresented by a letter such as M or L. (Microsoft uses lowercase letters in their examples, but I prefer uppercase letters because it's hard to tell the difference between the lowercase letter l and the digit 1 in most fonts.) The command is followed by zero or more coordinate points. Each point is given as an x coordinate and a y coordinate, separated by a comma. The commands used here, and their arguments are:

1. M 0,200: Move the pen to the point x = 0, y = 200.

2. L 100,0, 200,200: Draw a line from the current pen location (x = 0, y = 200) to x = 100, y = 0. Then draw a line from there to the point x = 200, y = 200.

3. X: Close the shape; that is, draw a line from the last point back to the first point.

4. E: End the path.

Note that all coordinates are given in the standard computer graphics coordinates in which x increases to the right and y increases down. Figure 2 demonstrates.

Figure 2:-VML uses a left-handed coordinate system with the origin in the upper left corner of the window.

Other shape attributes

Additional attributes can be added to a vml:shape element to set its color, stroke color, alternate text, and more. Table 1 summarizes the standard set of these attributes.

Table 1

Standard Attributes of the vml:shape Element

Attribute Name	Attribute Value	Default
`adj`	`-`A comma-delimited string of up to 8 integers that provides input parameters \tfor `vml:formulas` child elements	None
`alt`	`-`Alternate text shown if the shape can't be drawn for any reason; similar to the `ALT` \tattribute of HTML's `IMG` element	None
`class`	`-`The class of the shape; used to attach CSS styles to groups of elements in the same class	None
`coordorigin`	`-`The local coordinate of the upper- left corner of the shape's box	0, 0
`coordsize`	`-`The width and height of the shape's box in the local coordinate space	Same as the width and height of the entire shape
`fillcolor`	`-`The color the shape is filled with; for example, `red` or `#66FF33`	White
`filled`	A boolean specifying whether the shape is filled	False
`href`	The URL to jump to when the shape is clicked	None
`id`	`-`A unique XML name for the element same as any other XML ID type attribute)	None
`path`	Commands that define the shape's path	None
`strokecolor`	The color used to draw the outline of the shape	Black
`stroked`	`-`A boolean specifying whether the path (outline) of the shape should be drawn	True\t
`strokeweight`	The width of the line outlining the shape's path	1px
`style`	The CSS properties applied to this shape	None
`target`	`-`The name of the frame or window that a URL loaded when the shape is clicked will be displayed in	None
`title`	`-`The name of the shape; displayed when	None\tthe mouse pointer moves over the shape
`type`	`-`A reference to the ID of a `vml:shapetype` element	None

Note: Microsoft Office 2000 adds a number of extension attributes as well. Apparently Microsoft can't even resist embracing and extending those standards they themselves created.

1 2