HTML <svg> 标签用于包含 SVG 图形。SVG 主要用于矢量图，例如饼图和具有 X、Y 坐标系等的 2D 图形。
XML 文本文件可用于定义 SVG 图像及其行为。因此，SVG图像可以作为XML文件创建和编辑，但一般来说，像 inkspace 这样的绘图程序是生成它的首选。它描述了 XML 中的混合矢量和二维矢量图形。
语法
<svg> ...... </svg>
属性
<svg> 标签支持 HTML 的 全局属性 和 事件属性。还有一些特定的属性，这些属性在下面列出:
| 属性 | 值 | 描述 |
|---|---|---|
| baseProfile | string | 本部分概述了作者认为正确呈现内容所需的最低 SVG 语言配置文件。SVG2 之后不支持。 |
| height | length percentage |
指示矩形的垂直长度。 |
| preserveAspectRatio | none xMinYMin xMidYMin xMaxYMin xMinYMid xMidYMid xMaxYMid xMinYMax xMidYMax xMaxYMax meet slice |
指定将 SVG 片段插入到具有不同纵横比的容器中时所需的变形。 |
| version | number | 指定用于创建元素内部内容的 SVG 版本。 |
| viewbox | list-of-numbers | 对于当前 SVG 片段，定义 SVG 视口的边界。 |
| width | length percentage |
表示矩形的宽度。 |
| x | length percentage |
确定 SVG 容器的 X 坐标。最外层的 SVG 元素不受影响。 |
| y | length percentage |
确定 SVG 容器的 Y 坐标。最外层的 SVG 元素不受影响。 |
<svg> 标签示例
下面的示例将说明 <svg> 标签的用法。在哪里、何时以及如何使用 <svg> 标签，以及我们如何使用 CSS 操作 <svg> 标签。
创建矩形 SVG 元素
让我们看一下以下示例，我们将使用 <svg> 标签绘制一个矩形。
<!DOCTYPE html>
<html>
<body>
<svg width="250" height="150">
<rect width="200" height="100" style="fill:#DE3163;stroke-width:8;stroke:#D5F5E3;" />
</svg>
</body>
</html>
创建方形 SVG 元素
考虑到另一种情况，我们要画一个带圆角的正方形。
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="400">
<rect x="25" y="25" rx="20" ry="20" width="200" height="200"
style="fill:#58D68D;stroke:#7D3C98;stroke-width:3;opacity:0.5" />
</svg>
</body>
</html>
使用 svg 标签创建徽标
以下示例，我们将在其中绘制 SVG 徽标。
<!DOCTYPE html>
<html>
<body>
<svg height="200" width="600">
<defs>
<linearGradient id="QikepuCom" x1="1%" y1="1%" x2="50%" y2="1%">
<stop offset="0%" style="stop-color:white;
stop-opacity: 1" />
<stop offset="100%" style="stop-color: #52BE80;
stop-opacity: 1" />
</linearGradient>
</defs>
<ellipse cx="210" cy="100" rx="120" ry="81" fill="url(#QikepuCom)" />
<text fill="#17202A" font-size="20"
font-family="verdana" x="121" y="111">
QikepuCom
</text>
</svg>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
