Vector Markup Language
When Microsoft brought out Internet Explorer version 4, it also brought out a development called structured graphics. Structured graphics are an ASCII vector format for describing drawings. This format is really of historical interest only, but it is supported by Internet Explorer version 4 and will still be supported in Internet Explorer version 5. There is a tool available from Microsoft, called wmfcnv.exe, that can convert vector Windows Metafile format (WMF) files into structured graphics format.
|
Listing 21.10 is a very simple structured graphics file for the creation of a yin-yang symbol embedded in an HTML file.
|
Listing 21.10 A Yin-Yang Symbol in Structured Graphics Format
|
1: <html> 2: <head> 3: <title>Structured Graphic</title> 4: </head> 5: <body> 6: <H1>Animated Yin-Yang</H1> 7: <p> 8: <object ID="yin-yang" 9: CLASSID="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" 10: STYLE="height: 200; width:200; zindex:10"> 11: <PARAM NAME="Line0001" VALUE="SetLineColor(0,0,0)"> 12: <PARAM NAME="Line0002" VALUE="SetFillColor(255,0,0)"> 13: <PARAM NAME="Line0003" VALUE="SetLineStyle(6)"> 14: <PARAM NAME="Line0004" VALUE="Polygon(102,2,5,-1,3,-3,1,-8,-3,-11, 15: -5,-12,-8,-14,-11,-15,-14,-17,-18,-17,-20,-17,-23,-17,-26,-16,-29, 16: -15,-32,-14,-35,-12,-38,-9,-41,-7,-43,-5,-44,-3,-46,-1,-47,2,-47,4, 17: -48,6,-48,8,-48,13,-48,9,-49,7,-49,4,-49,1,-49,-2,-49,-5,-49,-7,-49, 18: -10,-49,-13,-48,-17,-47,-20,-46,-23,-44,-26,-43,-29,-41,-31,-39,-33, 19: -37,-35,-35,-37,-33,-39,-31,-41,-29,-42,-27,-44,-24,-45,-22,-46,-19, 20: -47,-17,-48,-14,-49,-11,-50,-8,-50,-5,-50,-2,-50,1,-50,4,-50,7,-49,11 21: ,-49,14,-48,17,-47,19,-46,22,-45,24,-43,27,-41,29,-39,32,-38,34,-36, 22: 36,-34,38,-32,39,-30,41,-27,43,-26,44,-24,45,-22,46,-20,46,-17,47, 23: -15,47,-13,47,-11,47,-8,47,-6,46,-3,45,1,44,1,43,3,41,4,40,6, 24: 38,7,35,8,33,9,31,10,28,10,25,10,23,10,20,9,17,8,14,7,12 25: ,6,10,4,7)"> 26: <PARAM NAME="Line0005" VALUE="SetFillColor(255,255,0)"> 27: <PARAM NAME="Line0006" VALUE="Polygon(102,-3,-4,0,-2, 28: 2,0,7,4,10,6,11,9,13,12,14,15,16,18,16,21,16,24,16,27, 29: 15,30,14,33,13,36,11,39,8,42,6,44,4,45,2,47,0,48,-3,48, 30: -5,49,-7,49,-9,49,-14,49,-10,49,-8,50,-5,50,-2,50,1,50,4, 31: 50,6,50,9,50,12,49,16,48,19,47,22,45,25,44,28,42,30,40,32, 32: 38,34,36,36,34,38,32,40,30,41,28,43,25,44,23,45,20,46,18, 33: 47,15,48,12,49,9,49,6,49,3,50,0,49,-3,49,-6,48,-10,48,-13, 34: 47,-16,46,-18,45,-21,44,-23,42,-26,40,-28,38,-31,37,-33,35, 35: -35,33,-37,31,-38,29,-40,26,-42,25,-43,23,-44,21,-45,19,-45, 36: 16,-46,14,-46,12,-46,10,-46,7,-46,5,-45,2,-44,0,-43,-2,-42,-4, 37: -40,-5,-39,-7,-37,-8,-35,-9,-32,-10,-30,-11,-27,-11,-24,-11, 38: -22,-11,-19,-10,-16,-9,-13,-8,-11,-7,-9,-5,-6)"> 39: </object> 40: </body> 41: </html>
This file, displayed in Internet Explorer 5, is shown in Figure 21.6.
Figure 21.6 This is what Listing 21.10 looks likes like in Internet Explorer 5.
| The structured graphics format shown in Listing 21.10 obviously doesn't have the high information content of PGML, but it does work. Generally, this structured graphics file format is about 20% smaller than the equivalent Windows Metafile format file, which, if it only contains a vector image, is already very compact. The bigger the file, the larger the space saving. |
One of the interesting features of this format is that it is very easy to animate. By adding just nine lines, I can animate this drawing so that it will rotate when you click the button, as shown in Listing 21.11.
|
Listing 21.11 Animating the Yin-Yang Symbol
|
1: <html>
2: <head>
3: <title>Structured Graphic</title>
4: <SCRIPT LANGUAGE="JavaScript">
5: <!--
6: function Rotate(degVar){
7: widget.rotate(0,degVar,0);
8: window.setTimeout("Rotate(5)",040,"JavaScript");
9: }
10: -->
11: </script>
12: </head>
13: <body>
14: <H1>Animated Yin-Yang</H1>
15: <p>
16: <object
17: ID="widget"
18:
19: .
20: . put object code here
21: .
22:
23: </object>
24: <p>
25: <INPUT TYPE=button ID=rotate VALUE="ROTATE" onclick="Rotate(0)">
26: </body>
27: </html>
Three illustrations of the rotating image are shown in Figures 21.7, 21.8, and 21.9.
Figure 21.7 This is a view of the rotating Yin-Yang symbol in Internet Explorer 5.
Figure 21.8 This is another view of the rotating Yin-Yang Symbol in Internet Explorer 5.
Figure 21.9 A third view of the rotating Yin-Yang Symbol in Internet Explorer 5.
Curiously, the more times you click the button, the faster the image appears to rotate but, because there is internal processing rather than file loading to be done, the speed at which the image is redrawn is quite fast. Structured graphics were a forerunner of Microsoft's Vector Markup Language (VML). VML takes the basics of structured graphics but puts them inside XML elements (taken from the VML namespace). If I were to take my yin-yang symbol from Listing 21.10 (I won't since I'd have to do it by hand and there are no tools to check the results afterwards), part of it might look something like this:
<v:line id="Line0002" from="0 0 " to="100 100" style="visibility: visible" stroke="true" strokecolor="black"> <v:curve from="0 0" to="0 0" style="visibility: visible">
I won't go into any more detail about VML here because there's no way to guarantee that any code I produce is correct. Furthermore, the submission to the W3C is (October 1998) still only a note, which has precious little official standing. However, informed sources say that Microsoft intends to go ahead and implement VML, regardless of what the W3C does. I gather from a visit to the Microsoft campus in Redmond that we may even hope to see it in Microsoft Office 2000 and that conversion tools from existing graphics formats are on their way.