Introduction
Overview
History
Advice
Books
Tutorials
Shapes
Summary
rect
roundrect
line
polyline
curve
arc
oval
image
shape
Special Topics
group
shapetype
positioning
animation
stylesheets
Community
Web Sites
Mailing Lists
USENET
Vendors
News
|
Often, a web designer would like to add some simple graphics to a page - not the Mona Lisa, but some simple shapes, a few bar or pie charts, or even some simple animation. With VML a designer can do these kinds of graphics without having to open up a copy of PhotoShop or other graphics editor. VML allows the web designer to use the familiar keyboard to type in a description of a graphical shape that is embedded within the HTML of a web page and interpreted by the web browser. As a bonus, the text description can be orders of magnitude smaller than the equivalent GIF/JPG raster images - improving the all-important download speed that can so irritate visitors to an image-heavy website. Most web surfers are familiar with vector graphics already - it's what Macromedia Flash is made of, except that Flash uses a binary (not text) format and requires special application software to creaste the Flash images.
Before You StartBefore you can use VML within MSIE, there are two lines of code which must be added to your web page. First, the normal <HTML> tag should be replaced with the following:
<html xmlns:v="urn:schemas-microsoft-com:vml">
Also, the following line must be placed in the <HEAD> section of the web page:
<style> v\:* { behavior: url(#default#VML); }</style >
These two tags enable MSIE to recognize and render VML tags, such as the simple rectangle VML tags we've seen so far. With these two lines entered, the core HTML code will look like:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style> v\:* { behavior: url(#default#VML); }</style >
</head>
<body>
</body>
</html>
Basic VML CodingVector graphics are shapes which are rendered from a mathematical description, typically written as plain text. Beginning with version 5, MSIE has included the ability to render vector graphics from text descriptions embedded within the web page. MSIE is the only browser at this time which supports VML.VML, like standard HTML, uses tag pairs which are read by the browser and used as instructions for displaying content of the web page. In the case of VML, variations of the <v:> and </v:> tag pair are used to contain the VML code - which is a text description of a graphical shape. VML supports eight pre-defined shapes (arc, line, rectangle, oval, curve, polyline, roundrect, and image). Each pre-defined shape has it's own VML tag pair that defines it. VML also supports a shape called 'shape', which can be configured to any custom shape desired. Here's an example of a pre-defined shape - the rectangle:
The VML code for the rectangle is as follows. It consists of the VML element tag pair <v:rect > and </v:rect>, as well as defining attributes such as fillcolor, strokecolor, and style.
<v:rect style="width:100;height:100 fillcolor="blue" _
strokecolor="red"></v:rect>
In general, VML code describes individual shapes and/or groups of shapes. As we will see, VML offers a variety of ways to define custom shapes, to interact with the user, and to use scripts within web pages to modify shapes and provide animations even after the page is loaded. The various VML tag pairs are called elements. Some elements define shapes and contain various attributes embedded within the tag which help modify various characteristics of those shapes. For example, fillcolor (from the VML code line above) is an attribute whose value defines the interior color of a shape. Some VML elements can only be used inside a shape element. Their purpose is to help modify a shape element. These elements tend to be complex enough that embedding them in the shape element tag pair would unnecessarily complicate the VML code, and so are used as stand-alone, embedded elements. This next example shows how the oval shape element uses an embedded fill element to create a shape with a picture embedded within it.
The VML code to create the image-filled shape is as follows:
<v:oval style="width:100;height:100">
<v:fill src="garyhead.jpg" type="frame"><v:/fill>
</v:oval>
The <v:oval> and </v:oval> tag pair defines a VML shape element - the oval. The fill element is placed between the tags of the oval element and has attributes of its own, such as src, which gives the name of the image file to be used to fill the oval shape. VML shapes consist of outlines and interiors, whose visible characteristics can be controlled by attributes embedded within the VML shape tag pairs or by sub-elements found between the tag pairs (as in the fill element example above). The outline of VML shapes follow a path of straight lines or cubic bezier curves which can be defined using VML code. Features such as color, thickness, and visibility can be defined using the VML code. Likewise, the interior of a VML shape element can be controlled/defined by the VML code. A shape interior can be transparent, filled with a color or color gradient, or filled with an raster (JPG/GIF) image. Not only can the shapes be pre-loaded into the HTML text of a web page, but their properties can be edited during the life of the web page by using scripts, such as JavaScript. This offers both interactivity as well as animation options to web page programmers. For example, here is a simple rotating rectangle:
The VML code to create the rectangle is as follows:
<div style="width:150;height:150">
<v:rect id="spin" style="width:100;height:100;" _
fillcolor="yellow" strokecolor="blue"></v:rect>
</div>
The <div> tag was used to create an area in which the rotation would take place. Without it, the changing vertical height of the rotating VML shape would cause the rest of the web page to move up and down to accommodate the changes. The rotation of the rectangle is achieved by using JavaScript, shown next, to periodically change the angle of rotation.
<script>
angle=0;
function Rotate() {
angle += 2;
spin.style.rotation = angle + "deg";
}
setInterval("Rotate()", 100);
</script>
VML additionally supports filling the shapes with gradients, as seen in the following example:
The VML code to create the gradient-filled oval is as follows:
<v:oval style="width:150;height:100">
<v:fill color2="#00FF00" type="gradient"></v:fill>
</v:oval>
These examples are intended to show the range of graphical shapes that VML can create. However, VML offers some very basic, simple to use, pre-defined shapes. These are discussed in the next section. Pre-Defined ShapesVML supports a total of eight (8) pre-defined shapes. Here's a sample of each.
This site provides a separate page to discuss each of these shapes. See the header graphics on all the VML site pages for the links to the pre-defined shapes. But here's a preview of the code, as was needed to generate the above shapes:
<v:rect style="width:100;height:100" fillcolor="red" _
strokecolor="blue"/>
<v:roundrect style="width:100;height:100" arcsize="0.3" _
fillcolor="blue" strokecolor="red"/>
<v:line style="width:100;height:100" from="0,0" to="100,100" _
strokecolor="red" strokeweight="4pt"/>
<v:polyline style="width:100;height:100" points="0,60,50,90,_
60,10,100,100" strokecolor="blue" strokeweight="1pt"/>
<v:curve style="width:100;height:100" from="0,0" control1="30,90" _
control2="80,10" to="100,0" strokecolor="red" strokeweight="3pt"/>
<v:arc style="width:100;height:100" startangle="0" endangle="120" _
strokecolor="blue" strokeweight="2pt"/>
<v:oval style="width:100;height:100" fillcolor="red" _
strokecolor="blue" strokeweight="1pt"/>
<v:image style="width:100;height:100" fillcolor="red" _
src="../images/garyhead.jpg" />
Custom ShapesVML supports an endless variety of custom shapes, including the use of text. Here's are several examples. The VML element for creating custom shapes is called a shape element and is called into play when variations of the pre-defined shapes don't meet the web designer's needs.The other pages at this site go into more detail about how to code these VML shapes into a web page (although you can use the View Source menu selection to view the code right now if you're too impatient).
|
