SVG是“可缩放矢量图”（Scalable Vector Graphics）的缩写，是一种描述向量图形的XML格式的标记化语言。也就是说，SVG本质上是文本文件，格式采用XML，可以在浏览器中显示出矢量图像。由于结构是XML格式，使得它可以插入HTML文档，成为DOM的一部分，然后用JavaScript和CSS进行操作。

相比传统的图像文件格式（比如JPG和PNG），SVG图像的优势就是文件体积小，并且放大多少倍都不会失真，因此非常合适用于网页。

SVG图像可以用Adobe公司的Illustrator软件、开源软件Inkscape等生成。目前，所有主流浏览器都支持，对于低于IE 9的浏览器，可以使用第三方的 polyfills函数库 。

插入SVG文件

SVG插入网页的方法有多种，可以用在img、object、embed、iframe等标签，以及CSS的background-image属性。

上面是四种在网页中插入SVG图像的方式。

此外，SVG文件还可以插入其他DOM元素，比如div元素，请看下面的例子（使用了jQuery函数库）。

svg格式

SVG文件采用XML格式，就是普通的文本文件。

上面的svg文件，定义了三个圆，它们的cx、cy、r属性分别为x坐标、y坐标和半径。利用class属性，可以为这些圆指定样式。

.red { fill: red; /* not background-color! */ } .fancy { fill: none; stroke: black; /* similar to border-color */ stroke-width: 3pt; /* similar to border-width */ }

上面代码中，fill属性表示填充色，stroke属性表示描边色，stroke-width属性表示边线宽度。

除了circle标签表示圆，SVG文件还可以使用表示其他形状的标签。

上面代码中，line、rect、ellipse、polygon和path标签，分别表示线条、矩形、椭圆、多边形和路径。

g标签用于将多个形状组成一组，表示group。

SVG文件的JavaScript操作

获取SVG DOM

如果使用img标签插入SVG文件，则无法获取SVG DOM。使用object、iframe、embed标签，可以获取SVG DOM。

var svgObject = document.getElementById("object").contentDocument; var svgIframe = document.getElementById("iframe").contentDocument; var svgEmbed = document.getElementById("embed").getSVGDocument();

由于svg文件就是一般的XML文件，因此可以用DOM方法，选取页面元素。

// 改变填充色 document.getElementById("theCircle").style.fill = "red"; // 改变元素属性 document.getElementById("theCircle").setAttribute("class", "changedColors"); // 绑定事件回调函数 document.getElementById("theCircle").addEventListener("click", function() { console.log("clicked") });

读取svg源码

由于svg文件就是一个XML代码的文本文件，因此可以通过读取XML代码的方式，读取svg源码。

假定网页中有一个svg元素。

使用XMLSerializer实例的serializeToString方法，获取svg元素的代码。

var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));

将svg图像转为canvas图像

首先，需要新建一个img对象，将svg图像指定到该img对象的src属性。

var img = new Image(); var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); var DOMURL = self.URL || self.webkitURL || self; var url = DOMURL.createObjectURL(svg); img.src = url;

然后，当图像加载完成后，再将它绘制到canvas元素。

img.onload = function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); };

实例

假定我们要将下面的表格画成图形。

Date	Amount
2014-01-01	$10
2014-02-01	$20
2014-03-01	$40
2014-04-01	$80

上面的图形，可以画成一个坐标系，Date作为横轴，Amount作为纵轴，四行数据画成一个数据点。

参考链接

• Jon McPartland,An introduction to SVG animation

• Alexander Goedde,SVG - Super Vector Graphics

• Joseph Wegner,Learning SVG

• biovisualize,Direct svg to canvas to png conversion