SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的矢量图形格式，其内容通过标签定义，具有缩放不失真的特点，常用于图标、图表、简单图形等场景。以下是 SVG 标签的基本使用说明：
<svg> 是 SVG 的根标签，用于定义整个图形的画布，所有图形元素都需放在 <svg> 内部。
常用属性：
width/height：定义画布的显示尺寸（单位：px、% 等，默认 px）。viewBox：定义图形的 “可视区域”，格式为 x y width height（坐标原点、宽度、高度），用于控制缩放比例（关键属性，确保矢量特性）。xmlns：XML 命名空间，标准值为 http://www.w3.org/2000/svg（部分环境可省略，但规范建议添加）。
SVG 提供了多种预定义的图形标签，直接通过属性定义形状。
用于绘制矩形（含圆角矩形）。属性：
x/y：矩形左上角的坐标（相对于 SVG 画布原点，原点在左上角）。width/height：矩形的宽和高。rx/ry：圆角的水平 / 垂直半径（可选，值为 0 则是直角）。fill：填充色（默认黑色，none 为无填充）。stroke：描边色（默认无，需显式设置才会显示边框）。stroke-width：描边宽度（单位 px）。
示例：
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg"> <!-- 蓝色圆角矩形，黑色边框 --> <rect x="20" y="20" width="100" height="80" rx="10" fill="blue" stroke="black" stroke-width="2"/> </svg>
用于绘制正圆。属性：
cx/cy：圆心的坐标。r：圆的半径。fill/stroke/stroke-width：同矩形。
示例：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 红色圆形，绿色边框 --> <circle cx="100" cy="100" r="50" fill="red" stroke="green" stroke-width="3"/> </svg>
用于绘制椭圆（非正圆）。属性：
cx/cy：椭圆中心坐标。rx：水平半径（长轴一半）。ry：垂直半径（短轴一半）。
示例：
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 黄色椭圆，紫色边框 --> <ellipse cx="150" cy="100" rx="100" ry="60" fill="yellow" stroke="purple" stroke-width="2"/> </svg>
用于绘制直线段。属性：
x1/y1：线段起点坐标。x2/y2：线段终点坐标。stroke/stroke-width：必须设置（否则线段不可见）。
示例：
%E5%88%B0(170%2C120)%E7%9A%84%E8%93%9D%E8%89%B2%E7%BA%BF%E6%AE%B5%20--%3E%0A%20%20%3Cline%20x1%3D%2230%22%20y1%3D%2230%22%20x2%3D%22170%22%20y2%3D%22120%22%20stroke%3D%22blue%22%20stroke-width%3D%224%22%2F%3E%0A%3C%2Fsvg%3E)
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg"> <!-- 从(30,30)到(170,120)的蓝色线段 --> <line x1="30" y1="30" x2="170" y2="120" stroke="blue" stroke-width="4"/> </svg>
用于绘制闭合的多边形（自动连接首尾点）。属性：
points：多个顶点的坐标，格式为 x1,y1 x2,y2 x3,y3 ...（空格分隔点，逗号分隔坐标）。
示例：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 三角形（3个顶点） --> <polygon points="100,20 20,150 180,150" fill="orange" stroke="black"/> </svg>
用于绘制不闭合的折线（不自动连接首尾点）。属性：points（同多边形）。
示例：
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg"> <!-- 4个点的折线 --> <polyline points="20,50 60,100 100,30 140,80" fill="none" stroke="green" stroke-width="3"/> </svg>
通过 “路径命令” 定义任意复杂形状，是 SVG 中最强大的元素。核心属性：d（定义路径的命令字符串）。
常用命令（大小写区别：大写为绝对坐标，小写为相对前一点的坐标）：
M x y：移动到某点（不画线）。L x y：从当前点画直线到某点。C x1 y1 x2 y2 x y：三次贝塞尔曲线（控制点 1、控制点 2、终点）。Q x1 y1 x y：二次贝塞尔曲线（控制点、终点）。A rx ry rotation flag1 flag2 x y：弧线（半径、旋转角、方向参数、终点）。Z：闭合路径（连接当前点到起点）。
示例：
%E7%A7%BB%E5%8A%A8%EF%BC%8C%E7%94%BB%E7%9B%B4%E7%BA%BF%E5%88%B0(150%2C100)%EF%BC%8C%E5%86%8D%E7%94%BB%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF%E5%88%B0(100%2C50)%EF%BC%8C%E6%9C%80%E5%90%8E%E9%97%AD%E5%90%88%20--%3E%0A%20%20%3Cpath%20d%3D%22M%2050%20100%20L%20150%20100%20Q%20125%2030%20100%2050%20Z%22%20fill%3D%22pink%22%20stroke%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E)
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 从(50,100)移动，画直线到(150,100)，再画贝塞尔曲线到(100,50)，最后闭合 --> <path d="M 50 100 L 150 100 Q 125 30 100 50 Z" fill="pink" stroke="black"/> </svg>
- 矢量特性：缩放时不会模糊（区别于位图如 PNG/JPG）。
- 可交互：支持 JavaScript 事件（如点击、鼠标悬停）。
- 可嵌入：可直接写入 HTML、作为图片引用，或单独保存为
.svg 文件。
通过以上基本标签和属性，可快速绘制简单的 SVG 图形，复杂图形可结合路径命令和组合标签实现。
