Notes:SVG(1)

SVG，"Scalable Vector Graphics"可伸缩矢量图形，基于可扩展标记语言，用于描述二维矢量图形的一种图形格式。

SVG是纯粹的XML，可以使用以下方法插入到HTML中：

使用<iframe>元素来嵌入SVG图像
使用<img>元素来嵌入SVG图像
将SVG图像作为背景图像嵌入
直接使用<svg>元素
使用<embed>元素来嵌入SVG图像
使用<object>元素来嵌入SVG图像

假设有一个如下所示的SVG文件，名为test.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">//这里xmlns是必须的
    <rect  width="100%" height="100%" style="fill:cornflowerblue" />
</svg>

SVG的xmlns声明空间必须指定，否则将不会解析成svg标签。

编写一个html文件，内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="test.svg">
</body>
</html>

结果如下

也可以直接在html5文档中使用svg标签，如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <svg width="200" height="200">
        <circle cx="100" cy="100" r="50" style="fill:url(#orange_red)" />
        <defs>
            <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="20%" style="stop-color:rgb(255,255,0);
                stop-opacity:1"/>
                <stop offset="80%" style="stop-color:rgb(255,0,0);
                stop-opacity:1"/>
            </linearGradient>
        </defs>
    </svg>
</body>
</html>

表现如下所示