什么是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也可以借助脚本语言进行操纵文档对象和样式单。