SVG 标签

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，用于描述二维图形和图形应用程序。它是 Web 技术的重要组成部分，可用于制作动态交互式图形，使其在不同的屏幕分辨率下呈现清晰锐利的效果。

SVG 可以通过包含在 HTML 内部或者引用外部文件的方式加入到 HTML 文档中。常用的 SVG 标签包括：

<svg>

<svg> 标签用于创建一个新的 SVG 文档片段，并为其定义宽度和高度。可使用它的属性设置文档的宽高、背景颜色等。

```html
<svg width="200" height="200">
  <!-- 在此处定义SVG图形 -->
</svg>

## `<rect>`

`<rect>` 标签用于创建一个矩形，并可通过属性设置其位置、宽高、样式等。

```markdown
```html
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="red" stroke="black" stroke-width="3" />
</svg>

## `<circle>`

`<circle>` 标签用于创建一个圆形，并可通过属性设置其位置、半径、样式等。

```markdown
```html
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="green" stroke="black" stroke-width="3" />
</svg>

## `<path>`

`<path>` 标签用于创建一个路径，可用于绘制直线、曲线、圆弧等各种复杂的形状。

```markdown
```html
<svg width="200" height="200">
  <path d="M10 10 H 90 V 90 H 10 Z" fill="blue" stroke="black" stroke-width="3" />
</svg>

## `<text>`

`<text>` 标签用于添加文本，并可通过属性设置其位置、字体、大小等。

```markdown
```html
<svg width="200" height="200">
  <text x="50" y="100" font-size="20" font-family="Arial" fill="purple">Hello World!</text>
</svg>

## `<image>`

`<image>` 标签用于添加图片，并可通过属性设置其位置、宽高、链接等。

```markdown
```html
<svg width="200" height="200">
  <image x="50" y="50" width="100" height="100" xlink:href="image.jpg" />
</svg>

这些标签只是 SVG 标签的冰山一角。通过组合使用这些标签，可以创造出更加丰富多彩的 SVG 图形。