【转载】比较html5、GML、SVG、VML

标签: HTML5 技术博文 HTML5前沿技术 | 发表时间:2012-07-21 03:28 | 作者:HTML5研究小组
出处:http://www.mhtml5.com

web图形方案比较 html5GMLSVGVML

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作为描述空间信息的元语言的一些优点。它只能描述空间实体的矢量信息和属性,具体显示的时候可采用两种不同的途径:
GML Drawà Display
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的预定义图形元素:
Shape
Path
Line
Polyline
Curve
Rect
Roundrect
Oval
Arc
Group

由 文本构成的图像,并可集成到HTML。由于VML使用简单的文本来表示图像,这样就可用很少的字节来表示比较复杂的图像。VML与HTML兼容,通过在 HTML中声明VML命名空间并声明处理函数,就可以和其他HTML元素一样使用VML元素,在客户端浏览器显示图像。VML标记里面可以定义DHTML 大部分属性和事件,比如说id, name, title, onmouseover 等等。

支持 交互与动画

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

转载自: http://my.oschina.net/u/254176/blog/53920#jtss-tsina

相关 [html5 gml svg] 推荐:

【转载】比较html5、GML、SVG、VML

- - HTML5研究小组
web图形方案比较 html5、 GML、 SVG、 VML. GML、SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下面简单介绍一下. 是基于XML的空间信息编码标准,由OpenGIS Consortium (OGC)提出,得到了许多公司的大力支持,如Oracle、Galdos、MapInfo、CubeWerx等.

三天学会HTML5——SVG和Canvas的使用

- - ITeye博客
在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习. 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容. 第2天将学习如何使用Canvas 和使用SVG 实现功能. Lab1—— 使用Canvas. Canvas 是指定了长度和宽度的矩形画布,我们将使用新的HTML5 JavaScript,可使用HTML5 JS API 来画出各种图形.

了解SVG

- - CSDN博客推荐文章
语言: JavaScript,HTML, SVG.         SVG- 可缩放矢量图形 ,是一个XML风格标记驱动的矢量图形的浏览器渲染引擎. 除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG. Canvas也有同样的支持情况,所以问题往往表现为:我们应该使用哪种方案.

SVG的用法

- - WebHek
先让大家感受一下用SVG技术制作的简单动画:. 如果你看不到这个演示,说明你的浏览器不支持SVG,请使用最新版的谷歌浏览器或火狐浏览器. 《 如何画出一条会动的线》这篇文章专门介绍了上面这SVG动画是如何简单的实现的. SVG是 Scalable Vector Graphics三个单词的首字母缩写.

SVG使用示例

- - JavaScript - Web前端 - ITeye博客
当用户在圆上点击时,使用js创建一个元素:. // 更高效的计时器,类似于setTimeout,不会发生丢. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

SVG动画入门

- - Web前端 - ITeye博客
今天我们继续来学习SVG动画方面的知识. 一听到动画效果,你可能就觉的头都打啦. 不要担心,SVG本身提供的动画属性非常容易使用,今天我们就来学习一下基础的知识. SVG中提供了 animate的方法来制作动画属性:. 在上面的代码中,我们在元素里面添加了一个 <animate>的标签.

理解SVG的viewport,viewBox,preserveAspectRatio

- - Web前端 - ITeye博客
        一个svg,设置了viewBox之后,viewBox的长宽值如果都小于svg的viewport的长宽值,那么结果一定是放大;但是viewBox的长宽值一旦有一个值大于vewport之后,最后的实际效果就不是放大,而是缩小了.         因为viewBox的目的是要自己设置的长宽范围填满viewport.

【转载】SVG是什么?SVG有什么用途?

- - HTML5研究小组
随着网络上信息数据的大量涌现,如何正确显示和出版是有效传输、接收和利用它们的基础. 图形、图像是信息数据可视化的主要方式. 但现有的图形、图像格式存在着缺陷:非开放式,显示和印刷质量及适应性差,难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等. SVG正是在这样的背景下诞生的. SVG(Scalable Vector Graphics,可伸缩性矢量图形)是由万维网联盟(W3C)推出的基于XML编码的开放式图形、图像标准.

Android_SVG概述及生成使用SVG详解

- - CSDN博客推荐文章
下面的命令可用于路径数据:. 注释:以上所有命令均允许小写字母. 大写表示绝对定位,小写表示相对定位. 请把下面的代码拷贝到记事本,然后把文件保存为 "path1.svg". 把此文件放入您的 web 目录:. 上面的例子定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径.

未来必热:SVG Sprite技术介绍

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=4264. 这里所说的Sprite技术,没错,类似于CSS中的Sprite技术. 图标图形整合在一起,实际呈现的时候准确显示特定图标. 另,本文图片甚多,爪机党继续浏览需慎重. 二、SVG Sprite与symbol元素.