实用创作流程
重复展示 SVG 徽章时，怎样修复重复 ID
一个 SVG 徽章单独显示正常，旁边粘贴第二份后却可能变色或出现裁剪错误。重复的渐变或裁剪路径 ID，会让页面中的引用产生歧义。
我们要求 Ciyo 制作两枚虚构的 Cedar Cup 徽章，同时给出刻意保留错误的对照组和修复组。修复版本保留几何形状，改用独立的 ID 前缀。可编辑示例能让你在浏览器中检查两种情况。
把 ID 和引用当成同一系统检查
ID 用于标识文档内的元素，SVG 要求它保持唯一。同一个 HTML 页面中的两个内联 SVG 根元素，并不能普遍豁免这条规则。
先列出渐变、裁剪路径、遮罩、滤镜和其他命名定义，再收集全部引用，包括 url(#...)、href 片段和无障碍引用。只改定义名称、不更新使用位置，可能把冲突变成资源缺失。
为每个实例指定明确前缀
第一枚徽章使用 cedar-a-gradient 和 cedar-a-clip，第二枚使用 cedar-b-gradient 和 cedar-b-clip，各自引用自己的定义。真正可复用的组件，应为每个实例生成稳定且唯一的前缀，而不是每次渲染都写死相同前缀。
修复名称时保持绘图不变，结果更容易比较，也能减少视觉重设计掩盖真实引用问题的风险。
| 实例 | 渐变 | 裁剪 |
|---|---|---|
| A | cedar-a-gradient | cedar-a-clip |
| B | cedar-b-gradient | cedar-b-clip |
要求 Ciyo 同时提供对照和源码
新建独立项目，要求给出错误和修复后的内联徽章对照。错误部分必须醒目标注，避免被当成最终组件。同时要求提供最终 HTML、独立 SVG 源码和 PNG 预览。
这次真实会话中，画布能接收 PNG 预览，但没有提供 HTML 或 SVG 文件下载。我们要求智能体把完整源码贴在回复里，再把它保存成下方链接的示例。你的会话若有同样限制，也可以这样交付。
为虚构的 Cedar Cup 制作一个实用的 SVG 重复 ID 演示。只使用代码工具，不调用付费图像或视频生成。交付可下载 HTML，在其中并排放置两枚内联 SVG 徽章，各自使用不同的渐变和裁剪路径，定义全局唯一 ID：cedar-a-gradient、cedar-a-clip、cedar-b-gradient、cedar-b-clip。两枚 SVG 都使用 viewBox="0 0 120 120"，按 160px 显示。包含明确标注、重复使用 ID 的错误对照，接着给出修复组和文字检查清单。同时交付两个修复后的独立 SVG 文件。把修复组的 PNG 预览加入画布。保持错误组和修复组的实际 SVG 几何一致。用程序检查 ID 唯一性和全部 url(#...) 引用。准确说明验证了什么，并提供下载链接。这是虚构的网站组件演示，不是性能基准。查看最终徽章，并保留源码
最终画布保留了一张修复预览：绿色圆形徽章和琥珀色六边形徽章。第一版预览裁掉了品牌文字，智能体将图形上移、检查最终几何，并移除了旧预览。两组对照都采用这份最终几何。
按组件实例给资源加前缀
我们保留了回复中的源码，并把修复部分与刻意错误的部分分开检查。修复组有四个唯一的定义 ID 和四个资源引用，每个引用都指向各自 SVG 内的定义。不要把解释文字当成标记源码扫描。
让两份徽章同时存在，再测页面
在浏览器里打开 HTML 示例，比较已标注的两组徽章。独立渲染不能证明两份内联 SVG 共用文档时的行为。刻意重复的 ID 只应留在教学用错误部分。
我们另行在 Chromium 中检查了保留的页面。正式组件应在每个支持的浏览器中复查，并在优化器重写 ID 后再次检查。加入第三个实例、改变顺序，确认引用仍正确解析。
常见问题
不同 SVG 根元素会让重复 ID 变安全吗？
同一文档中的内联 SVG 不应依赖这一点。为每个实例使用唯一的定义 ID，并更新引用。
只改渐变的名字就够了吗？
还需更新对该渐变的全部引用，并检查裁剪路径、遮罩等其他命名定义。
为什么下载页面的一部分故意无效？
明确标注的错误对照用于展示问题，只有修复组适合拿来复用。
把重复 SVG 组件放在一起检查
先在 Ciyo 中完成一个经过检查的示例。保留源文件，在自己的项目中使用前检查导出结果。