学习SVG

0 收集到的链接：

W3SCHOOL的SVG教程

PerfectSVG

The Secret Origin of SVG

Future Of SVG

SVG中国（强力推荐收藏）

纪元论坛SVG

用SVG表示地图数据

 

SVG是XML来描述二维图形的语言。SVG可以构造3种类型的图形对象：矢量图形、位图图象和文字。图形对象可被组化、样式化、变形和重组，包括图象嵌套、变形处理、剪辑路径、Alpha蒙板、滤镜特效和模板对象。

1 SVG概述
　　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图像信息，这都是目前的位图图像所不能做到的。

2 SVG是什么?
　　SVG是可升级矢量图形（Scalable Vector Graphics）的简称。
　　可升级（Scalable）意味着统一地增加或减少。对图像来说，可升级意味着图像尺寸并不限定固定的大小，对互联网（Internet）来说，可升级意味着一个特殊的技术，它能够增加文件数量、用户数量和应用的种类。SVG作为Web上的一个技术之一，可升级含有这两方面的意思。
　　SVG图像可升级到不同的显示的分辨率，例如：相同尺寸的SVG图像，打印输出使用高分辨率，而在屏幕显示时可以使用不同的分辨率。同一个SVG图像能够以不同的尺寸放到同一页面上，也可以被不同的其他页面所使用。我们可以放大一个SVG图像，来了解其精美的细节信息。
　　SVG是可升级的，原因还在于：同一段 SVG内容，既可以是独立的图像，也可以被引用到一个页面，也可以嵌入到另外的SVG图像中。因此，一个复杂的SVG图像可以有多部分组成，也可以由多人共同完成。符号、标记、字体能够重复利用图形的某些组成部分，这样可以充分利用HTTP的缓存优势。
　　矢量图像包含有诸如直线和曲线等几何对象。这相对于以像素保存信息的位图格式的图像（如PNG、JPEG）来说有更大的灵活性。矢量格式图像的最大好处就是，它可以和位图图像集成在一起，也可以把他们和矢量信息结合在一起以产生更加完美的图像。SVG也不例外。
　　由于所有的显示器都是基于点阵的，位图图像和矢量图像的差别就归结为他们是在客户端还是在服务器端进行图像展现处理；SVG能够控制图像展现的过程，不至于出现粗糙或带锯齿的图像。SVG还能够提供客户端的滤镜效果。
　　大多数XML语法描绘的都是文字信息或原始数据，他们不能提供图像的能力，SVG能够提供丰富的、结构化的矢量和矢量与图像混合的图像信息。
　　XML是W3C的推荐标准，用于结构化的信息交换，已经得到广泛的普及和应用。SVG是建立在此基础上的，有很明显的优势，比如：广泛的国际化基础，强大的结构化能力，以及对象模型等。
　　样式单能够很好地控制文字的外在表现方式,它的灵活性、快速下载和易于维护的特性早已被人们接受，SVG把这种技术扩展到了图像世界中。脚本编程、 DOM对象和CSS样式单的组合常被人们称作Dynamic HTML，广泛应用在动画制作、交互性和外在的表现效果中，SVG也可以借助脚本语言进行操纵文档对象和样式单。

3 SVG的图形对象
　　使用XML，可以很方便地建立模型。对文本格式的语法来说，模型通常是建立在段落级和短语级，而不是在独立的名词、副词或者是音素上。SVG是在图形对象级建立图像模型而不是独立的许多点。
　　SVG提供了一个通用的path元素，可以用来创建各种类型的图形对象，但同时也提供了一些基本的形状元素如矩形和椭圆等，这些基本形状对编写代码是非常方便的，也可以应用在复杂的路径描绘中。SVG提供对坐标系统的精确控制，图像对象的定义和变换都是在这个坐标系统之中。

3.1 SVG中的符号
　　SVG也能够提供一些像电子、绘画和流程图等使用的标准符号，但目前的版本并没有提供这些。SVG允许用户创建和共享他们的符号库，设计者能够清楚地知道他们使用的符号的外在表现，而不必担心那些不支持的符号。符号也可以以不同的尺寸和角度使用，也可以为了达到与其他的图形对象相互组合而进行重新定义样式。
3.2 SVG的展现效果
 　　许多Web中使用的图像都是依靠图形工具包来创建模糊、阴影、光线等效果的，要在客户端展现这些效果是不可思议的。SVG可以单独地或以组合的方式对滤镜效果进行描述，这些效果可以用在客户端，当SVG图像展现的时候展现这些效果，而图像仍可以以图像的分辨率的进行缩放和显示。

3.3 SVG的文字
 　　丰富的图形效果有时候会在很大程度上依赖于所使用的特定的文字和文字间距。大多数情况下，图像设计者为了防止图像上的被别人替换，往往会把文字转换成图像，原来的文字也就变成了不可搜索和访问的了。SVG的标准制定者在听取了设计者们的意见后，在SVG中保留了文字元素，这样，文字和图像都被分别进行展现。

3.4 SVG的动画
 　　动画可以通过脚本语言操纵文档中元素来实现，但脚本的编辑和交换通常很麻烦。SVG和SYMM工作组经过集思广益，共同在SVG中定义了动画元素，这样，在网页图形中常用的动画效果就可以在SVG中使用。