# Web图形开发方案选型，SVG/VML/Flash/Applet优劣比较 在Web 项目开发过程中,我们常常会使用到各类图形,如流程图，饼图，甘特图，散列图，趋势图等等。目前有很多种方法在网页上绘制图形， 但是要找到完美的web图形解决方案是比较难的，只能是根据自己的需要，选择自己最合适的画图方案。 Web 图表一般有以下几种做法： 1.使用客户端控件技术 2.使用服务器端生成图片 3.使用富客户端技术 **使用客户端控件技术** 应用微软的ActiveX 控件以及Java的applet技术对图形的支持来显示一个图表 。 这种方式显然对于客户端要求太高，插件的开发相对麻烦,随着现在主流浏览器放弃对控件的支持后，这种方式只适合一些局域网的应用，而对于因特网的环境就显得不太适合。被我们所放弃。 **使用服务器端生成图片** 直接在web服务器端生成好图表图片文件后发送给浏览器。 图片技术 由于浏览器绘制图形存在一定困难, 所以在服务端动态生成图片是一种较好的解决方案。 JFreeChart是JAVA平台上的一个开放的图表绘制类库。可以绘制多种图表，并且可以产生PNG和JPEG格式的输出，基本能够解决目前的图形方面的需求。 优点: 纯JAVA代码编写,服务端生成图形,减轻客户端负担。 缺点:  Web 应用时,特别是动态生成图片,会产生大量的冗余图片数据。 **使用富客户端技术** 根据服务器返回数据在浏览器端绘制图表，一般有以下几种方案： **VML技术** VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5。0发布的 VML其实是Word和HTML结合的产物。微软把Word里面的图形控件结合到IE里面，使IE也具备了绘图功能。 优点: 基于XML标准，支持高质量的矢量图形显示。 结合脚本,可以让图形产生动态的效果 缺点: 只能在IE浏览器或以IE为内核的浏览器才能用VML。 **SVG 技术** SVG(可放缩的矢量图形)是W3C在2000年8月制定的一种新的二维矢量图形格式， 优点: 基于XML标准，采用文本来描述对象，具有交互X和动态X, 完全支持DOM 缺点: IE则依赖Adobe Systems的一款插件支持SVG。用户必须下载、安装这款插件才能够在IE中显示SVG格式图像。 **多比控件** 多比图形控件出现简化了的这种开发难度，它是一款基于Web的矢量图形控件，能够检测浏览器类型，自动选择VML或SVG方案进行做图， 类似于网页上的Visio控件，是目前国内外最佳的基于web矢量图解决方案，可以用于电力、化工、煤炭、工控组态软件、仿真、地理信息系统、工作流、复杂报表 工业SCADA系统、ERP流程设计系统、图形管理、图形拓扑分析、GIS地理信息系统系统、工程制图等领域。 多比图形编辑器实现了图形、图像和文字的有机统一。它除了支持HTML 中常用的标记,如文本、图像、链接、交互性、CSS的使用、脚本( Scrip t)外,还提供了大量针对图形、图像、动画的特定标记。对SVG图形文件进行编辑管理的过程为: SVG图形文件经XML 解析器打开,并在内存中生成一个对象树,用鼠标事件来驱动脚本执行,脚本通过DOM接口对对象进行相关的操作,来实现图形绘制、编辑等功能。 **Flash 技术** Open Flash Chart 是一个 Flash 图表组件，很容易安装，提供以下语言的API： PHP, Perl, Python, Java, Ruby on Rails, and 。Net 来控制图表。 优点: 图形效果好,根据服务器数据生成相应的图形,可以适当编写事件处理。 缺点: 需要Flash插件支持,绘制特定的图形需要专业的flash技术支持。 **Canvas 技术**  <canvas>是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。 <canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入，而后被应用于Safari。基于Gecko1。8的浏览器， Firefox 1。5，也支持这个新元素。元素<canvas>是WhatWG Web applications 1。0也就是大家都知道的HTML 5标准规范的一部分 优点: 基于标准规范,灵活绘制各类图形。 缺点:  IE需要使用canvas.js 类支持图形的扩展。 **JavaScript图形库技术 （jsgraphics）** JavaScript图形库可在网页上动态绘制圆、椭圆、斜线、折线、多边形（包括三角形、矩形）。底层通过创建大量1px*1px的DIV实现，同时对于连续的像素进行了优化，尽量地减少所需的DIV，因此有较好的性能，当然和Java2D、GDI+、OpenGL、DirectX、Flash、SVG、VML及HTML Canvas是无法相比较的。 优点: 使用 Web 的基本技术实现图形化,不需要任何的扩展或者支持。 缺点: 图形非矢量，曲线情况下平滑度不够，图形较多时性能存在一定的问题。