VML とは Vector Markup Language の略で、Webページ上で線や円などのベクトル図形を表示するための言語です。IE5.0 以上でサポートされています。Netscape ではサポートされていません。
XMLベースの言語として、1998年5月13日に Microsoft、Macromedia、HP社などから W3C に提案されましたが、そのままは採用されず、Adobe 社の PGML と統合され、2001年9月5日に SVG として勧告されました。将来的には SVG に移行する予定です。「今更 VML・・・」と言われてしまいそうですが、とりあえず、今使える VML について説明します。
※ このページを IE5.0 以降のブラウザで見ると、実例が表示されます。
論より証拠。まずは、下記のコードを IE5.0 以降のブラウザで開いてみてください。簡単な折れ線グラフが描画されます。
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML TEST</title>
<style>
v\:* { behavior: url(#default#VML); }
</style>
</head>
<body>
<v:line from="0,100" to="300,100" strokecolor="black" />
<v:line from="0,100" to="0,0" strokecolor="black" />
<v:line from="0,100" to="100,0" strokecolor="red" />
<v:line from="100,0" to="200,80" strokecolor="red" />
<v:line from="200,80" to="300,10" strokecolor="red" />
</body>
</html>
VML を使用する場合は必ず、html タグの xmlns の部分と、<style>～</style> の部分を記述してください。
<v:line /> は <v:line></v:line> と同じ意味です。開始タグと終了タグを記述する場合は <v:xxx>～</v:xxx>、終了タグを省略する場合は <v:xxx /> のように、最後のスラッシュ（/）を記述してください。
固有属性： 無し。一般属性： shape 参照。
<v:rect style="width:30; height:30;" fillcolor="#ffcccc" strokecolor="red" strokeweight="1" />
固有属性： 無し。一般属性： shape 参照。
<v:oval style="width:40; height:30" fillcolor="#ffcccc" strokecolor="red" strokeweight="1" />
固有属性： arcsize（角の丸さ）。一般属性： shape 参照。
<v:roundrect style="width:30; height:30" arcsize="0.2" fillcolor="#ffcccc" strokecolor="red" strokeweight="1" />
固有属性： from（始点）、to（終点）。一般属性： shape 参照。
<v:line style="position:relative;" from="0,0" to="100,0" strokecolor="red" strokeweight="2" />
固有属性： points（通過点の集合）。一般属性： shape 参照。
<v:polyline style="position:relative;" points="10,0 20,30 30,0 40,30" strokecolor="red" strokeweight="2" />
固有属性： from（始点）、control1（制御点1）、control2（制御点2）、to（終点）。一般属性： shape 参照。
<v:curve style="position:relative;" from="0,0" control1="50,30" control2="100,30" to="150,0" strokecolor="red" strokeweight="2" />
固有属性： startangle（開始角）、endangle（終了角）。一般属性： shape 参照。
<v:arc style="width:100; height:100" startangle="0" endangle="90" strokecolor="red" strokeweight="2" />
固有属性： 無し。一般属性： shape 参照。
<v:image src="image/ki2.gif" style="position:relative; width:25; height:27;" />
<v:shape fillcolor="#ffcccc" strokecolor="red" style="width:200; height:200;" path="m 80,0 l 60,65, 0,65, 50,100, 25,160, 80,120, 135,160, 110,100, 160,65 100,65 x e"> </v:shape>
shape を用いていろいろな形を描くことができます。m 80,0 は 80,0 の位置にペンを動かす（moveto）、l 60,65, 0,65, ... は、60,65 の場所、0,65 の場所にペンで線を引く（lineto）、x は線を閉じて終了する（close）、e は終わり（end）を意味します。
shape には、fillcolor（塗りつぶしの色）、strokecolor（線の色）、path（軌跡）の他にも 70 以上の一般属性が定義されており、それらの属性は、<v:line> や <v:rect> などの属性としても使用することができます。
【shape の属性（主なもの）】
<v:rect style="width:30; height:30;"> <v:fill type="gradient" color="red" color2="white" /> </v:rect>
fill には上記のグラデーションの他にも、半透明にしたり、画像を張りつけたりなど、塗りつぶしに関する様々な効果が定義されています。type、color を含め、属性は 23 個定義されています。詳細は Microsoft のリファレンスなどを参照してください。
<v:line style="position:relative;" from="0,0" to="100,0" strokecolor="red" strokeweight="1"> <v:stroke dashstyle="dash" endarrow="classic" /> </v:line>
stroke にも点線、破線、矢印付きなどいろいろな効果が定義されています。dashstyle、endarrow を含め、属性は 25 個定義されています。
<v:shape style="width:200; height:200;" strokecolor="red"> <v:path v="m 0,100 l 100,0, 300,0 e" /> </v:shape>
属性は 14 個定義されています。
<v:rect style="width:30; height:30;" fillcolor="#ffcccc"> <v:shadow on="true" offset="5px,5px" color="gray" /> </v:rect>
属性は 11 個定義されています。
<v:rect style="width:30; height:30;" fillcolor="#ffcccc"> <v:extrusion on="true" backdepth="20" /> </v:rect>
明るさ、色調、光源の位置など、属性は 33 個定義されています。
<v:roundrect style="width:90; height:27;" fillcolor="#ffcccc"> <v:textbox><a href="xxx.htm">Click me!!</a></v:textbox> </v:roundrect>
属性は 14 個定義されています。
形に添った文字を描きます。
<v:oval style="width:400; height:70;">
<v:path textpathok="true" />
<v:fill type="gradient" color="red" color2="white" />
<v:textpath on="true" string="I have a dream."
style="font:normal normal normal 36pt 'Arial Black'"/>
</v:oval>
図形の中に画像を張りつけます。
<v:rect style="width:50; height:50"> <v:imagedata src="xxx.gif" gamma="0.3" /> </v:rect>
属性は 19 個定義されています。
formulas は描画点を計算式で求めたいときに用います。
<v:shape style="width:100; height:100;" strokecolor="red" adj="500" path="m 0,0 l 0,@0, @1,500 e"> <v:formulas> <v:f eqn="sum #0 500 0" /> <!-- @0 --> <v:f eqn="prod #0 2 0" /> <!-- @1 --> </v:formulas> </v:shape>
adj="500" は定数 500 を定義します。これは、#0 として参照できます。sum は加算や減算を用いるのに使用し、sum v1 v2 v3 は v1 + v2 - v3 を意味します。演算の結果は @0 として参照できます。prod は乗算や除算を行うのに使用し、prod v1 v2 v3 は v1 * v2 / v3 を意味します。演算の結果は @1 として参照できます。sum や prod の他にも sin や sqrt などを使用できます。
上記の他にも、Callout、Handles、Locks、Skew といったサブエレメントが定義されています。
グループを定義します。グループの中の各要素は、同じ座標原点を用いることができるようです。
<v:group style="width:100; height:100;"> <v:rect style="width:500; height:500;" fillcolor="#ccccff" /> <v:oval style="width:500; height:500;" fillcolor="#ffcccc" /> <v:line from="0,0" to="500,500"/> </v:group>
シェイプ（形）に id 属性で名前をつけておき、type="名前" でその形を呼び出します。
<v:shapetype id="hosi" fillcolor="#ffcccc" strokecolor="red" path="m 80,0 l 60,65, 0,65, 50,100, 25,160, 80,120, 135,160, 110,100, 160,65 100,65 x e"> </v:shapetype> <v:shape type="#hosi" style="width:100; height:100;" /> <v:shape type="#hosi" style="width:200; height:200;" /> <v:shape type="#hosi" style="width:300; height:300;" />
他の VML ファイルに記述されたシェイプを呼び出すことができます。まず、xx.vml ファイルに以下の記述をしておきます。
<xml xmlns:v = "urn:schemas-microsoft-com:vml"> <v:rect id="xx1" style="height:30; width:30;" fillcolor="#ffcccc" /> <v:oval id="xx2" style="height:30; width:30;" fillcolor="#ffcccc" /> </xml>
これを、次のようにして呼び出します。
<v:vmlframe style="width:50;height:50" src="xx.vml#xx1" /> <v:vmlframe style="width:50;height:50" src="xx.vml#xx2" />