什么是SVG？
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。此外SVG 是万维网联盟的标准，SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
SVG 形状
SVG 有一些预定义的形状元素，可被开发者使用和操作：
矩形
圆形
椭圆
线
折线
多边形
路径
SVG 渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。 在 SVG 中，有两种主要的渐变类型：
线性渐变放射性渐变
应用示例
<!DOCTYPE html>
<head>
<title>SVG
</title>
<meta charset="utf-8" />
<style>
h2 {
padding-left: 20px;
}
</style>
</head>
<body>
<h2>SVG
</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>
<svg width="400" height="400">
<defs>
<radialGradient id="radia1" cx="0" cy="0" r="0.7">
<stop offset="0%" stop-color="red"></stop>
<stop offset="50%" stop-color="yellow"></stop>
<stop offset="100%" stop-color="green"></stop>
</radialGradient>
<radialGradient id="r1" xlink:href="#radia1" spreadMethod="reflect"></radialGradient>
</defs>
<rect x="260" y="40" height="100" width="100" fill="url(#r1)" stroke="black" stroke-width="2"></rect>
</svg>
```
