SVG矢量图技术

一、SVG概述:

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

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

二、SVG的特点：

1.SVG是一种矢量图像

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

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

2.SVG是基于xml创建的

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

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

3.SVG支持矢量滤镜

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

4.SVG沿用的是文本格式

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

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

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

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

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

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

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

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

(4)SVG跨平台作业

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

(5)可二次编辑性

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

三、SVG的应用

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

SVG是网络中解决矢量图像的工业标准。作为w3c的推荐格式，SVG与现有的其他开放标准有很好的兼容性。这些标准包括dom1，dom2，css，xml，xsl，smil，html，xhtml等。相比较目前现有的网络图像格式如gif，jpeg，SWF等，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还没有得到浏览器的支持，用户还需下载专门的插件才能浏览。