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>

结果如下

Notes:SVG(1)

也可以直接在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>

表现如下所示

Notes:SVG(1)

相关文章