# SVG规范常识

## 基础规范

| 要求 | 说明 | 正确示例 | 错误示例 |
|:-----|:-----|:---------|:---------|
| 命名空间 | 每个SVG必须包含 `xmlns` | `xmlns="http://www.w3.org/2000/svg"` | 缺少xmlns |
| viewBox | 必须包含viewBox定义 | `viewBox="0 0 24 24"` | 没有viewBox |
| 标签闭合 | 所有标签必须闭合 | `<circle cx="12" cy="12" r="10"/>` | 不闭合 |
| 颜色值 | 使用HEX或命名色值 | `stroke="#1890FF"` | 随意色值 |

## 尺寸体系

| 图标级别 | 尺寸(px) | viewBox | 适用场景 |
|:---------|:---------|:--------|:---------|
| 迷你图标 | 12×12 | `0 0 12 12` | 标签、内联文本 |
| 小图标 | 16×16 | `0 0 16 16` | 列表项、菜单 |
| 常规图标 | 24×24 | `0 0 24 24` | 操作按钮、导航 |
| 大图标 | 32×32 | `0 0 32 32` | 功能入口 |
| 较大图标 | 48×48 | `0 0 48 48` | 特色功能展示 |
| 特大图标 | 64×64 | `0 0 64 64` | 空状态、大模块 |

## 样式规范

| 属性 | 常用值 | 说明 |
|:-----|:-------|:-----|
| `stroke-width` | `2`（图标）、`1`（细节） | 线条粗细 |
| `stroke` | `currentColor` / `#xxx` | 线条颜色 |
| `fill` | `none` / `#xxx` | 填充颜色 |
| `stroke-linecap` | `round` / `butt` | 线端点样式 |
| `stroke-linejoin` | `round` / `miter` | 线连接点样式 |
| `stroke-opacity` | `0.5`–`1` | 线条不透明度 |

## 常用元素

| 元素 | 用途 | 关键属性 |
|:-----|:-----|:---------|
| `<path>` | 自定形状 | `d="M... L... Z"` |
| `<circle>` | 圆形 | `cx cy r` |
| `<rect>` | 矩形 | `x y width height rx ry` |
| `<line>` | 线条 | `x1 y1 x2 y2` |
| `<polyline>` | 折线 | `points="x,y x,y"` |
| `<g>` | 分组 | `transform` |
| `<text>` | 文字 | `x y font-size font-family` |

## 兼容性注意事项

- 避免使用SVG 2.0新特性（如`<mesh>`），浏览器支持不全面
- 避免使用复杂滤镜（`<filter>`），旧浏览器不支持
- 图标用 `fill="none"` + `stroke="currentColor"` 支持主题切换
- viewBox保持正方形比例（宽高比1:1），避免缩放变形