了解SVG网页矢量图

来源：互联网发布：数组去重js 编辑：程序博客网时间：2024/04/30 10:45

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. 
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名字空间，这种方式是功能最强大，最具有灵活性，我们在以后的文章里将详细探讨。