什么是SVG网页矢量图

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最有竞争力的一面。   
SVG的文档结构   

SVG可以有许多方式来组成Web文档:可以以独立的SVG页面;可以嵌入到页面中;也可以被一个带名字空间的XHTML文档使用,这一点就象XML文档相似.下面先看看独立的SVG页面的例子:   
1. <?xml version="1.0" standalone="no"?>   
2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"   
" 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 "-//W3C//DTD HTML 4.0 Transitional//EN">   
<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名字空间,这种方式是功能最强大,最具有灵活性,我们在以后的文章里将详细探讨。 

你可能感兴趣的:(web矢量绘图,webgis地理信息,工作流设计器,svg矢量绘图,vml设计器)