SVG介绍

来源：互联网发布：深圳中小担保集团知乎编辑：程序博客网时间：2024/05/20 18:47

技术

SVG(Scalable Vector Graphics) 是互联网联盟(W3C)公布推荐的一种基于XML的二维图形描述语言标准，主要面向网络应用，目的在于满足Web应用日益增长的对动态、可缩放和平台无关地展现复杂内容并实现灵活交互的需求，具有强大的可重用性和伸缩性。它是一种既能表现丰富的图形内容，又能跨平台使用，兼容流行的技术标准规范，还可以控制文件大小，便于网络传播，并能使网络中使用的各种显示打印设备都能正确一致处理的新一代图形格式。

特点

XML是公认拥有无穷生命力的下一代网络标记语言。与HTML一样，XML也源自一种比较早的通用标记语言SGML(Standard Generalize Markup Language)，它拥有HTML语言所缺乏的伸缩性与灵活性。XML与HTML的一成不变的格式不一样的是，它实际上是一直定义语言，即使用者可以定义无穷无尽的标记来描述文件中的任何数据元素，从而突破HTML固定标记集的约束，使文件内容更丰富、更复杂、更容易组成一个完整的信息体系。

SVG文本遵循XML名字空间使用规范，因此SVG中的文字可以作为其本身描述图像的关键字通过搜索引擎进行查询。

矢量图像由线框和填充物等组成，它由计算机根据矢量数据进行计算，然后绘制而成。矢量图形相对于位图有以下特点：文件大小与图形的复杂程度有关，而与图形的具体尺寸无关；图形的显示尺寸可以无极缩放，变化后不影响图形的质量。所以在图形复杂程度不大的情况下，矢量图形具有文件小、可无极缩放的有点。

SVG最奇妙之处在于它是一种文本格式的图像。也就是说，可以不用任何图像处理工具，仅仅用记事本就可以生成一个SVG图像，这是因为矢量图像一般是以算法指令来描述的。下面一段SVG代码是用来显示一个圆心为 (50,80)、半径为10个象素、用红色填充的实心圆。

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

</svg>

SVG可升级的特性不仅仅表现在再次修改方面，还表现在其它很多地方，包括这里介绍的灵活的文件格式。在以前的图像中，文本是作为位图保存于图像中，图像形成以后不能单独对文本进行修改；在PNG格式中这一点有所改进，文本可作为一个独立的层存在。SVG则更灵活地扩展了图像的文件格式，它由三个部分组成：矢量图形、文字和点阵图像。这样，SVG不仅仅可以应用矢量图形和文字对象，同样可以引入点阵图像而制作出任何其它格式图像所能达到的效果。由于文件格式是文本形成的，因此可以很容易地在以后任何时候进行修改。而且在页面的运行过程中，也可以对很多部分做即时的修改，并且其中的图像描述还可以重复使用。

图片和交互在以前是两个分开的概念，SVG的出现突破了这个限制，它支持SMIL(Synchronized Multimedia Integration Language，同步多媒体集成语言)，使得在图片内进行交互成为可能。SVG可以通过使用脚本语言来完成比较复杂的应用，脚本语言调用SVG对象模型(SVG Document Object Model)来访问或控制所有的元素、属性和属性值。如：鼠标单击或双击事件、键盘输入等事件。

有过DHTML（动态HTML）使用经验的用户都知道，在DHTML中可使用用户系统没有的字体，该字体在用户浏览需要时，可通过Web即时下载。这对于英文系统来说是可以理解的，因为英文字体的文件大小一般在几十KB左右。而对于中文系统来说，这种方法不可取，因为任何一种字体的文件大小都在2MB或3MB以上，用户不可能为了观看几个汉字而浪费大量的时间和精力。

SVG采用了一种科学的方法来解决动态字体的问题，它内嵌了图像中所有出现的文字字型数据，用户不需下载所有字体文件，这对于中文用户来说是相当便利的。

2.2 SVG的基础——XML

XML即为可扩展的标记语言（eXtensible Markup Language）。XML是一套定义语义标记的规则，这些标记将文档分成许多部件并对这些部件加以标识。

的产生

XML有两个先驱——SGML和HTML，这两个语言都是非常成功的标记语言，SGML的全称是标准通用化标记语言，它从80年代初开始使用。正如XML一样，SGML也可用于创建成千上万的标记语言，它为语法置标提供了异常强大的工具，同时具有极好的扩展性，因此在分类和索引数据中非常有用。目前，SGML多用于科技文献和政府办公文件中。但SGML非常复杂，其复杂程度对于网络上的日常应用简直不可思议。不仅如此，SGML非常昂贵。相对而言，HTML免费、简单，而且获得了更广泛的支持。它是一个非常简单的SGML语言，可以方便普通人的使用。1996年人们开始致力于描述一个置标语言，它既具有SGML的强大功能和可扩展性，同时又具有HTML的简单性，于是1998年2月W3C建立了XML的1.0版本。

的优点

1) XML允许各种不同的专业（如音乐、化学、数学等）开发与自己的特定领域有关的标记语言。这就使得该领域中的人们可以交换笔记、数据和信息，而不用担心接收端的人是否有特定的软件来创建数据。

2) XML具有较好的保值性。过去40年来的大多数计算机数据都丢失了，不是因为自然损害或是备份介质的磨损，而只是因为没有人来写出如何读取这些数据介质和格式的文档。以不常用的格式保存的二进制数据，数据也许会永远地消失了。XML在基本水平上使用的是非常简单的数据格式。可以用100％的纯ASCII文本来书写，也可以用几种其他定义好的格式来书写。ASCII文本是几乎不会"磨损"的。

3) 应用间交换数据。由于XML是非专有的并易于阅读和编写，就使得它成为在不同的应用间交换数据的理想格式。XML使用的是非专有的格式，不受版权、专利、商业秘密或是其他种类的知识产权的限制。XML的功能是非常强大的，同时对于人类或是计算机程序来说，都容易阅读和编写，因而成为交换语言的首选。

4) 数据存储能力。XML文件有超强的数据存储能力，几乎所有的数据库厂商都意识到了XML的重要性，也几乎所有厂商,包括Oracle和微软，都在去年为自己的关系型数据库加上了对XML数据的支持。

2.2.3 XML

标记有三类意义：结构、语义和样式。结构将文档分成元素树。语义将单个的元素与外部的实际事物联系起来，而样式指定如何显示元素。

结构只是表达文档的形式，而不管单个标记和元素间的差别。它们都指定文档具有一个非空的基本元素，标记的不同名称没有结构上的意义。语义的意义存在于文档之外，在作者的心中或是读者或是某些生成或读取这些文件的计算机程序中。例如，理解HTML但不理解XML的Web浏览器，可能会将段落的意义赋给<P>和</P>标记。讲英语的人可能会比<FOO>和</FOO>或<P>或</P>更容易理解<GREETING>和</GREETING>或是 <DOCUMENT>和</DOCUMENT>的意义。

可以与标记相联系的第三类意义是样式意义。样式意义指定标记的内容如何在计算机屏幕上或是其他输出设备上展示。样式意义说明特定的元素是否是用粗体、斜体、绿色的24磅的字体还是其他字体加以表示。计算机在理解样式时比理解语义意义要好一些。在XML中，样式意义是通过样式单来施加的。

2.2.4 XML

XML文件包括三部分：XML声明、处理指示（可选）、XML元素。XML文档的一个基本要求是形式良好的(well formed)，一个形式良好的XML文档要包含这三个部分。

为了使一个文档"形式良好"，XML文档中的所有置标和字符数据必须遵守前几节中给出的规则。而且有几条关于如何把置标和字符数据相互联系起来的规则。这些规则总结如下：

1) 文档的开始必须是XML声明；

2) 含有数据的元素必须有起始标记和结束标记；

3) 不含数据并且仅使用一个标记的元素必须以/>结束；

4) 文档只能包含一个能够包含全部其他元素的元素；

5) 元素只能嵌套不能重叠；

6) 属性值必须加引号；

7) 字符<和&只能用于起始标记和实体引用；

8) 出现的实体引用只有&、<、>、'和"。

的绘图元素

SVG文档需要遵循一些简单的规则才能成为有效的文档。SVG文档有其自己的描述结构[7]，SVG绘画结构如图2_1：

图2_1

同时SVG本身也定义了一套图元元素，即组成一个完整SVG文档的基本元素。SVG基本元素关系如图2_2：

图2_2

这些元素表示类似形状和线条这样的对象。最基本的要求是，SVG文档必须以<svg>元素开始。SVG文档也可以指定为文档片段，也就是说，一个SVG文档可以嵌入在另一个XML文档内。但是通常将SVG文档指定为单独的文档，其扩展名一般为‘*.svg’或‘*.svgz’。

SVG有六种基本形状：矩形（包括圆角矩形）、圆形、椭圆、线段、折线、多边形。从数学上来讲，这些元素与<path>路径元素（下一小节介绍）所描述的形状在本质上是一样的，即这些形状也是路径的特例，因此一些SVG制作工具所制成的SVG文档，其各种线条都使用<path>元素来描述。凡是可以作用于路径上的样式，如填充/描边等,同样可以作用于基本形状上。

表2.1 列出了SVG定义的常见规则形状的元素和属性。其中style属性指定元素样式，如填充色和边框颜色。该属性是可选的。

表2.1

形状

元素

常用属性

说明

矩形

rect

width、height、x、y、style

width为高，height为宽，x、y为矩阵左上角的坐标

直线

line

x1、y1、x2、y2、style

(x1,y1)为直线起点坐标，(x2,y2)为直线的终点坐标

圆形

circle

cx、cy、r、style

(cx,cy)为圆心坐标，r为圆半径

椭圆

ellipse

cx、cy、rx、ry、style

(cx,cy)为椭圆中心坐标，rx为x轴半径，ry为y轴半径

折线

polyline

points、style

points如polygon中的points，要填充时折线必须闭合

多边形

polygon

points、style

points按画线顺序依次列出多边形各顶点坐标

SVG规范定义了<path>元素逐点画出不规则形状的轮廓。使用<path> 不仅可以画出以上规则图形，还能画出任意的二维曲线。<path>元素在它的d属性上指定一套指令，由这些指令来表示要画的路径。这些指令的形式都是一个字符后跟一个数值。

M和m移动；L和l画线；H和h画一条水平线；V和v画一条垂直线；A和a画一条弧线；C和c画一条三次贝塞尔曲线；S和s画一条平滑的贝塞尔曲线；Q和q画一条二次贝塞尔曲线；T和t画一条平滑的二次贝塞尔曲线；Z和z关闭路径。大写字母使用的点坐标是绝对地址，小写字母使用的点坐标是相对画笔当前位置的正负偏移量。下面便是使用曲线指令画线的例子。

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

</svg>

第五行代码的路径形成一个等腰三角形,其中M 指令设置起点(0,200)，L 指令表示画直线，经过的点依次为(100,0)、(200 ,200)，最后用z指令闭合路径。第六行代码画一个贝塞尔三次曲线，其中M指令设置起点(100 ,200)，C指令定义曲线的起点为(100，100)，定义了两个控制点(250，100)和(250，200) 。Style属性指定不填充曲线，线条颜色为黑色。

文字历来是网络图像中的主角，SVG与传统的点阵图不同，可以嵌入由图像效果的纯文本。这种文本有许多有点：它可以按照不同国家的书写习惯进行定义，可以方便地实现从上到下，从右到左的编排，文本内容可选择、复制、粘贴，结合SVG的交互性还可以实现对文字内容、样式的动态修改，同时文字的内容可作为图像的主题被搜索引擎收录。这些强调优势都是其它图片格式所不具备的。表2.2列出了常用文字处理元素的信息。

表2.2

形状

元素

常用属性

说明

规则文字

text

x、y

(x,y)为文字左下角坐标，

非规则文字

tspan

x、y、dx、dy、rotate

tspan嵌入text元素中使用，(x,y)为文字左下角坐标，(dx,dy)为相对于前一个文字的相当位移，rotate为字符的旋转角度。

下面演示如何使用文字元素：

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

COMMUNICATION

</text>

COMMUNICATION

</tspan>

COMMUNICATION

</tspan>

COMMNUNICATION

</tspan>

</text>

</svg>

显示的图形如图2_3：

图2_3

在第五行可以看出我们使用Arial的粗体字体，文字大小40pi，文字用红色填充。在9～21行我们使用text和tspan元素共同完成三行文字显示，这里使用Arial的粗体字体，文字大小40pi，文字使用黑色填充。11～13行使用设定要显示文字的绝对坐标功能，14～17行使用设置要显示文字的相对坐标功能，18～20行使用旋转功能。

超链接元素

超级连接本来不是图形处理领域中的一部分，可在网路上尤其是在WWW世界中，超级链接对于图像却是必不可少的。在HTML网页中，图像和连接是分离的，图像作为外部文件而存在，链接则在HTML中说明，这样虽然有灵活和可重用的优点，却不易管理。而Flash的SWF矢量格式则相反，图像中内嵌链接，两者成为一个整体，虽然方便，但可重用性却没有了。SVG则综合了两者的优点，其超级链接是以明文的形式嵌于文档内部的，形式上是个整体，也有利于修改。

SVG中提供一个类似HTML中超级链接元素<a>，在SVG中包含在<a>元素内部的子元素都作为超级链接的载体。下面简单的例子显示<a>如何使用：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<desc>超级链接示例</desc>

华北电力大学

</text>

</a>

</svg>

显示的图形如图2_4：

图2_4

在该示例中，无论点击图中椭圆、四边形还是文字都可以进入华北电力大学的网站。

动画制作元素

SVG具有五种内置的动画类型，本文介绍其中两种，一种是通过时间定义属性的值，另一种是在一个路径上移动一个对象元素。SVG规范分别定义了<animate>元素和<animateMotion>元素来实现这两种动画。

2.3.5.1 <animate>元素

<animate>元素的工作方式是在声明的一段时间内将指定的特性从一个值变化为另一个值。下面的代码使圆的半径在5秒内从1px变为50px。

<?xml version="1.0” encoding=“iso-8859-1”?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

</circle>

</svg>

第二行代码画了一个圆。第三行代码产生了动画，其中attributeName属性指明动画的特性是半径r，dur属性定义了动画的时间(5秒)，repeatCount属性定义了动画重复移动的次数，indefinite表示动画无休止重复。可以在一个SVG 对象上组合多个<animate>元素，以产生特殊效果。如在第三行代码后插入如下代码:

在该示例中，定义的圆从左边向右边移动，并在滚动的过程中不断变大。

2.3.5.2 <animateMotion> 元素

<animateMotion>的用途是沿一条路径移动一个对象，这条路径可以是直线，也可以是曲线。下面的例子是一个矩形沿一条曲线边移动边旋转的动画。

<?xml version=“1.0” encoding=“iso-8859-1”?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

< / rect >

< / svg >

第二行代码画了一个矩形。第三、第四行代码规定了该矩形移动的速度和轨迹。其中path 属性定义了矩形的移动轨迹，rotate属性定义了矩形的旋转角度，auto表示自动旋转，如果您希望SVG元素在整个运动路径中旋转45度，那么可以使用rotate=“45”。

通常在SVG图像的构建过程中，会遇到部分重用或者不便于在图形主体内定义的情况。在这种情况下，可以使用组合功能将多个对象组合在一起，通过给这些组合指定以后可在图像主体中调用的标识来创建它们，这样也可以为动画和效果提供引用对象。整个定义好的集合可以作为一个实体进行移动、定位、样式化和复制等。在SVG规范中定义了<g>和<defs>两个元素用于实现组合。

下面就是一个使用组合的简单示例：

<?xml version=“1.0” encoding=“iso-8859-1”?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<defs>

</g>

</defs>

</svg>

示例包含了一个内含两个圆形的组合，这个组合定义在</defs>元素内。SVG规范使用<g>元素组合对象，并用id属性定义该组合的标识。<use>元素用来引用这个组合，具体方法是将<use>元素的href属性设置为该组合的本地统一资源标识符即URI。

组合并引用元素的能力在SVG文档中非常重要，一旦将图形进行了组合，除非在文档中其他地方引用该组合，否则将不会绘制这个组合。正是这一特点，SVG可以制作出丰富多彩的图形，如颜色的渐变、坐标系统的转换等。

使用SVG可以在网页上显示出各种各样的高质量的矢量图形，包括许多图像处理中常见的功能，如图形、文字、动画、色彩、滤镜效果等。最关键的是，SVG完全用普通文本来描述，也就是说，这是一种专门为网络而设计的基于文本的图像格式。由于SVG基于XML ，所以可扩展性很强，能够描述任意复杂的图像。

脚本编程

SVG作为一种适用于网络的图像格式，不仅仅在于它的体积小、易修改、可缩放等与普通矢量图形一样的优点，还在于它添加有针对网络的交互功能。SVG图像可以内嵌交互定义，不需要使用外部语言（并非不能）。单独的一个SVG文件和一个客户端的SVG解释器便可完成网页中链接、动画、交互等大部分功能，还可以内嵌脚本语言以达到更为复杂的交互效果。

脚步语言的程序字段不属于合法的XML语句之列，所以需要使用XML的实体嵌入的方式，其一般的格式是：

<![CDATA[

]]>

</script>

其中，Type="content-type" 用MIME的方式指明所用的Script语言的类型。Xlink:href="<uri>" 指明一个引用外部脚步文件的URL。这样，脚本就可以不包含在SVG文档内部，有利于脚步的重复使用。

SVG中大多数元素（尤其是可视化元素）都支持事件。事件的定义是作为元素的一个属性出现的，属性值是事件处理的脚步程序段，一般都是一个子程序或函数。

² 对于一般的可视化元素（如形状、文字、路径等），其事件属性如下：

onfocusin="some_dunction(evtarg); "该事件属性在该元素得到输入焦点时发生，如一段SVG图像中的文字被选中时就触发该事件。

onfocuout="some_function(etarg); "该事件属性在该元素失去输入焦点时发生，如文本取消选择时。

onactivate="some_function(etarg); "该事件属性元素被激活时发生。

onclick="some_function(etarg); "该事件元素被鼠标单击时发生。

onmousedown="some_function(etarg); "该事件在元素上鼠标按键按下时发生。

onmouseup="some_function(etarg); "该事件在元素上鼠标按键松开时发生。当鼠标在一个元素上单击的时候，三个事件的发生顺序为onmousedown、onmouseup、onclick。

onmousemove="some_function(evtarg); "该事件属性当鼠标进入元素区域的一瞬间发生。

onmouseout="some_function(evtarg); "该事件属性当鼠标离开元素区域的一瞬间发生。

² 对于文档一级的元素（如<svg>元素），其事件属性如下：

onload="some_function(evtarg); "该事件属性在文档被加载时发生。

onunload="some_function(evtarg); "该事件属性在文档被撤除时发生。

onabort="some_function(evtarg); "该事件属性在文档停止加载时发生。

onerror="some_funciton(evtarg); "该事件属性在一个元素或脚本出错的时候发生。

onresize="some_function(evtarg); "该事件属性在文档大小改变时发生。

onscroll="some_function(evtarg); "该事件属性在文档的显示区域发生滚动动作时发生。

onzoom="some_function(evtarg); "该事件属性在文档被用户放大缩小的时候发生。

² 对于实现动画的元素，其事件属性如下：

onbegin="some_funciton(evtarg); "该事件属性在动画元素开始播放时发生。

onend="some_function(evtarg); "该事件属性在动画元素播放结束时发生。

该例有两个文件组成，两个文件在同一文件夹中。

SVG文件如下：

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

</g>

<rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16"

style= "visibility: hidden"/>

</g>

</svg>

在SVG文件中要引用的tool_tip.js文件如下：

var svgdoc,svgroot,ttrelem,tttelem,tt;

function getSVGDoc(load_evt)

{

svgdoc = load_evt.target.ownerDocument;

svgroot = svgdoc.documentElement;

ttrelem = svgdoc.getElementById("ttr");

tttelem = svgdoc.getElementById("ttt");

}

function ShowTooltip(e, txt)

{

var posx, posy, curtrans, ctx, cty;

posx = e.clientX;

posy = e.clientY;

curtrans = svgroot.currentTranslate;

ctx = curtrans.x;

cty = curtrans.y;

tttelem.childNodes.item(0).data = txt;

ttrelem.setAttribute("x", posx-ctx);

ttrelem.setAttribute("y", posy-cty-20);

tttelem.setAttribute("x", posx-ctx+5);

tttelem.setAttribute("y", posy-cty-8);

ttrelem.setAttribute("width", tttelem.getComputedTextLength() + 10);

tttelem.setAttribute("style", "fill: #0000CC; font-size: 11px; visibility: visible");

ttrelem.setAttribute("style", "fill: #FFFFCC; stroke: #000000; stroke-width: 0.5px; visibility: visible");

}

function HideTooltip()

{

ttrelem.setAttribute("style", "visibility: hidden");

tttelem.setAttribute("style", "visibility: hidden");

}

function ZoomControl()

{

var curzoom;

curzoom = svgroot.currentScale;

svgdoc.getElementById("tooltip").setAttribute("transform","scale("+1/curzoom + ")");

}

该例是在浏览器中显示一个浅蓝色四边形，当鼠标进入四边形时弹出一个指示框，在指示框中写有“Welcome to Here”。如图2_5：左图是鼠标没有进入四边形的情况，右图是当鼠标进入四边形后触发onmousemove事件后的情况。

图2_5