前言:SVG是一种用于描述图形的XML语法。
与其他图像格式(如:GIF,JPEG,PNG)相比,使用 SVG 的优势在于:
● SVG 可被非常多的工具读取和修改(比如记事本)
● SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
● SVG 是可伸缩的
● SVG 图像可在任何的分辨率下被高质量地打印
● SVG 可在图像质量不下降的情况下被放大
● SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
● SVG 可以与 JavaScript 技术一起运行
● SVG 是开放的标准
● SVG 文件是纯粹的 XML
一个简单的SVG文件如下所示:
// SVG图形
<svg xmlns="http://www.w3.org/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>