Web前端绘图技术解析：SVG、Canvas与VML对比

提及绘图与报表生成技术，Flex常为首选，Java Applet亦有部分应用。两者各有优劣：Flex功能强大但体积笨重，而Java Applet在实际开发中相对少见。

当前Web绘图方案丰富，通过搜索JS绘图工具可发现诸多功能强大的库，例如maxGraph（访问http://www.jgraph.com/mxgraph.html查看演示）。

若已了解上述工具，接下来重点探讨Web环境中JavaScript绘图的核心技术。

尽管JQuery和EXT等框架提供了大量绘图插件，但本文聚焦于浏览器原生对绘图的支持能力。部分插件无法兼容所有浏览器，原因在于底层技术支持的差异。

Web绘图核心技术：SVG、Canvas与VML

JavaScript图形支持主要围绕三个核心技术：SVG、VML和Canvas。

SVG技术详解与浏览器支持

关于SVG技术。

可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML）的二维矢量图形格式，由W3C制定为开放标准。2008年12月22日，SVG Tiny 1.2成为W3C推荐标准，目前W3C正在制定SVG 1.2版本。

SVG文件可嵌入JavaScript（严格而言为ECMAScript）脚本以控制对象，因此在Web JS绘图中是一个重要考量选项。

然而，SVG面临两大挑战：一是与占据市场主导地位的Adobe Flash竞争；二是其本地运行环境下的厂商支持程度不足。

以下是各浏览器对SVG的支持情况概述。

浏览器支持方面，Mozilla Firefox自1.5版本起支持SVG显示，Opera 8.0版开始支持Tiny 1.1规格的SVG，Google Chrome和Safari也支持SVG。Microsoft Internet Explorer在8.0版之前不支持SVG，直至9.0版才开始支持。这意味着市场占有率最高的IE浏览器长期缺乏支持，且Opera对SVG特性的支持最为全面，其他浏览器存在部分属性不支持的情况。这引发了实际应用中是否需强制用户安装特定浏览器的疑问。

以下展示一个SVG绘图效果示例。

Canvas技术特性与兼容性分析

关于Canvas技术。

Canvas元素属于HTML5规范，允许脚本动态渲染位图像。该概念最初由苹果公司内部使用，后建议纳入下一代网络技术。浏览器支持方面，Firefox、Safari和Opera 9均支持canvas标签用于绘制2D图形，但IE不支持。Google开发了excanvas库以在其他浏览器中模拟canvas效果。目前excanvas版本为excanvas_r3，仍存在诸多Bug，且在IE上效率低下，因其底层利用IE的VML实现canvas效果。

以下展示Demo中的绘图效果。

VML技术简介与局限

关于VML技术。

VML全称Vector Markup Language（矢量可标记语言），其矢量特性允许图形任意缩放而不损失质量，在地图制作等领域具有重要用途。但VML仅被IE浏览器支持。

以下展示一个VML绘图效果示例。

以上内容为本文全部，希望对学习有所帮助，并感谢支持本站。