实用教程
用 Claude Opus 5.5 排查 SVG 图标描边裁切与粗细不一致
让 Claude Opus 5.5 修改 SVG 路径前，先检查坐标系、实际绘制边界和最终生效的描边。图标外框很大但图形很小、边缘被切掉、线条粗细不一致，是三种不同问题。统一用“放大一点”处理，往往会掩盖原因。
让 Claude Opus 5.5 修改 SVG 路径前，先检查坐标系、实际绘制边界和最终生效的描边。图标外框很大但图形很小、边缘被切掉、线条粗细不一致，是三种不同问题。统一用“放大一点”处理，往往会掩盖原因。
本文是带有几何计算的审查方法，不是 Opus 性能测试。一位开发者关于 SVG 尺寸与对齐的讨论体现了外层元素与内部图形容易混淆的问题。这只是当事人的描述，不能据此认定浏览器存在缺陷。
先确认哪一层边界有问题
| 现象 | 要收集的依据 | 优先考虑的修正 |
|---|---|---|
| 外框内的图形显得很小 | viewBox 与路径实际边界 | 检查内部坐标留白是否过多 |
| 边缘描边消失 | 绘制边界、端点、连接处、溢出设置 | 给描边留足空间 |
| 不同尺寸下粗细变化 | 渲染尺寸与缩放变换 | 明确是否应该随图形缩放 |
| 只有某个实例不同 | 生效的 CSS 与引用的 symbol | 先找样式覆盖，再改路径 |
SVG 的 viewBox 规范说明了内部矩形如何映射到视口。增大 CSS 宽度只是改变渲染外框，不会消除这个内部矩形已有的空白。应同时记录两种尺寸，并保持图形比例。
算清一个简单描边示例
设图标为正方形，使用 `viewBox="0 0 24 24"`、描边宽度 2，仅进行普通等比缩放，没有其他变换：
| 渲染边长 | 缩放比例 | 预期描边宽度 |
|---|---|---|
| 18 CSS px | 18 / 24 | 1.5 CSS px |
| 24 CSS px | 24 / 24 | 2 CSS px |
| 48 CSS px | 48 / 24 | 4 CSS px |
这里算的是几何宽度，不保证每块屏幕的抗锯齿视觉完全一致。MDN 介绍的 `vector-effect="non-scaling-stroke"`用于让描边宽度不随相关变换缩放。只有整套图标确实需要恒定线宽时才使用；大图标也可能需要更粗的线条。它不会自动修好留白、对齐、裁切或浏览器缩放行为。
再看这个刻意简化的图形：
```html
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none"
stroke="currentColor" stroke-width="2" />
</svg>
中心为 12，半径为 9，半条描边宽度为 1，所以两个方向上的绘制边界都是 2 到 22。把半径改成 12，边界就变为 −1 到 25，超出 viewBox；当视口裁切溢出时，描边可能被切掉。这里使用的是圆，尖角连接、线段端点、滤镜和其他变换都需要另算边界。示例作为装饰图形对辅助技术隐藏；如果按钮只有图标，按钮本身仍必须有可访问名称。
## 完整的 Opus 审查提示词
结合 [Opus 5.5 官方指南](https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/prompting-claude-opus-5-5)，可以使用下面的任务提示词：
```text
请审查这个 SVG 图标及其所在组件。输入包括完整 SVG 或引用的 symbol、最终生效的 CSS、预期显示尺寸、这些尺寸下的截图，以及整套图标的描边规则。
分别说明视口尺寸、viewBox 坐标、几何边界、绘制边界和布局对齐。按实际变换计算每种尺寸的描边缩放。检查描边宽度、vector-effect、线段端点、连接方式、overflow、滤镜和 CSS 覆盖。缺少资料时明确列出，不假定默认行为。
提出能解决已展示问题的最小修改差异，保留图形含义与纵横比，不要给所有图标一律添加 non-scaling-stroke。说明修改是否影响其他 symbol 实例。返回诊断表、补丁，以及在浅色和深色背景下按 18、24、48 CSS 像素测试的矩阵。区分计算结论和浏览器观察，没有结果就不能声称已执行视觉测试。保留交互控件的可访问名称。在真实组件中验收
把修改前后的图标并排展示，分别按三个目标尺寸检查四条边，与同一图标集中的相邻符号比较。如果悬停、焦点、禁用状态会改变图标样式，也要逐项检查。截图旁保存最终描边宽度和对应 CSS 规则。
共享 symbol 至少要放进两个不同组件中检查：一处工具栏修好了，另一处也可能被改坏。浅色和深色背景都要看，因为对比度会影响视觉上的粗细。如果截图与计算不一致，先排查额外变换和 CSS，再继续修改几何图形。
常见选择
**所有图标都应使用不缩放描边吗？** 不应。为整套图标选择明确规则，再验证每个目标尺寸。
**改 viewBox 能修裁切吗？** 有时可以，但也会改变缩放与对齐。修改后应复核整套相关图标。
**只给截图够吗？** 截图能定位现象；解释原因还需要 SVG、最终样式和渲染尺寸。
界面图标通过审查后，可以在 Panelly Studio 中按统一视觉需求制作完整宣传图。SVG 图解里的文字则可参阅独立的 图解标签审查，重点是文字位置和可读性。这两套流程均不代表 Panelly 已集成 Opus。
