如何制作可缩放且无障碍的 SVG 图标。
图标应简单、可缩放，没有多余脚本或外部引用。确定它是装饰还是传达意义，并在实际使用处给予适当无障碍名称。
按任务需求调整流程。
确定图标含义、viewBox、描边或填充风格及目标尺寸。生成没有多余外部引用的精简 SVG，在实际大小下检查。使用时决定无障碍处理，包括容器控件的名称。
- 你需要提供什么
- 简单图标概念和风格限制。
- 你会得到什么
- 含 viewBox 与无障碍标签的可编辑 SVG 草稿。
查看输入和结果。
演示用输入和输出 · 教学示例，并非 WebAct 实时运行结果
示例 个输入项
Need a decorative 24×24 plus icon using currentColor and a two-unit stroke.
完整示例
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Give the surrounding button an accessible name such as Add item.
将这份输入载入提示词，再复制到 WebAct 中尝试任务。实际结果可能与示例不同。
决策与问题排查。
已命名按钮里的装饰 SVG 需要单独播报吗？
通常对辅助技术隐藏装饰图标，让按钮的无障碍名称表达操作。
路径坐标正确，图标为何被裁切？
描边会超出路径本身。按目标线宽检查 viewBox、边距和渲染边界。
使用自己的资料试一试。
将任务提示词中的示例换成你的材料。保留所需条件，再把任务复制到 WebAct。
自定义并复制任务 ↑