SVG代表可缩放矢量图形（Scalable Vector Graphics）。它是一种用于描述二维图形的语言。
SVG是基于矢量的图形系列的一部分。它们不同于基于光栅的图形。SVG图形在缩放或者调整大小时不会失去任何质量。
SVG主要用于矢量类型图，如饼图、X、Y坐标系中的二维图等。
SVG的优点
- SVG图像是可扩展和缩小的。
- 源文件大小趋于较小，因此SVG图形负载更快，使用较少的带宽。
- 使用要在源文件中存储的数学公式创建SVG图形，因为我们不必存储每个单独像素的数据。
HTML5中的SVG示例
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"
<title>HTML5 SVG Elements</title>
</head>
<body>
<h2>HTML5 SVG polygon</h2>
<svg xmlns="http://www.w3.org/2000/svg" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"style="fill:blue;stroke:gray;stroke-width:5">
</svg>
<h2>HTML5 SVG Circle</h2>
<svg id="svgcir" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" cx="50" cy="50" r="50" fill="blue"
</svg>
<h2>HTML5 SVG Line</h2>
<svg id="svgline" height="150" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="150" y2="100"style="stroke:blue;stroke-width:3"
</svg>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgrect" height="150" xmlns="http://www.w3.org/2000/svg">
<rect id="redrect" width="200" height="100" fill="blue"
</svg>
</body>
</html>
HTML5中的SVG语法
SVG支持以下语法：
<svg xmlns="http://www.w3.org/2000/svg"> ....... </svg>
SVG和画布Canvas之间的比较
| SVG | 画布 |
|---|---|
| 分辨率无关 | 分辨率相关 |
| 它提供对事件处理程序的支持 | 不支持事件处理程序 |
| 不适合游戏应用 | 非常适合游戏应用 |
日期：2020-04-11 23:04:20 来源：oir作者：oir