Using Predefined Shapes

This topic describes VML, a feature that is deprecated as of Windows Internet Explorer 9. Webpages and applications that rely on VML should be migrated to SVG or other widely supported standards.

As you've learned, you can use the <oval> element of VML to create a simple oval. VML provides several other predefined elements. In this topic, we will illustrate how to draw graphics by using these elements.

In this topic:

• rect
• roundrect
• line
• polyline
• curve
• arc
• Summary

rect

You can use the <rect> element to draw a rectangle. You can then customize the rectangle by specifying different property attributes.

For example, you can draw a rectangle that is filled with blue by specifying fillcolor="blue", and give it a 3.5-point red outline by specifying strokecolor="red" strokeweight="3.5pt", as shown in the following VML representation:

<v:rect style='width:100pt;height:75pt' fillcolor="blue"
strokecolor="red" strokeweight="3.5pt"/>

For more information about this element, see the VML specification . (Note: The VML specification doesn't have a bookmark for the <rect> element.)

Back to top

roundrect

You can use the <roundrect> element to draw a rectangle with rounded corners. You can then customize the rounded rectangle by specifying different property attributes.

For example, you can draw a rectangle that has rounded corners 30% of half the smaller dimension of the rectangle by specifying arcsize="0.3", fill it with yellow by specifying fillcolor="yellow", and give it a 2-point red outline by specifying strokecolor="red" strokeweight="2pt", as shown in the following VML representation:

<v:roundrect style='width:100pt;height:75pt"
arcsize="0.3" fillcolor="yellow"
strokecolor="red" strokeweight="2pt"/>

For more information about this element, see the VML specification .

Back to top

line

You can use the <line> element to create a straight line. You can then customize the line by specifying different property attributes.

For example, you can draw a horizontal line by specifying from="20pt,20pt" to="100pt,20pt", and make it 2-point and red by specifying strokecolor="red" strokeweight="2pt", as shown in the following VML representation:

<v:line from="20pt,20pt" to="100pt,20pt" '
strokecolor="red" strokeweight="2pt">

You can draw a vertical or diagonal line by simply specifying different values for the from and to property attributes, as shown in the following VML representation:

<v:line from="20pt,20pt" to="20pt,100pt"
strokecolor="red" strokeweight="2pt">

For more information about this element, see the VML specification .

Back to top

polyline

You can use the <polyline> element to define shapes that are created from connected line segments. You can then customize the shape by specifying different property attributes.

For example, to draw the shape shown in the following picture, you can type the following VML representation:

<v:polyline points="18pt,54pt,90pt,-9pt,180pt,63pt,261pt,27pt"
strokecolor="red" strokeweight="2pt"/>

For more information about this element, see the VML specification .

Back to top

curve

You can use the <curve> element to draw a cubic bézier curve. You can then customize the curve by specifying different property attributes.

For example, to draw a curve as shown in the following picture, you can type the following VML representation:

<v:curve style='position:relative'
from="0,0" control1="100pt,100pt" control2="200pt,100pt"
to="300pt,0" strokecolor="red" strokeweight="3pt"/>

For more information about this element, see the VML specification .

Back to top

arc

You can use the <arc> element to draw an arc that is defined as a segment of an oval. The arc is defined by the intersection of the oval with the start and end radius vectors given by the angles. The angles are calculated by using the properties of a circle (width equal to height), then scaled anisotropically to the desired width and height.

For example, you can draw an arc that starts at 0 degrees and ends at 90 degrees by specifying startangle="0" endangle="90", as shown in the following VML representation:

<v:arc style='width:100pt;height:100pt'
startangle="0" endangle="90"
strokecolor="red" strokeweight="2pt"/>

You can change the arc by specifying different startangle and endangle values, as shown in the following VML representation:

<v:arc style='width:100pt;height:100pt'
startangle="0" endangle="180"
strokecolor="red" strokeweight="2pt"/>

<v:arc style='width:100pt;height:100pt'
startangle="0" endangle="270"
strokecolor="red" strokeweight="2pt"/>

For more information about this element, see the VML specification .

Back to top

Summary

You can use VML predefined elements such as <oval>, <line>, <polyline>, <curve>, <rect>, <roundrect>, and <arc> to easily draw graphics on a Web page, and then customize those graphics by simply changing their property attributes.