现在的位置: 首页 > 综合 > 正文

SVG矢量图技术

2013年03月01日 ⁄ 综合 ⁄ 共 2785字 ⁄ 字号 评论关闭

一、SVG概述:

SVG (Scalable Vector Graphics, 可伸缩矢量图形) W3C推出的一种开放标准的文本式矢量图形描述语言,他是基于XML 的、专门为网络而设计的图像格式。SVG是一种采用XML 来描述二维图形的语言, SVG 图形可以是动态的、可交互性的, 使用SVG 可以在网页上显示出各种各样的高质量的矢量图形。  

今后的网络上将会有更多标准格式的图形文件存在:GIF,JPEG,PNG,SVG.....之所以这么说,是因为SVG标准是由众多厂商和W3C共同制定的,目的就是为了要在网络上创建一种新的、大家认同的、可扩展的、开放的图形格式。

二、SVG的特点:

1.SVG是一种矢量图像

矢量图像利用点和线等矢量化的数据描述图像,并在图形中包含色彩和位置信息。其最大的优点就是图像的任意缩放对分辨率没有影响,或者说,在矢量图中分辨率的概念是模糊的。并且,矢量图在显示和输出等过程中,与设备的分辨率没有关系。

SVG作为矢量图像格式,除具有矢量图的优势外,对位图图像也能加以正确表达。

2.SVG是基于xml创建的

xmlw3c制定的网络开发语言,它的功能远远超过现行的html语言。xml语言具有比html语言更好的管理和交互功能。xml将网站的内容和框架完全分离,通过定义结构数据类型,网站用户能够自主的利用客户端程序显示和处理数据,具备很好的扩展能力。

SVG的语法和结构基于xml,因此同样具备很好的扩展性。

3.SVG支持矢量滤镜

比较矢量图像和位图图像,可以发现位图图像能够使用大量的滤镜效果、纹理贴图和空间幻影等特效以加强图像的视觉效果。这是位图图像为广大设计师所采纳的重要原因之一。随着SVG矢量图像格式的出现,这种局面发生了变化,利用SVG支持的矢量滤镜,可以创作出各种滤镜效果,并且更重要的这些滤镜效果在出现后是可调整的。分析中可以发现SVG所使用矢量滤镜并不直接针对像素进行操作,而是作为对象的一个独立属性存在于文本中。对图像效果的修改仅仅是调整图像的这一属性。SVG对矢量滤镜的支持为远程协作和再次开发提供了空间。

4.SVG沿用的是文本格式

SVG文件格式是文本的。SVG图像和动画具有以下文本格式所具备的特点:

(1)SVG图像中的文字也是文本格式

这一特征完全区别与目前图像和动画中的“文字”,准确地讲,目前图像和动画中的文字实质上都是图像。根据这一特征,SVG中的文字可以作为关键词被网络搜索引擎所搜寻,并可藉此制作非常高效的图像搜索引擎。用户通过搜索SVG图像所提供的关键词能够搜寻到相关SVG图像。

(2)SVG图像可由程序语言动态生成

例如可以利用JavaScriptPerljava等程序语言开发出动画生成系统等。这一特性对于数据库制表是非常有用的,在线SVG图像可根据数据库中关系量实时地进行动态改变。

(3)SVG完全支持DOM(文档对象模型)

DOM(Document Object Model,文档对象模型)是一种文档平台,她把文档看成是由一系列元素组成的节点树,允许程序或脚本动态的存储或上传文件的内容、结构或样式。

利用为SVG定义的DOM,通过脚本语句可以很方便的做出SVG动画。SVG以及SVG中的对象可以通过脚本语言接受外部事件的驱动,例如鼠标动作(OnClick)、键盘动作等实现对自身或对其他物件、图形的控制,制作交互式的图像和动画。

(4)SVG跨平台作业

因为SVG图像是纯文本格式,因此不受操作平台的限制,并可以很好的解决相关的外部输出、色彩模式、网络带宽等一系列问题。

(5)可二次编辑性

跟同为矢量图像的flash格式相比,此点表现得尤为突出。SWFflash的输出文件格式,作为最终的动画生成格式,其创作过程封装在SWF中,无法进行二次编辑,flash一旦输出成SWF文件就无法修改了,除非你拥有原始的fla文件。这一点虽说在知识产权保护方面很有意义,但对于资源的更新和利用就显得不方便了。对于SVG来说,因为它是一种文本格式,具有与html类似的结构和语法,只需利用记事本就可打开并进行编辑。

三、SVG的应用

(1)网络发展的需要,与其它开放标准兼容

SVG是网络中解决矢量图像的工业标准。作为w3c的推荐格式,SVG与现有的其他开放标准有很好的兼容性。这些标准包括dom1dom2cssxmlxslsmilhtmlxhtml等。相比较目前现有的网络图像格式如gifjpegSWF等,SVG更适合网络发展的需求,开发和应用SVG意味着获得一个更优秀的工具和方法。

(2)数据表格,图像地图

在应用领域,SVG可以非常适宜的应用在数据表格和图像地图中。在SVG的源文件中,通过变量可以很方便的控制需要的图形生成。这就为网络图形数据表格提供了很大的应用前景。

制作图形地图同样是SVG的一大优势。由于SVG是矢量格式,图像可以在任何显示分辨率下获得同样的图像效果,文件放大观看是也不会有任何的品质损失,因而完全可以制作出包含地理信息和文字信息的图像地图,而且还能具有交互性和搜索功能。

(3)无线设备的需求

SVG另一个非常诱人的应用前景就是开法设备的图形和动画。利用SVG,只要在无线设备中安装一个文本解析器,就可以实现对SVG文件的识别和显示;同时,因为是矢量的文本文件,文件的大小不会很大,非常适合无线产品的网络传输。SVG还提供动画和多媒体编辑功能,所以可以支持二维的平面动画,支持声音文件和视频文件的播放。结合一些其他技术(smil),就可以实现创建一个非常理想的多媒体无线终端解决方案。

(4)图像搜索引擎

SVG图像中,信息是文本形式的,是开放形式的。文字独立于图形信息,这就为图像搜索和查询提供了可能。例如,在一个SVG动画中,通过搜索某一个关键字,就可以在图像中查询到对应的信息。而这对于同样是矢量图像和动画格式的SWF就不可能实现。依据SVG的这种交互性,可以创建大型的图像搜索引擎。

(5)可实现图形的web发布

因为SVG具有许多适于网络应用的功能特点,比如说开放性、可二次编辑性和良好的压缩质量,非常适于二维矢量图形文件的web发布,成为研究的热点。比如《基于SVG的甲骨文网络平台的设计与实现》、《SVG与建筑设计图的web 发布》等。

(6)动态生成图形

在服务器端, 从数据库中抽取更新的数据, 转换成XML 文档, 利用DOM对文档进行解析, 形成SVG文件。客户端浏览器利用SVG插件实现对图像的浏览。比如《基于SVG的图像信息实时发布模式》、《基于XML - SVG的图像动态更新与动画演播系统实现》等。

四、总结

SVG作为xml的一种词汇表,具有xml的许多优点,如良好的数据存储格式,可扩展性,高度结构化,便于网络传输等,具有无限的前途。但介于目前SVG还没有得到浏览器的支持,用户还需下载专门的插件才能浏览。
 

抱歉!评论已关闭.