SVG 设计
分支技能 属于设计领域；可通过其所属领域或名称直接调用。
首先明确图形在品牌或界面中的作用。根据应用场景选择合适的构图、轮廓、比例、排版和颜色，如果存在既定的视觉方向，则予以保留。然后将设计表达为清晰、简洁的 SVG 标记。每个元素和属性都应有其存在的意义。
该技能负责徽标、图标集、品牌资产以及装饰性或表达性网络图形。根据目的选择：用于着陆页的徽标和装饰性主视觉图形属于这里；用于解释产品工作原理的图表属于 editorial-svg-diagrams。页面组成和界面布局属于 frontend-design。
一个关于小徽标的决策
说明性简报： 制作一个在网站页眉和紧凑的应用图标中都能保持可辨识度的山峰标记。从外部轮廓和一个独特的山脊镂空开始设计；省略在缩小时会消失的精细雪线。在添加颜色或细节之前，先在两种实际尺寸和预期使用背景下检查该标记。如果这些用途需要不同的细节级别，应制作一个明确的缩小版变体，而不是缩小一个不可读的标记。
在进行实质性构图或视觉审查之前，评估模型的视觉能力以及访问渲染后使用尺寸和表面的能力。如果 Puppeteer 可用，使用其当前的阶段/模型路由，以便由更合适的作者或独立审查者处理，传递简报、既定方向和目标尺寸。复用现有的委托负责人；一个小型合适的编辑可以直接保留。设计师自己的检查不是独立验收。缺少视觉能力或渲染访问权限将使该检查保持开放；有效的 SVG 本身并不能保证良好的设计。
主题路由
| 任务 | 加载参考 |
|---|---|
| 弧形标志组合、常见路径形状 | references/path-patterns.md |
| 徽标设计、排版、负空间 | references/logo-techniques.md |
| 图标设计、网格系统、像素对齐 | references/icon-design.md |
| 渐变、蒙版、裁剪、滤镜、变换（设计决策） | references/advanced-techniques.md |
| 动画（CSS 关键帧、交错、GPU、缓动、特定于 SVG） | references/animation.md |
| 优化、雪碧图、SVGO 配置 | references/optimization.md |
| 无障碍性、浏览器陷阱 | references/accessibility-and-pitfalls.md |
| 编辑工作流、布尔运算、合并 SVG | references/editing-workflow.md |
SVG 骨架
对于描边式 UI 图标，从以下结构开始：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- 内容 -->
</svg>
调整 viewBox 以匹配设计画布。省略 width/height 属性，让 SVG 随其容器缩放（仅在需要固定大小时添加它们）。
对于徽标和网络艺术图形，根据构图选择画布、填充和描边，而不是继承图标默认值。
画布尺寸约定
| 尺寸 | 使用场景 | 备注 |
|---|---|---|
0 0 16 16 | 微图标、网站图标 | Heroicons micro, GitHub Octicons |
0 0 20 20 | 小型 UI 图标、表单元素 | Heroicons mini |
0 0 24 24 | 标准图标（最常用） | Lucide, Heroicons outline, Material |
0 0 32 32 | 中型图标、导航 | Phosphor 内部使用 256x256 |
0 0 48 48 | 大型显示图标 | 应用图标、插图 |
| 自定义 | 徽标、插图 | 匹配自然宽高比 |
对于标准 UI 图标，默认使用 24x24，除非周围的图标系统使用其他网格。徽标和网络图形使用适合其构图的画布。
形状与路径决策
| 何时使用形状基元 | 何时使用 <path> |
|---|---|
| 形状是基本几何形式 | 形状有曲线、复杂轮廓 |
可读性重要（圆形应写成 <circle>） | 需要最小化元素数量 |
| 需要动画化单个属性（r, cx, cy） | 将多个形状合并为一个元素 |
| 形状将通过编程方式修改 | 从设计工具导出（路径是通用的） |
样式默认值
在根 <svg> 元素上设置以下属性，以避免在子元素上重复：
| 属性 | 图标默认值 | 徽标默认值 | 原因 |
|---|---|---|---|
fill | none | 变化 | 图标通常描边，徽标通常填充 |
stroke | currentColor | none 或 currentColor | 从父元素继承文本颜色 |
stroke-width | 2 (在 24x24 上) | 变化 | 图标间一致的粗细 |
stroke-linecap | round | round 或 butt | 圆角末端在小尺寸下看起来更干净 |
stroke-linejoin | round | round 或 miter | 防止连接处出现尖锐刺状 |
currentColor 是你的好朋友。 它允许 SVG 继承父元素任何颜色，使图标无需额外 CSS 即可主题化。
相对于 ViewBox 的描边宽度
stroke-width 使用的是 viewBox 单位，而非像素。始终相对于画布尺寸设置：
| viewBox | 典型描边宽度 | 视觉结果 |
|---|---|---|
| 16x16 | 1.5 | 约占画布的 9.4% |
| 24x24 | 2 | 约占画布的 8.3% |
| 32x32 | 2-2.5 | 约占画布的 6.3-7.8% |
| 48x48 | 3 | 约占画布的 6.3% |
| 256x256 | 16 | 约占画布的 6.3% |
何时将形状转换为路径
转换时机：
- 将多个形状合并为单个复合路径（布尔运算）
- 需要将形状作为更大路径组合的一部分
- 分发到仅支持
<path>的环境 - 为最小化 DOM 元素数量进行优化
保持为形状的时机：
- 代码可读性重要（
<circle>是自文档的） - 需要对特定属性进行动画（动画化圆形上的
r比动画化路径数据更清晰） - SVG 将通过编程方式修改
圆角矩形转路径模板
这里的弧线参数容易出错。请将其用作参考：
<!-- <rect x="2" y="2" width="20" height="20" rx="3" /> 变为： -->
<path d="M 5 2 h 14 a 3 3 0 0 1 3 3 v 14 a 3 3 0 0 1 -3 3 h -14 a 3 3 0 0 1 -3 -3 v -14 a 3 3 0 0 1 3 -3 Z" />
fill-rule: evenodd vs nonzero
当有带孔的复合形状时使用 evenodd。它更简单，因为不需要关心缠绕方向：
<!-- 使用 evenodd 的甜甜圈（方向无关紧要） -->
<path fill-rule="evenodd" d="
M 12 2 A 10 10 0 1 1 12 22 A 10 10 0 1 1 12 2 Z
M 12 7 A 5 5 0 1 1 12 17 A 5 5 0 1 1 12 7 Z
" fill="black" />
使用 nonzero（默认值）时，内圈必须向相反方向缠绕才能创建孔洞。
徽标设计流程
在创建徽标（不是图标）时，请遵循以下流程：
-
只解决简报中的实质缺口。 复用提供的品牌方向、名称、受众、用例和参考。如果某一个缺失的选择会实质性改变设计，使用当前宿主支持的交互方式提出一个简短的问题。对于次要选择，使用合理的可逆默认值；永远不要假设特定的提问工具或要求进行情绪板访谈。
-
探索多种隐喻，而非单个隐喻的多种布局。 概念多样性比布局变化更重要。遵循 references/logo-techniques.md 中的完整构思过程，其中涵盖了领域特定头脑风暴、类别多样性要求和避免陈词滥调。
-
保证结构多样性。 每个徽标集必须涵盖多种 类别 的方法，而不仅仅是同一风格内的多种隐喻。在呈现 5 个或更多方案时，每列至少包含一个：字体/文字标记方法、符号图标、抽象几何标记，以及文字与隐喻结合的混合体。参见 references/logo-techniques.md 中的类别多样性表格。
-
通过可用宿主进行预览。 当渐进式比较有帮助时，使用本技能的
assets/preview.html和 references/editing-workflow.md 中的结构。通过当前宿主支持的查看器显示或检查预览；不要假设浏览器、shell 命令或前台窗口可用。如果没有查看器可以渲染，请说明限制并提供 SVG 文件，以及在支持的情况下提供渲染后的预览。切勿声称未经观察的预览已通过视觉验证。 -
对于彩色徽标，始终创建一个
-dark.svg变体。 在白色背景上看起来很棒的海军蓝边缘（#1E3A5F）在深色背景上会消失。深色变体需要更亮的边缘（#4B8BBE）、更亮的环（#3B6B8A）和近白色的中心（#E2E8F0）。 -
在绘制之前规划你的垂直预算。 在 32x32 的画布上，如果有 3 个堆叠元素，你大约有 30 个可用单位。首先绘制垂直分布（例如，盒子=12，间距=2，图层=5，间距=2，图层=5），以避免在 viewBox 边缘被裁剪。
反模式
| 不要这样做 | 应该这样做 |
|---|---|
硬编码 width="24" height="24" 而不加 viewBox | 始终使用 viewBox；仅在需要时添加 width/height |
在 <g> 组上设置 fill="none" | 在单个元素或根 <svg> 上设置填充 |
在 SVG 内部使用 px 单位 | SVG 坐标是无单位的；它们映射到 viewBox |
包含编辑器元数据（<sodipodi:*>, <inkscape:*>） | 剥离所有编辑器杂质 |
在分发的 SVG 中使用 <text> 处理徽标字标 | 将文本转换为路径以实现可移植性 |
| 嵌套三层深的变换 | 将变换展平为路径坐标 |
使用 xlink:href | 使用 href（xlink 已弃用） |
在独立 SVG 文件中忘记 xmlns | 始终包含 xmlns="http://www.w3.org/2000/svg" |
| 图标使用超过 2-3 位的小数精度 | 图标四舍五入到 2 位小数，复杂图形最多 3 位 |
交叉参考
- 周围的网站或界面设计不属于本技能的工作范围。将图形及其角色和尺寸限制交还给请求方，并在此过程中遵循既定的排版、颜色和视觉层次，或项目现有设计系统的规范。
- 如果
editorial-svg-diagrams可用，用于解释概念、关系、流程或系统的图表。否则，保持本技能的输出专注于品牌和界面图形，并在请求结果依赖于此的情况下解释不可用的图表能力。