SVG流程设计器跨浏览器的首选

以前在IE盛行，微软一家独大的时候，web绘图功能首选就是VML，IE5.0以上的版本都支持VML，VML可以在IE中通过文本的方式绘制矢量图像，类似在html页面中实现了画笔的功能，所以被很多人采用来实现web流程设计器。

 

随着手机，ipad等各种移动设备的升级，越来越多的应用要求支持这些移动设备。很可惜VML只支持IE，手机和ipad大部分是chrome和safari，不支持VML，web绘制流程图的功能，要实现跨浏览器，必须采用别的技术。

 

svg是Scapable Vector Graphics,可缩放的矢量图像，是互联网联盟W3C推荐的标准，符合XML节点的规则，用XML来描述二维图像的语言。和VML类似，都是用文本来描述二维图像的语言，并且SVG是W3C的标准，几乎所有浏览器都支持，但是IE5-IE8又有特殊了，需要下载adobe的SVGView插件才能查看。

 

为了兼容已经用VML做好的绘图功能，并且兼容用IE的客户，所以我们在实现web流程设计器的绘图功能时，需要根据浏览器来切换，当IE浏览器时，我们用VML来绘图，当其他浏览器时，用SVG来绘图，做到自动切换，让用户感觉不到不同，这是最好的。

 

VML和SVG的区别：
VML的优点：
XML标准，文本标记，表示方法简单。
高质量的矢量图像，支持多种不同的矢量图形元素：
 Shape
 Line
 Polyline
 Path
 Curve
 Rect
 Roundrect
 Group
 Oval
 Arc
可以方便的嵌入html文件。
兼容DHTML的大部分属性和事件。如，id,title,onmouseover等等，还可以自定义属性。

支持动画和交互

 

SVG支持任意的几何图形，渐变色，滤镜，动画等。并且，VML有的那些有点，SVG也有，如
基于XML标准
高质量的矢量图像
文本描述的二维图像
另外，SVG比VML还有一些优点
灵活的文件格式
支持交互和动画
支持字符查找
支持Xlink和Xpointer

利用VML和SVG的相同和不同，我们在绘制流程图的时候，根据浏览器的不同，切换到不同的技术。如IE中，我们用VML来划线：

 

同一个流程，Safari中绘制的流程图：

 

 

线条的粗细稍有不同，位置形状完全一致，自动切换，终端用户使用中感觉不到差异。