以前在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中绘制的流程图:
线条的粗细稍有不同,位置形状完全一致,自动切换,终端用户使用中感觉不到差异。