SVG矢量图技术

最新推荐文章于 2024-05-10 12:42:21 发布

Erik明

最新推荐文章于 2024-05-10 12:42:21 发布

阅读量500

点赞数

分类专栏： Multimedia 文章标签：网络应用搜索引擎 XML 数据结构 Flash

Multimedia 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了SVG（可伸缩矢量图形）的基本概念及其特点，包括SVG作为一种矢量图像的优势、基于XML创建的特性、支持矢量滤镜的能力、文本格式的沿用等。此外，还探讨了SVG在网络发展、数据表格、图像地图、无线设备等方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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 发布 》等。