神马文学网SVG入门
来源：百度文库 编辑：神马文学网 时间：2024/05/08 01:00:17
SVG入门2007-05-25 02:26 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的，因此，它可以和W3C的其它标准无缝集成，比如DOM，CSS等。
为了便于理解，我们可以把浏览器想象成一个空的画布，上面定义了许许多多的X，Y的坐标点，画布上的每一个点，都可以通过数学计算公式创造出一个形体。使用数学的术语可能会使人产生恐惧感，事实上，Web开发者在创建HTML页面时一直在使用这样的数学计算公式已经好长时间了，例如：一个CSS的层，通过设定层的top（y坐标点）和left（x坐标点）属性值，就可以定位它的位置，这就是利用数学公式来实现。SVG就是利用类似的原理来创建图像的。
SVG能够显示24位颜色的图像，而图像尺寸却非常的小，图像在放大或改变尺寸时不会有任何质量上的损失，更重要的是，SVG的每一个元素和元素的每一个属性都能够动态进行改变。这也是SVG最有竞争力的一面。
一、轻松入门（Blueidea_1.svg）
------------------------------------------------------------------------
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
-----------------------------------------------------------------------------
说明：
文件名是以.svg作为后缀名的。
第1行是xml声明，指定所遵循的xml标准的版本和文件的编码方式。
2、3行是DOCTYPE声明，指定SVG DTD所在的位置。
第4行是SVG元素，svg元素是SVG文件的根元素，所有其他的SVG元素都是他的子元素。可以使用width属性和height属性设置SVG图象的高和宽。单位象素。
第5行是desc元素，包含了一些描述性的信息。
第6行是circle元素，它的作用是画一个圆，style属性设置为"fill:blue"表示用蓝色填充这个圆，cx和cy属性用来定义圆心的x和y坐标，r属性定义圆的半径。
用浏览器可以打开这个文件，可以到http://www.adobe.com/svg/viewer/install/main.html去下载Adobe公司的SVG Viewer浏览器插件(2.24Mb Win 98 - XP SVGView.exe 3.0 11/2001 )。
---------------------------------------------------------------------------------
二、使用颜色（Blueidea_2.svg）
---------------------------------------------------------------------------------
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
--------------------------------------------------------------------------------
说明：
如果你看了第一个例子就会知道这个例子构造了三个不同的圆，第1个圆用黑色填充，线条颜色没有设定，默认是黑色。第2个圆用蓝色填充，线条是绿色。第3个圆不使用填充，线条是红色。
语法形式>>> style="fill:color;stroke:color"
---------------------------------------------------------------------------------
三、不透明性（Blueidea_3.svg）
--------------------------------------------------------------------------------
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
----------------------------------------------------------------------------
说明：
在SVG中，使用style属性指定fill-opacity,stroke-opacity和opacity的值，可以控制图象的透明度。
例如：fill-opacity表示填充颜色的透明程度。stroke-opacity表示线条颜色的透明程度。可取值的范围是从1到0；1表示完全不透明，0表示完全透明；如果图象是完全透明的(opacity=0),那么图象就看不见了。
------------------------------------------------------------------------------
四、线条（Blueidea_4.svg）
------------------------------------------------------------------------------
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
----------------------------------------------------------------------------------
说明：
在SVG的style属性中，stroke控制线条的颜色，stroke-width控制线条的宽度，stroke-dasharray是用来描述线段和空隙长度的。第1个"5"表示小线段的长度，第2个"5"表示小线段和长线段之间的长度，"15"表示长线段的长度，"25"表示长线段到短线段之间的长度。事实上，可以给上述数字序列再添上几个数字，那么该圆的边框线段和空隙就更多了。
-----------------------------------------------------------------------------------
五、文本（Blueidea_5.svg）
---------------------------------------------------------------------------------
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
---------------------------------------------------------------------------
说明：
在SVG中使用text元素定义文字。Text元素用x和y属性定义文字的位置。Text元素默认是左对齐，可以用text-anchor子属性指定文字的对齐方式，中对齐（text-anchor: middle），右对齐（text-anchor: end）
（按照XML的规则，显示中文应该是，可在SVG中则通不过。谁知道的话请告诉我一声，谢谢。）
文字颜色的定义：可以在text元素的style属性中设置fill:color
---------------------------------------------------------------------------
六、分行显示（Blueidea_6.svg）
-------------------------------------------------------------------------------------
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
-------------------------------------------------------------------------------------
说明：
在SVG中，可以使用tspan元素使文字分行显示。Tspan元素作用于对文字显示进行单独控制。Tspan元素的dy属性表示一个纵向相对位移值，他作用于区分上下两行文字间的纵向相对位移。如果将dy属性删掉，将会发现line1被line2覆盖而无法显示。
Tspan元素除了dy还有x,y,dx,rotate,textlength等属性。
-------------------------------------------------------------------------------------
七、形状（Blueidea_7.svg）
前面的例子全是画圆的，别误会SVG只能画圆哦，其实SVG可以画很多复杂的形状的。
创建椭圆
在SVG中可以使用ellipse元素创建椭圆，ellipse元素的cx和cy属性表示椭圆中心的坐标，rx和ry表示椭圆的长轴和短轴。Style属性决定椭圆的显示样式。
创建矩形
在SVG中可以使用rect元素创建矩形，rect元素的x和y属性表示矩形左上角的坐标，width和height表示矩形的长和高。Style属性决定矩形的显示样式。
创建圆角矩形
在SVG中可以使用rect元素创建圆角矩形，rect元素的x和y属性表示矩形左上角的坐标，width和height表示矩形的长和高。Style属性决定矩形的显示样式。
圆角矩形是矩形的一种特殊情形，只是又多了两个和圆角相关的内容：rx和ry属性。
创建线条
在SVG中可以使用line元素创建线条，line元素的x1和y1属性表示线条的开始端的坐标，x2和y2表示线条的终点的坐标。Style属性决定线条的显示样式。Stroke元素定义线条的颜色，stroke-width定义线宽
创建折线
在SVG中可以使用polyline元素创建线条，polyline元素的points属性依次记录折线的起点、折点、终点的坐标，polyline元素的style属性决定线条的显示样式。Stroke元素定义线条的颜色，stroke-width定义线宽。
< polyline points ="5,5 45,45 5,35 45,5" style="stroke:blue;stroke-width=5" />
创建多边形
在SVG中可以使用polygon元素创建线条，polygon元素的points属性依次记录多边形的起点、折点、终点的坐标，polygon元素的style属性决定线条的显示样式。Stroke元素定义线条的颜色，stroke-width定义线宽。
< polygon points ="5,5 45,45 5,35 45,5" style="stroke:blue;stroke-width=5" />
定义路径
在SVG中，可以使用path元素定义路径.
path元素的d属性代表数据声明标签，他的值就是路径上的关键点的信息集合。在d属性值中，M代表Moveto(移动到)，M5和5表示先将起点移动到（5,5）处，C 代表Curve（贝赛尔曲线控制），C5,45 45,45 45,5中的点（45,5）表示第2个点的位置，中间的两点（5,45），（45,45）分别代表前一个点（5,5）和后一个点(45,5)之间的曲柄点的位置。
对象的调用
如果一个SVG对象需要被多次使用，可以首先对该对象进行声明定义。使用defs元素，该定义中必须包括ID标志。当需要使用预定义好的对象时，必须使用use元素，并确定放置对象的位置，利用xlink属性指定对象的ID标志，完成调用。
下面，就让我们来看几个SVG的例子:
基本形状
和其它矢量化图形工具一样，SVG也有一些预定义的基本形状可供我们直接使用，这些基本形状称为元素，就象HTML文档中的table元素一样，下面是SVG标准里预先定义好的基本形状元素:
矩形
圆形
椭圆
直线
折线
多边形
描绘路径
标记允许你创建矩形或它的变体，比如正方形，圆角矩形等，下面就让我以一个例子来看看：
1.
2. "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
3.
上面的代码的第4行定义了一个矩形，以一个标记开始，定义了矩形的各个属性，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"
例如：
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
通过指定开始点(x1，y1)、结束点(x2，y2)和宽度stroke定义一条直线，语法如下:
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
要想得到很细的线，可以指定stroke-width为大于0小于1的数值。
SVG中，要定义一个圆，只需要指顶圆心的坐标、半径即可，也可以使用样式单属性定义外观的样式：
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
定义椭圆和定义圆很相象，指定圆心，X，Y轴的半径即可：
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
这个标记用来指定连续的点的坐标来，定义多边形。语法如下：
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
在SVG中，允许使用浮点数来达到精确控制，这和以前的HTML不一样。
这个标记通过指定各个点的坐标，来定义一条折线，格式如下：
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
标记是SVG中最复杂的，它创建最复杂的形状，也是最有用、用的最多的，
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
标记的d属性用来描述下面要画的是多类型的形状，M10 20表示画笔移动到点10，20，L110 20表示从当前点画一条线到坐标110，20等，由于path标记采用的格式很复杂，因此，可以画出很复杂的形状，下面的语句在浏览器上画一个螺旋线：
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网页中，有更多相关的资料：
普通效果：
http://www.adobe.com/svg/dynamic/transformations2.html
无JS干预效果：
http://www.adobe.com/svg/dynamic/declarative.html
JS干预效果：
http://www.adobe.com/svg/dynamic/javascript.html
鼠标事件效果：
http://www.adobe.com/svg/dynamic/mouseevents.html
键盘事件效果：
http://www.adobe.com/svg/dynamic/keyboardevents.html
滤镜特效1、2
http://www.adobe.com/svg/basics/filtereffects.html
http://www.adobe.com/svg/basics/filtereffects2.html
要看到更多的SVG的例子，访问 http://lucky.myrice.com
SVG（Scalable Vector Graphics）是一种基于XML 的用来描述二维矢量图形和矢量/点阵混合图形的置标语言，是一种全新的矢量图形规范。 SVG规范定义了SVG的特征、语法和显示效果，包括模块化的XML命名空间（namespace）和SVG文档对象模型(DOM)。 SVG的绘图可以通过动态和交互式方式进行，在实际操作中，则是以嵌入方式或脚本方式来实现的。SVG不仅提供超链接功能，还定义了丰富的事件。由于SVG支持脚本语言（script），可以通过Script编程，访问SVG DOM的元素和属性，即可响应特定的事件，从而提高了SVG的动态和交互性能。 SVG实现了图形、图象和文字的有机统一。 SVG除了支持HTML中常用的标记，如文本、图象、链接、交互性、CSS的使用、脚本（Script）外，还提供了大量针对图形、图象、动画的特定标记。这就为实现GIS提供了可能。
作者根据实际工作需要，在Web浏览器中采用SVG及相关技术实现了Web的GIS管理系统(以下简称WebGIS)，取得了很好的效果。此系统包括服务端及客户端的设计，服务器端出要处理数据的存储及数据的动态装载，客户端主要完成SVG数据的显示及交互。本文主要对基于SVG的WebGIS的客户端实现的一些基本知识及实现技术作一个简单介绍。
基础知识
SVG浏览插件
要实现SVG图形的显示，必须要在客户端安装SVG浏览器，Adobe开发的SVG Viewer功能强大，显示效果好，是网络上使用最多的，其最新的版本是3.0。可以到Adobe的网站（http://www.adobe.com/svg/viewer/install/main.html）上去下载，为了保证中文能正确显示，请下载简体中文版本。下载后安装程序，第一次使用时回弹出用户许可信息，点击"接受"即可。
在网页中嵌入SVG
将实现基于浏览器的GIS系统，需要将SVG图形对象嵌入到网页中，使用如下HTML代码来实现：
其中embed标签指定为一个嵌入的对象，width,height分别指定该对象的宽度、高度，type指定类型为image/svg-xml ,src指定为svg数据文件的URL地址，指定这样的标签并在浏览器中打开，浏览器便回调用SVG Viewer在指定区域进行显示。此处，src指定的是一个svg文件，在GIS系统中，要求根据不同的请求获取不同的数据，则可以将其改为动态的url，如服务端的Java Servlet，由服务端动态生成。需要注意的是,SVG目前不支持GB编码，在使用中文字符时，请使用UTF-8编码。
SVG图形对象简介
SVG提供了丰富的图形对象，包括直线（line）、路径(path)、圆(circle)、图标(symbol)文字(text)、图像(image)等，满足了GIS系统的需要。这些图形对象可以通过设置不同的属性、显示样式来达到不同的显示效果。对象在SVG文件中以XML标签的形式存在，而对象属性以标签的属性来存取，可以通过访问SVG的DOM对象的方法来方便的存取这些对象及属性。同时SVG中还提供了组的管理(标签),定义(defs)及引用等功能。这些特征在GIS中得到了广泛的应用。
SVG的事件简介
SVG提供了丰富的消息触发及事件响应函数，获取用户消息。如在地图上移动、点击鼠标等。事件的相应可以定义到整个文档对象中，也可以定义在单个图形对象上。如要给某个路径(path)定义鼠标一定事件，可以这样
功能实现
地图的交互及控制
在浏览器中打开SVG文件时，SVG图形作为浏览器的一个嵌入对象出现，可以很方便的通过script函数来获取SVG图形对象及其内部的图形属性。通过获取这些对象和属性，就可以很方便地实现交互功能。
GIS系统最基本的功能是地图控制，SVG Viewer本身提供图形的缩放功能，但要通过操作鼠标时按指定的功能键才能实现，不适合GIS功能的需要，在WebGIS系统中将其屏蔽。但由于SVG提供了丰富的消息触发及事件响应函数，通过捕捉这些消息，来实现自定义的地图控制功能。一个放大地图的实现流程是：用户点击地图，触发onmousedown事件，调用消息响应函数，在消息响应函数中将地图的变换矩阵以当前点击的点为中心放大1.1倍，更新显示图形。消息响应的函数如下：
Function zoom(evt, scale)
{ // scale = 1.1;表示放大1.1倍
point = new GDPoint();
point.x = evt.clientX;
point.y = evt.clientY; //point为当前点击的坐标点 为屏幕坐标
absPoint = pointInvert(point);//转换为绝对最表
scale = curTransform.scale*scale; //设置当前的缩放系数
curTransform.scale = scale;
point1 = pointApply(absPoint);//绝对坐标应用当前的变换系数
curTransform.x += point.x-point1.x;
curTransform.y += point.y-point1.y;//缩放中心平移到当前点击的位置
matrix= trans2String(curTransform);//生成新的变换矩阵
maproot.setAttribute("transform",matrix);//应用新的变换矩阵
}
其他的如地图缩小、全图显示、区域放大、局部定位等功能与之类似，这里就不一一作介绍。
图层管理
SVG采用基于XML的DOM文档管理结构，很方便实现层次管理，其组对象就可以将其下面的所有图形管理起来。节点中的childNodes属性可以获取所有的子节点的集合，getElementsByTagName()方法可以获取某种类型对象的列表，如要获取某组（g）下的所有路径(path)对象的集合，就可以调用getElementsByTagName("path")。 作者通过采用组对象来实现图层管理功能，不同图层的对象包含在不同的组中。通过设置组的属性，就可以实现如可见性、颜色、透明度等设置以及选中、删除所有对象等操作。SVG中的对象的样式属性具有继承性，如果下一级没有某样式属性，则直接使用其上一级的属性，以此类推，直到顶级为止。如：对某层设置某个显示透明度，则其下级元素显示时，均采用该透明度，除非其下级元素指定了透明度属性。
下面的图显示GIS系统中的图层控制界面。
图标管理
图标表示的是信息点的信息，在GIS系统中广泛使用图标来标志信息点，其特点是图标引用相同的预定义的图形组。增加新的图标只是在不同的位置增加一个引用而已。在不增加实际的绘图数据。减少了数据量；同时，如果要修改某类信息的显示图标，只要修改预定义的图标即可，方便了管理。在WebGIS系统中定义了很多类型的图标。下图表示用一个圆和一个路径对象定义的图标,其名称为symbol_1,并定义在defs标签内，供图标对象引用：
…
下图为图标的实例，这两个图标引用上面定义的symbo_1的图标：图标在地图上的实际位置为transform指定的位置分别是(200,100),(200,200)。
如果要增加图标，只要添加新的引用(use)对象即可。这些对象可以有自己的属性，表示不同的信息点，但其显示的形状是预定义的，如果修改了预定义的形状，这些图标的显示结果同样改变。下图为在WebGIS中定义的几种图标及显示效果(蓝色的为图标)。
地图属性的定义
SVG图形数据本身只包含用来实现矢量图形显示的信息，如坐标点、变换矩阵、显示样式等信息，不能满足GIS系统的需要。但由于SVG是基于XML格式的，除了使用其内置的属性外，可以对其属性进行任意扩充，以实现自定义的功能。在SVG图形中，对象的属性id是用来标志唯一对象的编号，可以通过SVG文档对象的getElementById()函数来获取指定的对象。WebGIS采用id好作为图形内在的标示，而自定义其他的属性如名称(name),提示信息(tip)等来存储其GIS属性。获取或赋值这些属性的方法是调用getAttribute及setAttribute函数。如在WebGIS中一个路径是这么定义的。
那么通过ID "ROAD:101" 获取路径对象后，就可以获取其属性Name及Tip的信息，执行显示提示信息等功能。
总结
本文对用SVG技术实现基于Web的GIS的关键技术做了简单的介绍，通过对SVG技术的把握和应用，作者成功地开发了WebGIS系统，说明SVG技术完全能胜任某些行业GIS应用的需要，从长远来看，SVG技术代表网络矢量化图形的发展方向，必将在包括 GIS在内的各个方面得到广泛应用。
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的，因此，它可以和W3C的其它标准无缝集成，比如DOM，CSS等。
为了便于理解，我们可以把浏览器想象成一个空的画布，上面定义了许许多多的X，Y的坐标点，画布上的每一个点，都可以通过数学计算公式创造出一个形体。使用数学的术语可能会使人产生恐惧感，事实上，Web开发者在创建HTML页面时一直在使用这样的数学计算公式已经好长时间了，例如：一个CSS的层，通过设定层的top（y坐标点）和left（x坐标点）属性值，就可以定位它的位置，这就是利用数学公式来实现。SVG就是利用类似的原理来创建图像的。
SVG能够显示24位颜色的图像，而图像尺寸却非常的小，图像在放大或改变尺寸时不会有任何质量上的损失，更重要的是，SVG的每一个元素和元素的每一个属性都能够动态进行改变。这也是SVG最有竞争力的一面。
一、轻松入门（Blueidea_1.svg）
------------------------------------------------------------------------
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
-----------------------------------------------------------------------------
说明：
文件名是以.svg作为后缀名的。
第1行是xml声明，指定所遵循的xml标准的版本和文件的编码方式。
2、3行是DOCTYPE声明，指定SVG DTD所在的位置。
第4行是SVG元素，svg元素是SVG文件的根元素，所有其他的SVG元素都是他的子元素。可以使用width属性和height属性设置SVG图象的高和宽。单位象素。
第5行是desc元素，包含了一些描述性的信息。
第6行是circle元素，它的作用是画一个圆，style属性设置为"fill:blue"表示用蓝色填充这个圆，cx和cy属性用来定义圆心的x和y坐标，r属性定义圆的半径。
用浏览器可以打开这个文件，可以到http://www.adobe.com/svg/viewer/install/main.html去下载Adobe公司的SVG Viewer浏览器插件(2.24Mb Win 98 - XP SVGView.exe 3.0 11/2001 )。
---------------------------------------------------------------------------------
二、使用颜色（Blueidea_2.svg）
---------------------------------------------------------------------------------
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
--------------------------------------------------------------------------------
说明：
如果你看了第一个例子就会知道这个例子构造了三个不同的圆，第1个圆用黑色填充，线条颜色没有设定，默认是黑色。第2个圆用蓝色填充，线条是绿色。第3个圆不使用填充，线条是红色。
语法形式>>> style="fill:color;stroke:color"
---------------------------------------------------------------------------------
三、不透明性（Blueidea_3.svg）
--------------------------------------------------------------------------------
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
----------------------------------------------------------------------------
说明：
在SVG中，使用style属性指定fill-opacity,stroke-opacity和opacity的值，可以控制图象的透明度。
例如：fill-opacity表示填充颜色的透明程度。stroke-opacity表示线条颜色的透明程度。可取值的范围是从1到0；1表示完全不透明，0表示完全透明；如果图象是完全透明的(opacity=0),那么图象就看不见了。
------------------------------------------------------------------------------
四、线条（Blueidea_4.svg）
------------------------------------------------------------------------------
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
----------------------------------------------------------------------------------
说明：
在SVG的style属性中，stroke控制线条的颜色，stroke-width控制线条的宽度，stroke-dasharray是用来描述线段和空隙长度的。第1个"5"表示小线段的长度，第2个"5"表示小线段和长线段之间的长度，"15"表示长线段的长度，"25"表示长线段到短线段之间的长度。事实上，可以给上述数字序列再添上几个数字，那么该圆的边框线段和空隙就更多了。
-----------------------------------------------------------------------------------
五、文本（Blueidea_5.svg）
---------------------------------------------------------------------------------
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
---------------------------------------------------------------------------
说明：
在SVG中使用text元素定义文字。Text元素用x和y属性定义文字的位置。Text元素默认是左对齐，可以用text-anchor子属性指定文字的对齐方式，中对齐（text-anchor: middle），右对齐（text-anchor: end）
（按照XML的规则，显示中文应该是，可在SVG中则通不过。谁知道的话请告诉我一声，谢谢。）
文字颜色的定义：可以在text元素的style属性中设置fill:color
---------------------------------------------------------------------------
六、分行显示（Blueidea_6.svg）
-------------------------------------------------------------------------------------
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
-------------------------------------------------------------------------------------
说明：
在SVG中，可以使用tspan元素使文字分行显示。Tspan元素作用于对文字显示进行单独控制。Tspan元素的dy属性表示一个纵向相对位移值，他作用于区分上下两行文字间的纵向相对位移。如果将dy属性删掉，将会发现line1被line2覆盖而无法显示。
Tspan元素除了dy还有x,y,dx,rotate,textlength等属性。
-------------------------------------------------------------------------------------
七、形状（Blueidea_7.svg）
前面的例子全是画圆的，别误会SVG只能画圆哦，其实SVG可以画很多复杂的形状的。
创建椭圆
在SVG中可以使用ellipse元素创建椭圆，ellipse元素的cx和cy属性表示椭圆中心的坐标，rx和ry表示椭圆的长轴和短轴。Style属性决定椭圆的显示样式。
创建矩形
在SVG中可以使用rect元素创建矩形，rect元素的x和y属性表示矩形左上角的坐标，width和height表示矩形的长和高。Style属性决定矩形的显示样式。
创建圆角矩形
在SVG中可以使用rect元素创建圆角矩形，rect元素的x和y属性表示矩形左上角的坐标，width和height表示矩形的长和高。Style属性决定矩形的显示样式。
圆角矩形是矩形的一种特殊情形，只是又多了两个和圆角相关的内容：rx和ry属性。
创建线条
在SVG中可以使用line元素创建线条，line元素的x1和y1属性表示线条的开始端的坐标，x2和y2表示线条的终点的坐标。Style属性决定线条的显示样式。Stroke元素定义线条的颜色，stroke-width定义线宽
创建折线
在SVG中可以使用polyline元素创建线条，polyline元素的points属性依次记录折线的起点、折点、终点的坐标，polyline元素的style属性决定线条的显示样式。Stroke元素定义线条的颜色，stroke-width定义线宽。
< polyline points ="5,5 45,45 5,35 45,5" style="stroke:blue;stroke-width=5" />
创建多边形
在SVG中可以使用polygon元素创建线条，polygon元素的points属性依次记录多边形的起点、折点、终点的坐标，polygon元素的style属性决定线条的显示样式。Stroke元素定义线条的颜色，stroke-width定义线宽。
< polygon points ="5,5 45,45 5,35 45,5" style="stroke:blue;stroke-width=5" />
定义路径
在SVG中，可以使用path元素定义路径.
path元素的d属性代表数据声明标签，他的值就是路径上的关键点的信息集合。在d属性值中，M代表Moveto(移动到)，M5和5表示先将起点移动到（5,5）处，C 代表Curve（贝赛尔曲线控制），C5,45 45,45 45,5中的点（45,5）表示第2个点的位置，中间的两点（5,45），（45,45）分别代表前一个点（5,5）和后一个点(45,5)之间的曲柄点的位置。
对象的调用
如果一个SVG对象需要被多次使用，可以首先对该对象进行声明定义。使用defs元素，该定义中必须包括ID标志。当需要使用预定义好的对象时，必须使用use元素，并确定放置对象的位置，利用xlink属性指定对象的ID标志，完成调用。
下面，就让我们来看几个SVG的例子:
基本形状
和其它矢量化图形工具一样，SVG也有一些预定义的基本形状可供我们直接使用，这些基本形状称为元素，就象HTML文档中的table元素一样，下面是SVG标准里预先定义好的基本形状元素:
矩形
圆形
椭圆
直线
折线
多边形
描绘路径
1.
2. "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
3.
上面的代码的第4行定义了一个矩形，以一个
例如：
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
要想得到很细的线，可以指定stroke-width为大于0小于1的数值。
SVG中，要定义一个圆，只需要指顶圆心的坐标、半径即可，也可以使用样式单属性定义外观的样式：
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
定义椭圆和定义圆很相象，指定圆心，X，Y轴的半径即可：
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
这个标记用来指定连续的点的坐标来，定义多边形。语法如下：
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
在SVG中，允许使用浮点数来达到精确控制，这和以前的HTML不一样。
这个标记通过指定各个点的坐标，来定义一条折线，格式如下：
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
下面是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网页中，有更多相关的资料：
普通效果：
http://www.adobe.com/svg/dynamic/transformations2.html
无JS干预效果：
http://www.adobe.com/svg/dynamic/declarative.html
JS干预效果：
http://www.adobe.com/svg/dynamic/javascript.html
鼠标事件效果：
http://www.adobe.com/svg/dynamic/mouseevents.html
键盘事件效果：
http://www.adobe.com/svg/dynamic/keyboardevents.html
滤镜特效1、2
http://www.adobe.com/svg/basics/filtereffects.html
http://www.adobe.com/svg/basics/filtereffects2.html
要看到更多的SVG的例子，访问 http://lucky.myrice.com
http://down.xml.org.cn/xml/svg/SVGTutorial.rar
http://down.xml.org.cn/xml/svg/SVGProgrammingGuide.rar
http://down.xml.org.cn/xml/svg/F ... .to.Source.Code.rar
http://down.xml.org.cn/xml/svg/F ... rce.CodeSamples.zip
两个SVG的`DTD
做SVG做WEBGIS``
SVG（Scalable Vector Graphics）是一种基于XML 的用来描述二维矢量图形和矢量/点阵混合图形的置标语言，是一种全新的矢量图形规范。 SVG规范定义了SVG的特征、语法和显示效果，包括模块化的XML命名空间（namespace）和SVG文档对象模型(DOM)。 SVG的绘图可以通过动态和交互式方式进行，在实际操作中，则是以嵌入方式或脚本方式来实现的。SVG不仅提供超链接功能，还定义了丰富的事件。由于SVG支持脚本语言（script），可以通过Script编程，访问SVG DOM的元素和属性，即可响应特定的事件，从而提高了SVG的动态和交互性能。 SVG实现了图形、图象和文字的有机统一。 SVG除了支持HTML中常用的标记，如文本、图象、链接、交互性、CSS的使用、脚本（Script）外，还提供了大量针对图形、图象、动画的特定标记。这就为实现GIS提供了可能。
作者根据实际工作需要，在Web浏览器中采用SVG及相关技术实现了Web的GIS管理系统(以下简称WebGIS)，取得了很好的效果。此系统包括服务端及客户端的设计，服务器端出要处理数据的存储及数据的动态装载，客户端主要完成SVG数据的显示及交互。本文主要对基于SVG的WebGIS的客户端实现的一些基本知识及实现技术作一个简单介绍。
基础知识
SVG浏览插件
要实现SVG图形的显示，必须要在客户端安装SVG浏览器，Adobe开发的SVG Viewer功能强大，显示效果好，是网络上使用最多的，其最新的版本是3.0。可以到Adobe的网站（http://www.adobe.com/svg/viewer/install/main.html）上去下载，为了保证中文能正确显示，请下载简体中文版本。下载后安装程序，第一次使用时回弹出用户许可信息，点击"接受"即可。
在网页中嵌入SVG
将实现基于浏览器的GIS系统，需要将SVG图形对象嵌入到网页中，使用如下HTML代码来实现：
其中embed标签指定为一个嵌入的对象，width,height分别指定该对象的宽度、高度，type指定类型为image/svg-xml ,src指定为svg数据文件的URL地址，指定这样的标签并在浏览器中打开，浏览器便回调用SVG Viewer在指定区域进行显示。此处，src指定的是一个svg文件，在GIS系统中，要求根据不同的请求获取不同的数据，则可以将其改为动态的url，如服务端的Java Servlet，由服务端动态生成。需要注意的是,SVG目前不支持GB编码，在使用中文字符时，请使用UTF-8编码。
SVG图形对象简介
SVG提供了丰富的图形对象，包括直线（line）、路径(path)、圆(circle)、图标(symbol)文字(text)、图像(image)等，满足了GIS系统的需要。这些图形对象可以通过设置不同的属性、显示样式来达到不同的显示效果。对象在SVG文件中以XML标签的形式存在，而对象属性以标签的属性来存取，可以通过访问SVG的DOM对象的方法来方便的存取这些对象及属性。同时SVG中还提供了组的管理(
SVG的事件简介
SVG提供了丰富的消息触发及事件响应函数，获取用户消息。如在地图上移动、点击鼠标等。事件的相应可以定义到整个文档对象中，也可以定义在单个图形对象上。如要给某个路径(path)定义鼠标一定事件，可以这样
功能实现
地图的交互及控制
在浏览器中打开SVG文件时，SVG图形作为浏览器的一个嵌入对象出现，可以很方便的通过script函数来获取SVG图形对象及其内部的图形属性。通过获取这些对象和属性，就可以很方便地实现交互功能。
GIS系统最基本的功能是地图控制，SVG Viewer本身提供图形的缩放功能，但要通过操作鼠标时按指定的功能键才能实现，不适合GIS功能的需要，在WebGIS系统中将其屏蔽。但由于SVG提供了丰富的消息触发及事件响应函数，通过捕捉这些消息，来实现自定义的地图控制功能。一个放大地图的实现流程是：用户点击地图，触发onmousedown事件，调用消息响应函数，在消息响应函数中将地图的变换矩阵以当前点击的点为中心放大1.1倍，更新显示图形。消息响应的函数如下：
Function zoom(evt, scale)
{ // scale = 1.1;表示放大1.1倍
point = new GDPoint();
point.x = evt.clientX;
point.y = evt.clientY; //point为当前点击的坐标点 为屏幕坐标
absPoint = pointInvert(point);//转换为绝对最表
scale = curTransform.scale*scale; //设置当前的缩放系数
curTransform.scale = scale;
point1 = pointApply(absPoint);//绝对坐标应用当前的变换系数
curTransform.x += point.x-point1.x;
curTransform.y += point.y-point1.y;//缩放中心平移到当前点击的位置
matrix= trans2String(curTransform);//生成新的变换矩阵
maproot.setAttribute("transform",matrix);//应用新的变换矩阵
}
其他的如地图缩小、全图显示、区域放大、局部定位等功能与之类似，这里就不一一作介绍。
图层管理
SVG采用基于XML的DOM文档管理结构，很方便实现层次管理，其组
下面的图显示GIS系统中的图层控制界面。
图标管理
图标表示的是信息点的信息，在GIS系统中广泛使用图标来标志信息点，其特点是图标引用相同的预定义的图形组。增加新的图标只是在不同的位置增加一个引用而已。在不增加实际的绘图数据。减少了数据量；同时，如果要修改某类信息的显示图标，只要修改预定义的图标即可，方便了管理。在WebGIS系统中定义了很多类型的图标。下图表示用一个圆和一个路径对象定义的图标,其名称为symbol_1,并定义在defs标签内，供图标对象引用：
…
下图为图标的实例，这两个图标引用上面定义的symbo_1的图标：图标在地图上的实际位置为transform指定的位置分别是(200,100),(200,200)。
如果要增加图标，只要添加新的引用(use)对象即可。这些对象可以有自己的属性，表示不同的信息点，但其显示的形状是预定义的，如果修改了预定义的形状，这些图标的显示结果同样改变。下图为在WebGIS中定义的几种图标及显示效果(蓝色的为图标)。
地图属性的定义
SVG图形数据本身只包含用来实现矢量图形显示的信息，如坐标点、变换矩阵、显示样式等信息，不能满足GIS系统的需要。但由于SVG是基于XML格式的，除了使用其内置的属性外，可以对其属性进行任意扩充，以实现自定义的功能。在SVG图形中，对象的属性id是用来标志唯一对象的编号，可以通过SVG文档对象的getElementById()函数来获取指定的对象。WebGIS采用id好作为图形内在的标示，而自定义其他的属性如名称(name),提示信息(tip)等来存储其GIS属性。获取或赋值这些属性的方法是调用getAttribute及setAttribute函数。如在WebGIS中一个路径是这么定义的。
那么通过ID "ROAD:101" 获取路径对象后，就可以获取其属性Name及Tip的信息，执行显示提示信息等功能。
总结
本文对用SVG技术实现基于Web的GIS的关键技术做了简单的介绍，通过对SVG技术的把握和应用，作者成功地开发了WebGIS系统，说明SVG技术完全能胜任某些行业GIS应用的需要，从长远来看，SVG技术代表网络矢量化图形的发展方向，必将在包括 GIS在内的各个方面得到广泛应用。
SVG入门
SVG入门,SVG实例,SVG教程与设计,SVG应用
SVG中国 - 首页
An SVG framework in C# and an SVG-GDI bridge...
AJAX和SVG结合实现实时监控图表 - SVG中国
SVG的简单实例介绍
SVG的简单实例介绍
svg transform 坐标变换方式
AJAX SVG 实现实时监控图表
利用SVG建立WebGIS的优越性
常用Web图像格式简述：png/svg
AJAX SVG 实现实时监控图表
SVG中文乱码解决步骤与方法
入门 -
SVG Authoring Guidelines[转] - Avlee‘s Blog - 博客园
基于SVG的地图符号设计与实现
面向图形可扩展矢量图形规范：SVG
基于SVG新技术的油田轻型WebGIS平台
用SVG技术实现基于Web的GIS
SVGX.ORG Links to SVG - Scalable Vector Graph...
基于SVG新技术的油田轻型WebGIS平台
面向图形可扩展矢量图形规范：SVG
领先的SVG和矢量图形应用服务提供商——.Net矢量图形控件VectorControl,完...
鲁班人[2008]-可截取ANSYS图形为SVG矢量图的宏:Grph2SVG