SVG

一、SVG技术背景

随着网络上信息数据的大量涌现，如何正确显示和出版是有效传输、接收和利用它们的基础。图形、图像是信息数据可视化的主要方式。但现有的图形、图像格式存在着缺陷：非开放式，显示和印刷质量及适应性差，难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等。SVG正是在这样的背景下诞生的。

 

SVG(Scalable Vector Graphics，可伸缩性矢量图形)是由万维网联盟(W3C)推出的基于XML编码的开放式图形、图像标准。它虽然是一种二维矢量图形格式，但其中可以包含矢量图形、光栅图像及文本等。这种新的图形格式不但拥有Web矢量图形的固有特性，更是结合了XML及其相关技术的所有优越性能。

W3C的开源SVG已成为全球图形技术的发展潮流，它将引领我们走向下一代互联网，我们需要了解、学习并掌握这种图形革新技术。

在 2003 年1月，SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有：Adobe、苹果、Auto Desk、Bit Flash、Corel、惠普、IBM、ILOG、INSO、Macromedia、微软、Netscape、OASIS、Open Text、Quark、RAL(CCLRC)、Sun、Visio、施乐等，所以SVG不是一个私有格式，而是一个开放的标准。也就是说，它并不属于任何个体的专利，而是一个通过协作、共同开发的工业标准。正是因为这点，才使得SVG能够得到更迅速的开发和应用。

与其他图像格式相比，使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本），支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果，易于修改和编辑。
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG可以方便的建立文字索引，从而实现基于内容的图像搜索，图像中的文本是可选的，同时也是可搜索的（很适合制作地图）。
SVG 可与现有技术可以互动融合。例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入JavaScript（严格的说应该是ECMA Script)脚本来控制SVG对象，还可以与 Java 技术一起运行。
SVG 文件是纯粹的 XML。为了保证网络图像能够顺利地和目前已经由W3C开发的 D0M1，DOM2，CSS，XML，X Pointer，XSLT，XSL，SMIL，HTML，XHTML技术，以及其他标准化技术，如 ICC，URI，UNICODE，RGB，ECMA Script/JavaScript，Java协调一致，SVG是完全基于x M L(Extensible Markup Language可扩展置标语言)，并能和上述各项技术相融会的新一代的网络图像格式。SVG并非仅仅是一种图像格式，由于它是一种基于XML的语言，也就意味着它继承了XML的跨平台X和可扩展X，从而在图形可重用X上迈出了一大步。如SVG可以内嵌于其他的XML文档中，而SVG文档中也可以嵌入其他的XML内容，各个不同的SVG图形可以方便地组合，构成新的SVG图形。
SVG 图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户

可以说，SVG的出现带来了一次技术革命。利用SVG能够创建更加丰富多彩的信息可视化和交互性的应用，尤其是可以创建具有动态的、数据驱动的、交互式图形、图像。另外，由于是纯文本格式的．SVG比传统的图形、图像格式如GIF和JPEG占用更少的空间。因此，SVG更加适合有线带宽，并可提高下载速度。SVG和XML的开放式标准特性使其成为国际性语言。SVG标准得到了IBM、Adobe、Microsoft、Corel等几十家大公司的支持，其最新的版本是SVG 1.2。

总之，SVG技术的出现，变革了在Web上图文传递信息的方式，并将产生一种更适于Web信息发布的工作流模式，其中包括Web信息显示和印刷出版的组织方式。

二、SVG要素

2.1 SVG的图形对象使用XML，可以很方便地建立模型。对文本格式的语法来说，模型通常是建立在段落级和短语级，而不是在独立的名词、副词或者是音素上。SVG是在图形对象级建立图像模型而不是独立的许多点。

SVG提供了一个通用的path元素，可以用来创建各种类型的图形对象，但同时也提供了一些基本的形状元素如矩形和椭圆等，这些基本形状对编写代码是非常方便的，也可以应用在复杂的路径描绘中。SVG提供对坐标系统的精确控制，图像对象的定义和变换都是在这个坐标系统之中。

2.2 SVG的符号SVG也能够提供一些像电子、绘画和流程图等使用的标准符号，但目前的版本并没有提供这些。

SVG允许用户创建和共享他们的符号库，设计者能够清楚地知道他们使用的符号的外在表现，而不必担心那些不支持的符号。符号也可以以不同的尺寸和角度使用，也可以为了达到与其他的图形对象相互组合而进行重新定义样式。

2.3 SVG的展现效果许多Web中使用的图像都是依靠图形工具包来创建模糊、阴影、光线等效果的，要在客户端展现这些效果是不可思议的。

SVG可以单独地或以组合的方式对滤镜效果进行描述，这些效果可以用在客户端，当SVG图像展现的时候展现这些效果，而图像仍可以以图像的分辨率的进行缩放和显示。
2.4 SVG的文字丰富的图形效果有时候会在很大程度上依赖于所使用的特定的文字和文字间距。

大多数情况下，图像设计者为了防止图像上的被别人替换，往往会把文字转换成图像，原来的文字也就变成了不可搜索和访问的了。SVG的标准制定者在听取了设计者们的意见后，在SVG中保留了文字元素，这样，文字和图像都被分别进行展现。

2.5 SVG的动画动画可以通过脚本语言操纵文档中元素来实现，但脚本的编辑和交换通常很麻烦。SVG和SYMM工作组经过集思广益，共同在SVG中定义了动画元素，这样，在网页图形中常用的动画效果就可以在SVG中使用。

2.6 SVG的DOM

SVG DOM基于DOM规范。DOM是访问和维护XML文档的应用程序接口。它定义了文档的逻辑结构以及存取和维护文档的方法。在DOM的详细说明中，“文档” 指的是广泛意义的文档。现在XML可以把这样的数据表示为文档，并由DOM管理。利用DOM可以建立文档，遍历文档结构，还能增加、删除、修改文档元素和内容。SVG DOM遵循DOM1、DOM2规范的大部分内容，而且完全支持DOM2 Core规范，因此，SVG中的每个属性和样式都可以通过脚本编程来访问；另外，SVG也提供了一套扩展的DOM接口，通过脚本编程实现动画效果的手段更方便快捷。脚本语言中的定时器可以很好地触发和控制图像的运动。