前端图形开发越来越备受关注，或许近两年受html5中canvas元素的推动。对于前端来说，图形开发主要涉及有canvas、svg以及过气的vml。虽然它们很多特性都相同，但个人认为canvas更适合游戏方面的开发，而尽管svg很早（1999年）就被w3c提出，但其状态一直不温不火。为了兼容IE9以下的低版本浏览器，显然vml是我们无奈的选择。其实很多关于图形的js库，都采用将svg和vml封装起来，这样你在使用时并不需要关心这两种语法的具体实现，只需要传入相关数据（一般为json格式）便可在不同的浏览器生成相应的图表，比如highchart和raphaeljs。本篇文章主要描述如何用svg和vml生成一个月流量图，另外还会提到它们的一些问题。

Svg

除了IE9以下的版本，其他浏览器大部分都可以支持svg。因为svg和vml都是xml语言，因为一些操作html的方法并不适合它们，比如元素的创建，就算创建成功插入到了页面也不一定会显示，而且一些属性的读取和设置也不正常，毕竟传统的js库都是基于html。

我们可以通过多种方式引入svg，可以在html直接使用svg标签，可用img标签引用、也可以作为css背景使用。不过最常用的还是直接在网页里包含svg代码。

创建svg时，不能使用document.create…，而是采用：

document.createElementNS('http://www.w3.org/2000/svg', tag);

不过比较好的一点是可以通过css来定义svg相关属性，比如说边框颜色stroke、宽度stroke-width或者填充色fill。你也可以使用伪类hover来设置鼠标经过颜色。当然，也有一些svg标签的属性不能用css来控制，比如包含组标签 g，调整g的位置使用left或者top会发现时无效的，而是需要通过其属性transform来定义：

<g transform="translate(350,80)" style="display:none;"></g>

关于svg还有很多内容，在日后的文章会说到。

Vml

Vml是微软很早之前发布的，它的属性和方法与svg大部分相同，不过属性名和使用上还是有一些差异的。或许是因为往标准靠拢的原因，现在微软已经宣布不再对它提供支持，不管它死活了。正因为如此，我们可以在IE9以及IE9以上的浏览器使用svg。

现在看到的vml资料比较少，而且都是零几年的。对于使用vml元素去生成图形，如果你不是很了解它们的操作方法，必定会跳很多坑。比如，生成的vml元素在网页里显示是需要给html加入vml的声明，我们首先需要通过判断浏览器是否支持svg，然后对于不支持的则使用vml，声明如下：

if($.browser.msie){
　　if(parseInt($.browser.version)<9){
　　　　$("html").attr("xmlns:v","urn:schemas-microsoft-com:vml");
　　}
}

再有就是，需要给用到的vml元素设置样式行为：

v\:Shape,v\:Line,v\:PolyLine,v\:Rect,v\:RoundRect,v\:TextBox,v\:shadow,v\:Oval,v\:Image,v\:Group{behavior:url(#default#vml);display:inline-block;}

这样我们才能正常显示vml图形。另外，对于属性的设置也要注意，比如边框宽度不是strokewidth而是strokeweight，一些属性只能写在行内便签，不可通过css设置。因为数据时动态的，所以我们最好是动态创建vml元素，通过实践，我动态创建的vml比原有就存在html的vml，操作起来更方便、有效。有时真的会因为一些或许你不知道的错误而抓狂。因此我觉得数据生成图形，能用html完成的，就尽量不要用vml。

我做了一个细小的数据展示图表，主要展示每个月的使用流量，详见 demo。

总结，本篇所述内容很有限，也比较入门。主要描述如何用svg和vml开发一个小的数据图形展示，前面也说到vml是无奈之举，如果你公司的图形展示不需要兼容低版本的IE浏览器，那我们大可潇洒的抛弃vml，大刀阔斧的往svg迈进，把主要精力都放在svg的开发上，毕竟svg才是标准，也是大势所趋。当然，你也可以借助相关图形JS库开发，如果你不在乎那几百K文件的加载和图形局限的话。

参考