展开本页目录
开始前准备什么
- 下载本页原创练习素材，或准备自己的有权使用素材。
- 核对本页对应软件或账号实际版本；Remotion 示例需要已有可运行项目。
- 保留原素材、实际参数和独立输出，不覆盖输入。
- 只用自有 SVG 样本练习
- 核对根元素坐标
- 留出描边的真实边界
- 统一端点与线宽
- 在 16、24、48 像素预览
- 保存源 SVG 与使用约束
下载本教程完整练习素材
包含独立输入、模板、原创图形与 HTML 教材、验收表和离线检查；不包含外部账号或付费模型结果。
下载 clean-icon.svg
本页具体任务输入或操作模板；按步骤替换为自己的实际材料。
下载验收记录 CSV
保留实际结果证据，默认待验证，不用人工预期填充通过。
1. 只用自有 SVG 样本练习
下载 raw-icon.svg 与 clean-icon.svg，两者是本站原创人工教材，不是模型生成结果。真实 AI 输出先保留原文件，不执行其中脚本或外部引用。
2. 核对根元素坐标
把目标设为 viewBox="0 0 24 24"，宽高可以是 24，但不能仅改 width/height 假装几何坐标也缩放。需要缩放路径时通过编辑器或明确的 transform 处理。
3. 留出描边的真实边界
图形边缘至少为描边留半个线宽；2px 描边的路径不能直接贴在 0 和 24 上。修正路径位置，避免导出时裁掉圆角或箭头端点。
clean-icon.svg
xml
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" fill="none" stroke="#285b62" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>4. 统一端点与线宽
为同一套图标固定 stroke-width、linecap 与 linejoin。不要把填充风格和描边风格混在同一组后靠改颜色掩盖；复杂多色图单独分类。
5. 在 16、24、48 像素预览
下载 icon-preview.html，真实渲染三个尺寸，检查最小尺寸仍可读。本练习 checker 检查 viewBox、外链和脚本，不自动证明视觉质量。
6. 保存源 SVG 与使用约束
导出 clean SVG 保留可编辑路径，不把每次截图栅格化当 SVG。放进页面前核对来源许可与安全；批量应用时保留人工复核记录。
7. 下载材料并关联实际结果
先运行素材包内的 node check.mjs 检查输入结构，再完成需要账号或编辑器的步骤。离线通过不表示模型生成、外部软件导出或自然流量已经验证。
怎样确认已经完成
- 坐标与 viewBox 相容，描边没有被裁切。
- 16px 与 24px 都可辨识，样式一致。
- 没有脚本、事件处理器或外部引用。
常见问题
只改 width=24 能统一所有图标吗？
不能。width 是显示尺寸，内部坐标由 viewBox 和路径决定，必须检查真实图形范围。
checker 通过就能安全展示任何 SVG 吗？
不能。示例检查只覆盖列出的基础风险；真实用户输入应通过严格允许列表清洗或转成栅格后再展示。