HTML <svg> 标签用于在网页中插入矢量图形。SVG（Scalable Vector Graphics）是一种基于 XML 的图像格式，可以在 Web 上显示分辨率独立的二维图形。
<svg> 标签简介
<svg> 元素定义了一个 SVG 画布，其中你可以绘制各种形状、线条和图像。它是一个容器元素，用于包含 SVG 代码。
<svg> 标签的基本语法
<svg width="500" height="200">
<!-- SVG 形状和图像代码 -->
</svg>
在上面的示例中，width 属性设置了 SVG 画布的宽度为 500 个单位，height 属性设置了高度为 200 个单位。你可以根据需要调整这些值。
<svg> 标签示例：绘制一个矩形
下面是一个使用 <rect> 元素在 SVG 画布上绘制矩形的示例：
<svg width="200" height="100">
<rect x="50" y="20" width="100" height="60" fill="blue"/>
</svg>
在这个示例中，我们绘制了一个填充蓝色的矩形。其左上角坐标为 (50, 20)，宽度和高度分别为 100 和 60 单位。
<svg> 标签示例：绘制一条路径
下面是一个使用 <path> 元素在 SVG 画布上绘制路径的示例：
<svg width="200" height="180">
<path d="M10 75 Q 50 15, 90 75 T 170 75" stroke="green" fill="transparent"/>
</svg>
在这个示例中，我们绘制了一条绿色的曲线。路径数据（d 属性）使用 SVG Path Mini Language 指定。
<svg> 标签的优势和注意事项
- 优势：SVG 图形是基于 XML 的，因此它们可以被搜索、索引、脚本化或样式化。它们在不同分辨率下都能保持清晰，并且支持互动性和动画效果。
- 注意事项：SVG 图形对于复杂的图形可能会导致较大的文件大小和渲染时间。对于简单的图形，使用 SVG 是一个很好的选择，而对于复杂的图形，你可能需要考虑使用 raster（栅格）图像格式或者其他优化技术。
结论
HTML <svg> 标签提供了一种在 Web 上绘制矢量图形的强大方法。通过学习如何使用 SVG，你可以创建高质量、分辨率独立且互动性强的图形，为网页增添美观和功能。