各种web页面中的绘图技术对比

总括:

  1. Flex
  2. JavaApplet
  3. canvas
  4. svg
  5. vml

1.FLEX

体型庞大但是效果好,依托于flash最终生成为swf(需要插件flash player)

2.JavaApplet

java开发的绘图小插件,用途基本在内部很少见到

3.canvas

目前最热的技术,依托于html5标准,是h5的一部分允许脚本动态渲染位图。历史:起源于苹果公司后来被人建议成为下一代网络技术使用该元素。

浏览器基本都支持ie9 fixfox opera chrome safari都支持这个tag.canvas目前主要用来绘制2d,3d方面需要webgl来处理。ie早期版本不支持,所以google开发了excanvas来支持但还有很多bug,而且效率不行。主要是用ie的vml来模拟实现。

4.svg

SVG(Scalable Vector Graphics,可伸缩矢量图像)是W3C在2000年发布的一种开放的标准文本式矢量图形描述语言。使用SVG可以在网页上显示出各种各样的高质量的 矢量图形,包括许多图像处理中常见的功能,如图形、文字、动画、颜色、滤镜效果等。最关键的是SVG完全用普通文本来描述。也就是说,这是一种专门为网络 而设计的基于文本的图像格式。并且SVG基于XML(Extensible Markup Language),所以可扩展性很强,能够描述任意复杂的图像。

SVG的历史
SVG的历史最早可以追溯到1998年4月,W3C联盟(World Wide Web Consortium)先后收到了两个关于新的图形格式的提案,即Adobe、IBM、SUN等公司联合制定的PGML(Precision Graphics Markup Language,精确图形标记语言)和微软、 Macromedia等公司提交的类似矢量图形标准VML(Vector Markup Language,向量标记语言)。虽然PGML和VML都是使用CSS的XML向量语言,但二者却是相互竞争的对手。从功能上分析,他们的区别是 PGML比较适合专业设计和出版,而VML适合普通的矢量图形应用。采用哪一个作为通用矢量图形标准是一件十分困难的事情,为了更好地促进XML向量图形 的发展,W3C决定在融合两者优点的基础上,开发一种新的语言即SVG。W3C期望SVG这种基于开放标准的可扩展语言,能够满足Web开发者对动态、可 缩放和平台无关的Web内容表现和交互手段日益增长的需求。

SVG出现后相当长的时间里并不"火",究其原因主要有两点:
  1 SVG最大的问题是没有完全支持SVG的浏览器出现。
  主 要问题是SVG本地运行环境的下厂家支持程度,SVG作为一个开放的通用矢量图形标准,各大软件厂商只考虑自身利益,不愿在其中投入过多资源开发相应的支 持技术与产品。作为市场上占有率最高的Internet Explorer,微软一直没有兑现支持SVG,而力推自己的VML。
  2 SVG与Flash、VML的竞争。
  SVG面临的另一个问题是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题。
   在2005年之前力推SVG技术的最大的商业公司非Adobe所属,并且该出版巨头对svg技术发展提供了非常重要的贡献。Adobe看中svg的优 势,并推出在线浏览"Adobe SVG Viewer" 插件以支持显示svg,而这样做无非就是看中其未来的发展前景及巨大的商业价值。但"Adobe SVG Viewer"毕竟只是一种过渡性的软件,没有主流浏览器内置支持是无法普及SVG技术的,更无法谈起SVG在的商业价值。进入2005年,Adobe收 购了Macromedia,并且开始淡化"Adobe SVG Viewer"的支援,就像wwwtiger提到的一样,这些都是出于其商业目的。
  Flash背后是Adobe,VML背后的是微软。

对于浏览器支持方面,Mozilla Firefox自版本1.5发行后,即开始支援SVG格式的显示,Opera 8.0 版开始支援显示Tiny 1.1规格的SVG,Google Chrome和Safari支持SVG显示,Microsoft的Internet Explorer 8.0版之前尚未支援SVG,直至由Internet Explorer 9.0版开始支援SVG。也就是说,市场占有率最大的IE到目前为止才刚刚开始支持,就是说普通人使用的IE浏览器是不能使用的,而且对于支持程度来说,对SVG支持最好的浏览器是Opera,它支持大多数的SVG特性,其他浏览器不能支持一些属性。难道我们给客户说你必须安装Opera浏览器?

5.vml

VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途。但是VML只是被IE支持。

以下来源:http://blog.csdn.net/moonpiazza/article/details/16024

说明:

GML、SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下面简单介绍一下。

GML(Geography Markup Language)
是基于XML的空间信息编码标准,由OpenGIS Consortium (OGC)提出,得到了许多公司的大力支持,如Oracle、Galdos、MapInfo、CubeWerx等。运用GML,封装的地理数据和图形解释是清楚分离的。

GML基于XML用文本表示地理信息
由于GML可看成是XML的一个具体的词表,熟悉了XML就比较容易理解GML。而且随着XML的应用日益广泛,GML也将受益。另外文本比较简单、直观,容易理解和编辑。

GML封装了地理信息及其属性
GML基于地理信息抽象模型,即空间实体特征及属性封装。地理特征包括一系列的属性和相应的几何信息,一般来说属性由名字、类型和值组成,几何信息由基本元素如点、线、面、曲线、多边形等组成。目前GML主要局限在二维应用,正扩展到二维半和三维空间以及特征间的拓扑关系。GML允许相当复杂的特征,如特征间的嵌套。例如飞机场由出租汽车道、飞机跑道等组成。

GML封装了空间地理参考系统
空间地理参考系统是地理信息系统数据处理的基础。GML封装了空间地理参考系统、主要的投影关系等,保证分布式处理的扩展性和灵活性。

GML可以实现地理数据的分布式存储
GML对地理数据的分发是非常方便的技术手段,但其作用不止局限于此,同样可以成为地理数据分布式存储的重要手段。主要的技术工具是XLink和Xpointer。
从上边的介绍可以看出GML作为描述空间信息的元语言的一些优点。它只能描述空间实体的矢量信息和属性,具体显示的时候可采用两种不同的途径:
l GML Drawà Display
l GML Transform à SVG, VML Draw àDisplay
第一种途径需要直接操作GML数据进行分析并显示。
第二种途径是把GML数据转换成相应的图形格式的数据,例如SVG,VML及X3D。然后由已经存在的支持这几种图形格式的软件进行显示。下面介绍一下SVG和VML。

VML(Vector Markup Language)
是一个最初由Microsoft开发的XML词表,现在也只有IE5.0以上版本对VML提供支持。使用VML可以在IE中绘制矢量图形,所以有人认为VML就是在IE中实现了画笔的功能。下面介绍一下VML的优点:
基于XML标准
XML是公认拥有无穷生命力的下一代网络标记语言, VML具有先天的优势,它的表示方法简单,易于扩展等等。
支持高质量的矢量图形显示
VML支持广泛的矢量图形特征,它们基于由相连接的直线和曲线描述路径。在VML中使用两个基本的元素:shape和group。这两个元素定义了VML的全部结构;shape描述一个矢量图形元素,而group用来将这些图形结合起来,这样它们可以作为一个整体进行处理。
VML规范包括大量的支持多种不同矢量图形特征的元素。下面是VML的预定义图形元素:
l Shape 
l Path
l Line 
l Polyline
l Curve 
l Rect
l Roundrect
l Oval
l Arc
l Group
由文本构成的图像,并可集成到HTML
由于VML使用简单的文本来表示图像,这样就可用很少的字节来表示比较复杂的图像。VML与HTML兼容,通过在HTML中声明VML命名空间并声明处理函数,就可以和其他HTML元素一样使用VML元素,在客户端浏览器显示图像。VML标记里面可以定义DHTML大部分属性和事件,比如说id, name, title, onmouseover 等等。
支持交互与动画
但VML的功能不只是绘图,他还可以在图形中嵌入文本,并可实现超链,还可通过脚本语言实现一定的动画功能。VML赏析

SVG(Scalable Vector Graphics)
SVG是一种基于XML的开放的矢量图形描述语言。SVG图像是与XML1.0兼容的文档,SVG元素是指示如何绘制图像的一些指令,阅读器(Viewer)解释这些指令,把SVG图像在指定设备上显示出来。使用SVG可以在网页上显示出各种各样的高质量的矢量图形,支持很多您想象得出的功能:几何图形、动画、渐变色、滤镜效果等。最关键的是,它也是完全用普通文本来描述的!也就是说,这是一种专门为网络而设计的基于文本的图像格式。
SVG是对PGML和VML的一种综合,所以VML的优点也就成为SVG的优点,例如:
基于XML标准
高质量的矢量图像
由文本构成的图像
我们可以不用任何图像处理工具,仅仅用记事本就可以生成一个SVG图像。这对于图像处理的工作者来说可能会感到不可思议。其实仔细想想也可以理解,矢量图像一般是以算法指令来描述,建立在文本基础上的SVG图像中所有的描述语句都可以直接观察到,所以也非常容易进行二次修改与更新,"可升级"的特点在这里可以得到恰当的反映。
另外,与VML相比SVG还有一些优点:
灵活的文件格式
SVG可升级的特性不仅仅表现在二次修改方面,还表现在另外很多地方,包括这里介绍的灵活的文件格式。在以前的图像中,文本都作为位图而保存于图像中,图像形成以后不能单独对文本进行修改;在PNG格式中这一点有所改进,文本可作为一个独立的层存在;SVG更灵活地扩展了图像的文件格式,它由三个部分组成:矢量图形、位图和文字。这样SVG不仅仅可以应用矢量图像和文字对象,同样可以纳入位图,可以制作出任何其它格式图像能达到的效果。由于文件格式是文本形式的,可以很容易地在以后任何时候进行修改。而且在页面运行的过程中,也可以对很多部分做即时的修改,其中的图形描述还可以重复使用。
支持交互和动画 
SVG支持SMIL(synchronized multimedia integration language),使得用户可以自由的同SVG中的元素完成一些交互的动作,从而完成既定的目标,这一点在目前单独依靠图片是完成不了的,需要由网页中的脚本语句来实现。 
支持字符查找 
查找"图片"中的字符,在SVG中成为可能。而这在其它格式的图片文件中则是不可能的。
支持Xlink 和Xpointer 
   这样就可以在SVG文档之间制作超级链接。
SVG作为W3C组织正式推荐的图像格式,拥有众多的支持机构。像Adobe公司已经宣称将在推出的Adobe图像处理套件如Illustrator、Photoshop、GoLive和Cyber Studio中集成SVG的全部功能,并且还提供Netscape Navigator和IE的插件,以便使其能够直接支持SVG文件的浏览。Netscape和Microsoft公司也已经开始进军SVG领域,这标志着未来的网络浏览器将会内置对SVG文件的支持功能。
总结
 GML、SVG、VML都与矢量图形有着密切的关系:GML在表示实体的空间信息的同时加入了实体的其他属性信息,是表示实体的空间信息和属性的编码标准,但它并不支持直接显示图形。而VML和SVG是在表示图形的矢量信息同时加入了图形的显示信息(即以什么样的样式显示矢量图形),是显示矢量图形的两种比较好的格式。相比之下,SVG是综合了VML的优点后推出的,是国际标准,它比VML具有更多的优点,也有更广阔的前景。但由于VML有IE的支持,而SVG要想在浏览器中显示就需要安装插件,在这一点上,VML优于SVG。

原文地址:https://www.cnblogs.com/c4895007/p/4105174.html