SVG矢量图技术

一、SVG 概述:

 

SVG (Scalable Vector Graphics, 可伸缩矢量图形) 是W<chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C" w:st="on">3C</chmetcnv> 推出的一种开放标准的文本式矢量图形描述语言, 他是基于XML 的、专门为网络而设计的图像格式。SVG 是一种采用XML 来描述二维图形的语言, SVG 图形可以是动态的、可交互性的, 使用SVG 可以在网页上显示出各种各样的高质量的矢量图形。　　

 

今后的网络上将会有更多标准格式的图形文件存在：GIF,JPEG,PNG,SVG..... 之所以这么说，是因为SVG 标准是由众多厂商和W<chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C" w:st="on">3C</chmetcnv> 共同制定的，目的就是为了要在网络上创建一种新的、大家认同的、可扩展的、开放的图形格式。

二、SVG 的特点：

 

1.SVG 是一种矢量图像

 

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

 

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

 

2.SVG 是基于xml 创建的

 

xml 是w<chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C" w:st="on">3c</chmetcnv> 制定的网络开发语言，它的功能远远超过现行的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 是网络中解决矢量图像的工业标准。作为w<chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C" w:st="on">3c</chmetcnv> 的推荐格式，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 还没有得到浏览器的支持，用户还需下载专门的插件才能浏览。