### 前言
本篇是继 [[Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较](http://blog.csdn.net/oscar999/article/details/8474592)
的补充和实例说明各种技术的使用方式。
### VML 的用法和实例
引入命名空间之后，就可以直接使用标签的方式绘制图形。
如下例：绘制一条从 坐标(20,20) 到 坐标(200,200) 的直线。
~~~
<HTML xmlns:v = "urn:schemas-microsoft-com:vml">
<HEAD><TITLE>VML Example</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<body>
<v:line from="20,20" to="200,200"></v:line>
</body>
</html>
~~~
说明： xmlns:v = "urn:schemas-microsoft-com:vml" 必不可少， 是引入VML的命名空间。
比较好的学习资料：
1 . [http://msdn.microsoft.com/zh-cn/library/bb263897.aspx ](http://msdn.microsoft.com/zh-cn/library/bb263897.aspx) MSDN上的VML学习资料
2. [http://www.itlearner.com/code/vml/index.html](http://www.itlearner.com/code/vml/index.html) 一个比较简单、清晰的中文入门教程
3. [http://www.dynamicdrive.com/dynamicindex11/editor.htm](http://www.tool.la/VMLPalette/) 在线绘制VML图的编辑器， 图形绘制完成可以产生对应的XML Code.
### SVG 的用法及实例
SVG在HTML中使用的方式有两种：
1. 和VML一样， 导入命名空间之后， 直接使用svg标签。(有的教程说此方式不能使用， 估计是svg的发展支持了这种方式)
~~~
<HTML xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
</BODY>
</HTML>
~~~
很简单，也是画一条线，语法基本和VML类似
2. SVG先绘制图形保存为后缀名为.svg 的文件， 再把这个文件嵌入到 HTML文档中。
嵌入可以同个以下三种标签的方式：
1). <embed>
2). <object>
3). <iframe>
先创建一个.svg后缀的文件
~~~
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
~~~
embed 标签方式==》
~~~
<HTML>
<HEAD>
<TITLE>Embed SVG </TITLE>
</HEAD>
<BODY>
<embed src="line.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
</BODY>
</HTML>
~~~
这是Adobe SVG Viewer推荐的方法。主持所有主流浏览器，允许使用脚本；不过这个标签不是合法的XHTML.
object标签 ==>
~~~
<HTML>
<HEAD>
<TITLE> Object SVG </TITLE>
</HEAD>
<BODY>
<object data="line.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
</BODY>
</HTML>
~~~
被所有较新的浏览器支持，不允许使用脚本。 如果安装了最新版本的Adobe SVG Viewer，会出现一些问题。
iframe 标签方式==>
~~~
<HTML>
<HEAD>
<TITLE> IFrame SVG </TITLE>
</HEAD>
<BODY>
<iframe src="line.svg" width="300" height="100">
</iframe>
</BODY>
</HTML>
~~~
### HTML5 Canvas 元素绘图
canvas 是HTML5支持的一种元素。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
同样是绘制一条线：
~~~
<HTML>
<HEAD>
<TITLE> Canvas </TITLE>
</HEAD>
<BODY>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.stroke();
</script>
</BODY>
</HTML>
~~~
### 一些说明
针对目前的状况来说， SVG技术应该是web图形绘制的主流。
IE9 及以上已经支持svg了， 而且微软本身也把VML作为一种过时技术来看待了。
HTML5 技术，基本上处于众说纷纭的状态。
Facebook 应用失败，转而使用原生应用。
Firefox OS却又轰轰烈烈的扛起了大旗。
结果和命运怎样，只有交给时间来抉择了。
- 前言
- [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较
- [Web Chart系列之二] 各种实现js 图表的library汇总与比较
- [Web Chart系列之三] 图形布局-Layout
- [Web Chart系列之四] 图形布局-Layout 之js设计实现
- [Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
- [Web Chart系列之五] 1. 实战draw2d 之总体介绍
- [Web Chart系列之五] 2. 实战draw2d 之Label 放大，缩小的问题(raphael的text类似问题)
- [Web Chart系列之五] 3. 实战draw2d 之图形填充色(纯色 or 渐变)
- [Web Chart系列之五] 4. 实战draw2d(Raphael)之取消Chrome中Label Text 全部选中
- [Web Chart系列之六] canvas Chart 导出图文件
- [Web Chart系列之七] 物理动画效果(如撕扯效果)
- [Web Chart系列之五] 5. 实战draw2d之figure tooltip 实现
- Web图形开发方案选型，SVG/VML/Flash/Applet优劣比较
- [Web Chart系列之五] 6. 实战draw2d之ConnectionRouter