首页 > 代码库 > Notes:SVG(1)

Notes:SVG(1)

2024-08-20 01:06:42   218人阅读

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>

表现如下所示

技术分享

 

Notes:SVG(1)


联系
我们