前言：SVG是一种用于描述图形的XML语法。

与其他图像格式(如：GIF,JPEG,PNG)相比，使用 SVG 的优势在于：

● SVG 可被非常多的工具读取和修改（比如记事本）

● SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。

● SVG 是可伸缩的

● SVG 图像可在任何的分辨率下被高质量地打印

● SVG 可在图像质量不下降的情况下被放大

● SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

● SVG 可以与 JavaScript 技术一起运行

● SVG 是开放的标准

● SVG 文件是纯粹的 XML

一个简单的SVG文件如下所示：

// SVG图形<svg xmlns="/2000/svg" viewBox="0 0 1100 1100> // 图形的坐标系<defs>// 设置后面要用到的一些定义<linearGradient id="fade"> // 将渐变色命名为"fade"<stop offset="0" stop-color="#008"/> // 颜色设置为深蓝色<stop offset="100%" stop-color="#ccf"/> // 渐变到浅蓝 </linearGradient> </defs>// 画一个具有宽的黑色边框并且渐变色为填充色的矩形<rect x="150" y="300" width="800" height="300"stroke="black" stroke-width="25" fill="url(#fade)"></svg>