`
deng131
  • 浏览: 676169 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

SVG、CANVAS、VML比较

阅读更多
Svg:W3C标准,Firefox, Opera 支持,在IE下需要插件(Adobe SVG Viewer)。 

Canvas〔推荐〕:Firefox, Opera 支持,IE不支持。

VML:仅在IE下支持 


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。

参考:
http://www.cnblogs.com/wtcsy/archive/2011/01/10/1931582.html
分享到:
评论

相关推荐

    利用SVG或VML在网页上实现3D的曲面效果

    在实际项目中,可以结合HTML5的Canvas和WebGL等技术,进一步增强SVG或VML的3D效果。Canvas提供了画布上绘制像素的能力,而WebGL则允许在浏览器中进行硬件加速的3D图形渲染。通过这些技术,可以创建更加丰富和真实的...

    zrender-3.1.2-master :轻量级、高性能、MVC架构、二维渲染引擎(提供 Canvas、SVG、VML 等多种渲染方式),完整官方源码

    ZRender是阿里集团开源的一款轻量级、高性能的二维渲染引擎,版本为3.1.2,基于MVC架构设计,适用于Canvas、SVG、VML等多种渲染环境。它为Web前端开发提供了强大的图形绘制能力,尤其在数据可视化和图表制作方面表现...

    Fashion:在Javascript SVG,VML,Canvas,WebGL中提供相同接口的图形库

    时尚Fashion是一个JavaScript图形库,旨在为SVG,VML,Canvas和WebGL提供统一的接口。 其中很多东西都受到RaphaelJS和PaperJS的启发。如何建造 $ make-> fashion.js is the Script.执照根据MIT许可证授予使用它的...

    用JavaScript画直线、圆、椭圆(不用VML,Canvas) | #hta #javascript #2d

    GCanvas库通过操作DOM元素,特别是SVG或者VML(Vector Markup Language)元素,来模拟Canvas的绘图接口。在不支持SVG或VML的浏览器中,GCanvas可能使用图像精灵(image sprites)或者其他技术来实现图形绘制。 1. *...

    VML极道教程(IE打开)

    随着Web技术的不断发展,开发者应关注更通用的解决方案,如SVG和Canvas,以及Web组件技术,以实现更高效、更具适应性的网页图形设计。 总结,VML作为曾经的IE浏览器矢量图形解决方案,虽然在现代Web开发中已不再...

    JS页面动态绘图工具SVG,Canvas,VML介简介

    说到绘图、报表之类的技术,大家首先想到的就是Flex,当然也有许多了解javaapplet,对于这两种技术来说,各有利弊。 首先Flex很笨重,但是其效果实在让人喜欢。对于javaapplet来说,至少我在网络上很少看到,当然...

    在网页中利用VML画图

    **在网页中利用VML画图** ...然而,随着现代浏览器的广泛使用,开发者更倾向于使用SVG或Canvas等更先进、更兼容的解决方案。在实际项目中,应根据目标用户群体和兼容性需求来选择合适的图形绘制技术。

    vml柱状图 vml html jquery

    VML是Microsoft提出的一种标准,但随着现代浏览器对SVG和Canvas的支持增强,VML的使用逐渐减少。 在"vml柱状图 vml html jquery"这个主题中,我们主要关注如何使用VML在HTML页面上创建柱状图表,并结合jQuery库来...

    vml.rar_VML

    VML,全称为Vector Markup Language,是一种用于在网页上描绘矢量图形的XML语言。它在HTML中提供了创建和展示矢量图形的能力,特别是在...同时,这也提供了一个机会去比较和学习现代的图形解决方案,如SVG和Canvas。

    vml 极道教程 详细的vml教程

    虽然Flash现在已被HTML5的Canvas和SVG取代,但在过去,Flash是创建互动式多媒体内容的主流工具。Flash VML可能是为了在Flash中利用VML的矢量图形能力,或者在VML中模拟Flash的一些特性,如视频播放和动画。 在"vml...

    vml资料(资料+例子供大家参考)

    VML在20世纪90年代末由微软公司开发,作为Internet Explorer浏览器的一种扩展,以对抗当时Netscape Navigator支持的SVG(Scalable Vector Graphics)标准。 尽管VML在早期为IE浏览器提供了矢量图形支持,但它并不是...

    HTML5 CanvasAPI

    在Canvas元素出现之前,开发人员若要在浏览器中进行绘图,只能依赖于Adobe的Flash插件、SVG和IE支持的VML等技术。这些技术要么需要额外插件,要么只限于特定浏览器,都不如Canvas API来得通用和便捷。HTML5的Canvas...

    asp.net+vml流程图代码

    3. **SVG与VML的比较**:SVG是矢量图形的标准,支持更多的图形特性,如渐变、滤镜和动画,而且跨浏览器兼容性更好。如果需要更广泛的兼容性和更丰富的图形效果,可以考虑将现有的VML代码迁移到SVG。 4. **第三方库*...

    vml+javascript直接在浏览器中绘制动态曲线图实例(源码-+Think+in+vml++vml+极道教程)

    总的来说,这个实例为我们展示了在不支持SVG或Canvas的旧版浏览器中,如何使用VML和JavaScript实现动态曲线图的绘制。虽然现在大多数现代浏览器都支持SVG和Canvas,但在兼容性要求较高的场景下,VML仍然是一个值得...

    让IE兼容 HTML5的canvas标签

    它通过VML(Vector Markup Language)来模拟canvas的功能,因为VML是IE浏览器内建的一种矢量图形渲染机制。在页面中引入excanvas.js后,即使在不支持canvas的IE浏览器中,开发者也能利用canvas API进行图形绘制。 ...

    js 封装VML的饼图,柱状图,折线图

    在IT行业中,JavaScript是...同时,随着HTML5的普及,现代浏览器对Canvas和SVG的支持越来越强,使用这些技术进行图形绘制已经成为主流。然而,对于仍然需要支持旧版IE的项目,理解JavaScript和VML的结合仍然是必要的。

    经典VML绘画源代码(基本包括所有图形的VML绘制)

    由于VML主要用于较旧的IE浏览器,现在更多的开发者转向使用SVG(Scalable Vector Graphics)或Canvas进行图形渲染,因为它们具有更好的跨浏览器兼容性和更多的功能。然而,对于理解图形绘制原理和历史,VML仍然是一...

    利用VML实现动态关系图

    然而,对于新项目,推荐使用SVG或canvas,它们有更好的浏览器支持,功能更强大,并且有丰富的库和工具可供选择,如D3.js用于数据可视化。 **六、总结** 了解和掌握VML可以帮助我们解决特定的历史遗留问题,尤其是...

    vml 签名

    VML(Vector Markup Language)是一...通过以上方式,VML和JavaScript的结合可以提供一种灵活且互动的电子签名解决方案,尽管现代Web开发更倾向于使用HTML5的Canvas和SVG技术,但在某些特定场景下,VML仍然有其适用性。

Global site tag (gtag.js) - Google Analytics