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>
表现如下所示
