1、背景SVG是Scalable Vector Graphics的缩写，意为可缩放矢量图形。1998年，万维网联盟成立了一个工作组，研发一种通过XML来表现矢量图形的技术——SVG！由于SVG也是一种XML文件，所以SVG也继承了XML的开放性、可移植性和交互性的优点。如今几乎所有主流的浏览器都支持SVG，大家可以从 这里 得到更多的兼容信息，其中包括：使用或者元素来显示基本的SVG图形；使用来显示SVG图形；将SVG图形应用为CSS背景图；直接在HTML文档中使用标签（需要HTML5支持）；对使用CSS或者外部对象元素的HTML元素使用SVG变换、滤镜等特效；对SVG对象使用类似photoshop的效果，包括模糊和色彩处理；对SVG图像使用动画；使用SVG格式的字体；2、图形系统目前在计算机上主要有两种形式来表现图形，一种是栅格图形，另一种是矢量图形。2.1 栅格图形在栅格图形中，图像用像元或者像素的矩形阵列来表示，每个像素代表一个RGB颜色值或者是一个指向颜色列表的索引。通常以一种压缩格式来存储（如JPEG, GIF, PNG等），由于现在大部分的显示设备都是栅格设备，所以显示这些图形只需要做解压处理就可以了。2.2 矢量图形在矢量图形系统中，图形被描述为一些列的形状，它是特定坐标的集合。显示矢量图形需要按照特定的命令来绘制这些坐标，然后显示在屏幕上。矢量图形是对象，而不是一系列的像素。它们可以改变颜色、形状还有大小，图形中的文字都是可以被检索的，这些与栅格图形都有很大的不同。2.3 为什么要使用矢量图形绝大部分情况下，我们都在使用栅格图形，而且创建栅格图形的工具更容易获得和使用。但是矢量图形有一个栅格图形无法替代的优势：无论如何的缩放，矢量图形都不会失真。这使得当我们需要具有精确测量以及看清图形细节的放大能力时，矢量图形显得尤其重要。3、创建一个SVG图形下面首先创建一个SVG图形，这里我并不会详细的讲解各个标签，只是先给一个感性的认识，随后的章节会对SVG的语法做详细的介绍。看代码：1 2 3 4 cat 5 Stick Figure of a Cat 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Cat22 23 可能大家已经看出来了，这实际上是一个标准的XML文件，在浏览器中浏览，会看到一只猫的图案，如下图：另外，由于很多人习惯了HTML5式的文档模式，即1 2 3 4 5 6 7 8 9 10 将命令空间省略，这里强烈的建议写SVG的时候保留命名空间，即xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"后面你会看到因为忽略命令空间而引发的异常。4、应用SVG图形如何才能够在HTML文档中引入SVG呢？一般有一下几种方法包含在标签内部这是一种最直接的方法，但是需要浏览器支持HTML5中的标签，如：1 2 3 4 5 SVG DEMO 6 7 8 9 cat10 Stick Figure of a Cat11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 Cat26 27 28 通过或者标签嵌入其中DEMO1.svg是先前创建的SVG文件。1 2 3 4 5 SVG DEMO 6 7 8 9 10 11 通过标签的src属性1 2 3 4 5 SVG DEMO 6 7 8 9 10 通过CSS：background: url(...)1 2 3 4 5 SVG DEMO 6 13 14 15 16 17
