中文XML论坛--（转贴）csdn上的高手给初学svg同仁的初级教程

SVG：可升级矢量图形

孟宪会
01-12-30 上午 11:21:49

--------------------------------------------------------------------------------

SVG是一种采用XML来描述二维图形的语言。SVG可以构造三种类型的图形对象：矢量图形、位图图象和文字。图形对象可以被组化、样式化、变形和重新组合，包括图象嵌套、变形处理、剪辑路径、Alpha蒙板、滤镜特效和模板对象。
SVG图形可以是动态的、可交互性的。动画通过直接声明（比如在SVG里嵌入SVG动画元素）或通过脚本来进行定义或触发。
SVG通过使用脚本语言来完成比较复杂的应用，脚本语言调用SVG对象模型(SVG Document Object Model)来访问或控制所有的元素、属性和属性值。事件处理器如onmouseover、onclick等可以应用到SVG图形对象上，由于SVG和其它Web标准完全兼容和同步，如XML，CSS2，XSLT，DOM2，SMIL，XLINK，HTML等。因此，在同一Web页面上，有些特性，如脚本编程等，可以同时应用在XHTML和SVG元素上。
SVG不但可以表现图象，还可以表现文字、音频等其它信息，对于那些有视觉障碍的人，可以通过可替换的方法把图象替换为音频信息，这样对那些有视觉障碍的人，也能够得到SVG所表现的信息。另外，对那些手持设备、车载设备、无线设备来说，它们的屏幕一般都比较小，而且显示分辨率低，SVG的矢量特性也可以让这些设备清楚地浏览SVG图象信息，这都是目前的位图图象所不能做到的。对于那些不能显示图象的显示设备，SVG也有可替代的显示方法。因此，SVG格式的图象具有很高的可访问性。
SVG的含义
SVG是可升级矢量图形（Scalable Vector Graphics）的简称。
可升级（Scalable）意味着统一地增加或减少。对图象来说，可升级意味着图象尺寸并不限定固定的大小，对互连网（Web）来说，可升级意味着一个特殊的技术，它能够增加文件数量、用户数量和应用的种类。SVG作为Web上的一个技术之一，可升级含有这两方面的意思。
SVG图象可升级到不同的显示的分辨率，例如：相同尺寸的SVG图象，打印输出使用高分辨率，而在屏幕显示时可以使用不同的分辨率。同一个SVG图象能够以不同的尺寸放到同一页面上，也可以被不同的其它页面所使用。我们可以放大一个SVG图象，来了解其精美的细节信息。通过下面图形的对比可清楚地看到差别：

{{插入图象tu.jog}}
SVG是可升级的，原因还在于：同一段SVG内容，既可以是独立的图象，也可以被引用到一个页面，也可以嵌入到另外的SVG图象中。因此，一个复杂的SVG图象可以有多部分组成，也可以由多人共同完成。符号、标记、字体能够重复利用图形的某些组成部分，这样可以充分利用HTTP的缓存优势。
矢量图象包含有诸如直线和曲线等几何对象。这相对于以象素保存信息的位图格式的图象（如PNG、JPEG）来说有更大的灵活性。矢量格式图象的最大好处就是，它可以和位图图象集成在一起，也可以把他们和矢量信息结合在一起以产生更加完美的图象。SVG也不例外。
由于所有的显示器都是基于点阵的，位图图象和矢量图象的差别就归结为他们是在客户端还是在服务器端进行图象展现处理；SVG能够控制图象展现的过程，不致于出现粗糙或带锯齿的图象。SVG还能够提供客户端的滤镜效果。
大多数XML语法描绘的都是文字信息或原始数据，他们不能提供图象的能力，SVG能够提供丰富的、结构化的矢量和矢量与图象混合的图象信息。
XML是W3C的推荐标准，用于结构化的信息交换，已经得到广泛的普及和应用。SVG是建立在此基础上的，有很明显的优势，比如：广泛的国际化基础，强大的结构化能力，以及对象模型等。
样式单能够很好地控制文字的外在表现方式,它的灵活性、快速下载和易于维护的特性早已被人们接受，SVG把这种技术扩展到了图象世界中。脚本编程、DOM对象和CSS样式单的组合常被人们称作Dynamic HTML，广泛应用在动画制作、交互性和外在的表现效果中，SVG也可以借助脚本语言进行操纵文档对象和样式单。
SVG的图形对象
使用XML，可以很方便地建立模型。对文本格式的语法来说，模型通常是建立在段落级和短语级，而不是在独立的名词、副词或者是音素上。SVG是在图形对象级建立图象模型而不是独立的许多点。
SVG提供了一个通用的path元素，可以用来创建各种类型的图形对象，但同时也提供了一些基本的形状元素如矩形和椭圆等，这些基本形状对编写代码是非常方便的，也可以应用在复杂的路径描绘中。SVG提供对坐标系统的精确控制，图象对象的定义和变换都是在这个坐标系统之中。
SVG中的符号
SVG也能够提供一些象电子、绘画和流程图等使用的标准符号，但目前的版本并没有提供这些。SVG允许用户创建和共享他们的符号库，设计者能够清楚地知道他们使用的符号的外在表现，而不必担心那些不支持的符号。符号也可以以不同的尺寸和角度使用，也可以为了达到与其他的图形对象相互组合而进行重新定义样式。
SVG的展现效果
许多Web中使用的图象都是依靠图形工具包来创建模糊、阴影、光线等效果的，要在客户端展现这些效果是不可思义的。SVG可以单独地或以组合的方式对滤镜效果进行描述，这些效果可以用在客户端，当SVG图象展现的时候展现这些效果，而图象仍可以以图象的分辨率的进行缩放和显示。
SVG的文字
丰富的图形效果有时候会在很大程度上依赖于所使用的特定的文字和文字间距。大多数情况下，图象设计者为了防止图象上的被别人替换，往往会把文字转换成图象，原来的文字也就变成了不可搜索和访问的了。SVG的标准制定者在听取了设计者们的意见后，在SVG中保留了文字元素，这样，文字和图象都被分别进行展现。
SVG的动画
动画可以通过脚本语言操纵文档中元素来实现，但脚本的编辑和交换通常很麻烦。SVG和SYMM工作组经过集思广益，共同在SVG中定义了动画元素，这样，在网页图形中常用的动画效果就可以在SVG中使用。
以上都是SVG图象中的基本概念，我们将在以后的篇幅里陆续介绍一些这方面的例子。


	W 3 C h i n a ( since 2003 ) 旗下站点苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》	78.003ms