简介
SVG(Scalable Vector Graphics)代表可升级矢量图象，是新一代图象格式的标准。它给Web开发人员提供了一种利用XML(Extensible Markup Language)创建静态图像和动态图像的方法，是图象技术上的一次革命。利用此技术，Web开发人员对页面进行更加精确的控制，SVG的动画片技术可以实现从简单的直线运动到复杂的3D螺旋变形的控制.
SVG 有许多其他图像方法所不具有的优点，下面就是其中一些：
1，和其它媒介兼容，比如无线设备等。
2，可升级的服务器端解决方案。
3，文件尺寸小，方便Web页面下载。
4，无限的颜色和字体的选择。
5，图像可任意缩放。
6，可以用脚本控制与客户的交互事件。
7，方便浏览器进行高清晰的打印。
8，可使用滤镜效果。
9，基于文本的格式，可以轻松地和其它WEB技术集成。
10，内建的国际语言支持。
11，减少维护成本。
12，轻松升级。
13，广泛的多媒体兼容性。
由于SVG和Flash有很多共同的特性，通常有人把它们放到一起进行比较，确实，两者都和其它标准有很好的兼容性。事实上，SVG比Flash有一些独特的特性。SVG可以使用CSS（Cascading Style Sheets）、Script脚本和DOM（Document Object Model ），是完全公开源代码的技术，初学者完全可以从别人的现成的作品中进行学习。而Flash采用的是独有的专利技术，并不是完全开放的标准，当你在场景上单击右键时，你看到的不是源代码。
然而，由于某些原因，SVG还并没有象Flash那样流行，但随着时间的推移，SVG也将很快流行起来的。Mozilla计划完全支持SVG技术，Microsoft也开始支持这种技术，（其实，IE6已经支持SVG。）Adobe GoLive5也宣布支持SVG。此外，SVG编辑器也开始在网络上风行，Jasc的WebDraw已经可以以可视化的方式创建SVG格式的图像了。Adobe 也有生成SVG格式图象的插件。SVG的未来不但是光明的，而且将会在不久的将来在Web领域扮演重要的角色。
目前，SVG的另一个不足之处就是，没有一个浏览器完全支持它，要浏览SVG格式的图像，需要安装Adobe SVG插件（plug-in），但目前它也不能完全支持SVG的标准。另一个缺陷就是，SVG的在线资料太少，Web开发人员很难找到可参考的资料和素材。
下面。就让我们来了解一下SVG的基本概念，SVG的特性是很多的，这里不能全部罗列出来，我们只是先初步感受一下SVG能够给Web开发人员带来什么.
什么是SVG?
SVG是设计和编程之间的桥梁，与传统的图像制作方法不同，SVG图像是由程序代码生成的，这种语言是基于XML的，因此，它可以和W
为了便于理解，我们可以把浏览器想象成一个空的画布，上面定义了许许多多的X，Y的坐标点，画布上的每一个点，都可以通过数学计算公式创造出一个形体。使用数学的术语可能会使人产生恐惧感，事实上，Web开发者在创建HTML页面时一直在使用这样的数学计算公式已经好长时间了，例如：一个CSS的层，通过设定层的top（y坐标点）和left（x坐标点）属性值，就可以定位它的位置，这就是利用数学公式来实现。SVG就是利用类似的原理来创建图像的。
SVG能够显示24位颜色的图像，而图像尺寸却非常的小，图像在放大或改变尺寸时不会有任何质量上的损失，更重要的是，SVG的每一个元素和元素的每一个属性都能够动态进行改变。这也是SVG最有竞争力的一面。
SVG的文档结构
SVG可以有许多方式来组成Web文档：可以以独立的SVG页面；可以嵌入到页面中；也可以被一个带名字空间的XHTML文档使用，这一点就象XML文档相似.下面先看看独立的SVG页面的例子：
1. <?xml version="1.0" standalone="no"?>
2. <!DOCTYPE svg PUBLIC "-//W
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
3. <svg width="300" height="300" x="0" y="0">
4. <!-- 这里放置SVG的内容代码 -->
5. </svg>
下面我们对上面的代码做一个说明:
第一行：由于SVG是XML的一个应用分支，因此，它也必须符合XML的标准，必须包含XML的声明<?xml version="1.0" standalone="no"?>
第二行：SVG必须遵循一定的标准或规则，这些标准或规则保存在一个被称为Document Type Declaration或DTD的独立文件，来验证SVG文档结构的正确性，DTD精确描述SVG中允许使用的语言和语法规则。
第三行：<svg>标记告诉浏览器，这是一个SVG文档，SVG文档的作用范围（或叫做SVG的画布大小）用height和width属性来定义，如果不定义 width和height属性的话，画布的范围将是整个浏览器，x，y属性告诉浏览器将SVG画布放到什么位置，x属性与我们平常所用top属性相同，指浏览器的top位置，y属性等同于浏览器的left位置，当然，这里也可以使用相对位置来定位，即百分比。
第四行：所有的SVG内容，都被放到<svg></svg>标记之间，
第五行：由于SVG是XML的一个应用，因此，必须有结束标记</svg>来结束文档。
也可以把SVG嵌入到HTML或XHTML文件里：
<!DOCTYPE HTML PUBLIC "-//W
<html>
<head>
<title>Object 和 Embed 测试</title>
</head>
<body>
<object data="test.svg" width="500" height="500" type="image/svg+xml">
<embed src="test.svg" width="500" height="500" type="image/svg+xml" />
</object>
</body>
</html>
上面的文件是一个完完全全的HTML结构的文档，最重要的标记是object和embed两个，当然，这是对Internet Explorer和Netscape两种情况的，值得注意的是：object采用data属性指明SVG文件的URL地址，而embed采用src属性来指明SVG文件的URL。
这种方法的优点就是：它可以把HTML和XHTML和SVG的长处结合在一起，例如：可以提高页面被搜索引擎搜索到的机会，可以轻易地添加声音或音乐，（Adobe plug-in支持mp3和wav文件）。
第3个方法就是：利用XML名字空间，这种方式是功能最强大，最具有灵活性，我们在以后的文章里将详细探讨。
下面，就让我们来看几个SVG的例子:
基本形状
和其它矢量化图形工具一样，SVG也有一些预定义的基本形状可供我们直接使用，这些基本形状称为元素，就象HTML文档中的table元素一样，下面是SVG标准里预先定义好的基本形状元素:
矩形<rect>
圆形<circle>
椭圆<ellipse>
直线<line>
折线<polyline>
多边形<polygon>
描绘路径<path>
<rect>
<rect>标记允许你创建矩形或它的变体，比如正方形，圆角矩形等，下面就让我以一个例子来看看：
1. <?xml version="1.0" standalone="no"?>
2. <!DOCTYPE svg PUBLIC "-//W
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
3. <svg width="300" height="300">
4. <rect x="80" y="53" width="189" height="52"
style="fill:rgb(39，44，231); stroke:rgb(0，0，128); stroke-width:1"/>
5. </svg>
上面的代码的第4行定义了一个矩形，以一个<rect>标记开始，定义了矩形的各个属性，x属性定义了矩形距浏览器左边的位置，y属性定义了矩形距浏览器上边的位置，换个角度考虑，就相当于html中元素的left和top属性，width和height属性定义了矩形的宽度和高度，style属性允许我们定义SVG推荐标准支持的CSS样式属性，有许多CSS属性是专门针对SVG的，上面的例子中，fill属性定义了长方形的填充颜色，这里采用的是rgb的格式，SVG也支持颜色名和16进制的颜色格式.比如:fill:red或fill:#ff0000，stroke属性定义边框线，SVG中，如果不定义，边框线没有任何宽度，换句话说，SVG默认边框线宽度为0，对所有的SVG的形状都是这样的。如果需要定义边框线的话，采用这样的确语法格式:stroke:rgb(0，0，128)定义颜色，stroke-width:1定义宽度，我门还可以改变填充颜色的透明度，可以这样写:fill-opacity: 0.1，透明度范围是从0到1，我们也可以定义整个元素的透明度，opacity:0.5，该透明度对填充和边框线都有效，也可以单独定义边框线的透明度:stroke-opacity:0.8。定义圆角矩形，使用rx，ry属性定义圆角的半径:rx="20" ry="20"
例如：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="300">
<rect x="0" y="0" rx="20" ry="20"
width="289" height="252"
style="fill:olive; stroke:purple; stroke-width:5"/>
</svg>
<line>
<line>通过指定开始点(x1，y1)、结束点(x2，y2)和宽度stroke定义一条直线，语法如下:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="300">
<line x1="127" y1="65" x2="127" y2="200"
style="stroke:rgb(0，0，0);stroke-width:2"/>
</svg>
要想得到很细的线，可以指定stroke-width为大于0小于1的数值。
<circle>
SVG中，要定义一个圆，只需要指顶圆心的坐标、半径即可，也可以使用样式单属性定义外观的样式：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="400">
<circle cx="143" cy="163" r="84"
style="fill:rgb(192，192，255); stroke:rgb(0，0，128); stroke-width:1"/>
</svg>
<ellipse>
定义椭圆和定义圆很相象，指定圆心，X，Y轴的半径即可：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="400">
<ellipse cx="160" cy="163" rx="101" ry="81"
style="fill:rgb(192，192，255);stroke:rgb(0，0，128);stroke-width:1"/>
</svg>
<polygon>
这个标记用来指定连续的点的坐标来，定义多边形。语法如下：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<polygon points="223.5，123.034 276，213.966 171，213.966"
style="fill:rgb(126，14，83);stroke:rgb(0，0，128);stroke-width:1"/>
</svg>
在SVG中，允许使用浮点数来达到精确控制，这和以前的HTML不一样。
<polyline>
这个标记通过指定各个点的坐标，来定义一条折线，格式如下：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<polyline points="100，200 100，20 10，200 100，20"
style="stroke:rgb(64，64，64);stroke-width:1"/>
</svg>
<path>
<path>标记是SVG中最复杂的，它创建最复杂的形状，也是最有用、用的最多的，
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
<path d="M10
style="fill:rgb(0，0，153);fill-opacity:0.5;stroke:rgb(0，0，153);stroke-width:4"/>
</svg>
<path>标记的d属性用来描述下面要画的是多类型的形状，M10 20表示画笔移动到点10，20，L110 20表示从当前点画一条线到坐标110，20等，由于path标记采用的格式很复杂，因此，可以画出很复杂的形状，下面的语句在浏览器上画一个螺旋线：
<path d="M156
339.523 153.239 344 156
164.284 314 156
364 156
C
style="fill:none;stroke:darkgreen;;stroke-width:2"/>
下面是path标记的d属性使用的命令，注意：大写表示绝对位置，小写表示相对位置：
M = 移动
L = 画直线
H = 水平画线
V = 垂直画线
C = 画曲线
S = 画平滑曲线
Q = 画贝塞尔曲线
T = 画平滑贝塞尔曲线
A = 画圆弧
Z = 关闭路径的描绘
由于描绘路径比较复杂，建议使用画图工具包来生成，比如：Jasc公司的WebDraw，但要动态控制图像，你必须清楚你的每句代码都是做什么的。目前支持SVG的编辑器也开始出现，你可以利用XML SPY来创作您的SVG图象了，SWF格式的Flash也可以转换成SVG格式（http://www.ep.cs.nott.ac.uk/projects/SVG/flash2svg/），Bitmap转换成SVG(http://padc23.padc.mmpc.is.tsukuba.ac.jp/member/morik/fdssvg/)，CorelDraw的SVG滤镜下载（http://venus.corel.com/nasapps/DrawSVGDownload/index.html），Adobe Illustrator 10可以直接生成SVG格式的图象文件。
到目前为止，我们已经可以做出比较复杂的图像了，但还不够生动，要做出更加复杂的图象，我们也可以在SVG里使用滤镜效果，就象在Adobe PhotoShop和Micromidea FireWorks里的那样，这将在以后的文章里陆续介绍。
为了查看本文章的例子，您必须安装Adobe SVG plug-in(http://www.adobe.com/svg/)或安装Microsoft Internet Explorer 5.5以后的版本的浏览器。要看到更多的SVG的例子，访问http://lucky.myrice.com 。
评论