实用创作流程
修复被裁切的 SVG 标志,不必重画路径

店铺的杯子标志少了把手,但曲线可能还在原文件里。重新描摹残缺预览,会把一个取景范围问题变成另一幅图。
我们在 Ciyo 中修复了一个虚构陶器店标志。下载故意裁切的 SVG 和修正版,先比较源码与显示结果,再替换网站素材。
把残缺文件与原稿一起保留
从 SVG 源码开始,不要拿残缺预览的截图重新描图。另存工作副本,保留原路径。示例只有一条炭灰色复合路径,把手的孔是真正透明的。
两版输出区域均为 800×500。故意设置的错误 viewBox 为 0 0 1024 1024,使杯子的大部分落在可见范围之外。旁边完整的杯子是修复结果,并非重新生成的标志。

先找到曲线边界,再改显示范围
要求计算实际曲线范围,包括曲线转折处。这个例子的 x≈490.710–1620.830,y≈693.803–1363.685;只查看路径锚点,会低估右侧和底部边界。
MDN 将 viewBox 定义为最小 x、最小 y、宽度、高度四个值。旧范围与输出区域的比例不同,因此要检查实际渲染,不能把每条可见边缘简单对应到这四个数。
向 Ciyo 提出范围明确的修复请求
提供 SVG 文本或智能体能读取的源文件,要求报告已有几何形状、另存修正版、渲染两份文件,并将预览放上画布。
下面的指令适用于本例。处理自己的标志时,应让智能体计算带留白的合适范围;把这些坐标直接用于别的图形,可能造成新的裁切。

检查这个 SVG,不要重画。报告实际曲线范围。本例保持所有路径 d、fill、fill-rule 不变,保留 width=800、height=500,另存 viewBox="430 630 1260 790" 的版本。把裁切版和修正版渲染成透明的 800×500 PNG,保存到画布。检查完整杯子和把手孔洞,并说明源码改动及修复限制。在源码中核对改动
修正版 viewBox 为 430 630 1260 790。两份可下载 SVG 的宽、高、d、fill、fill-rule 均相同。改变范围会改变显示大小与位置,不会保留旧预览的像素位置。
接受结果前先比较文件。新增路径、背景矩形或嵌入图片,都超出了此次修复的范围。
| 检查项 | 修复前 | 修复后 |
|---|---|---|
| 输出区域 | 800×500 | 800×500 |
| viewBox | 0 0 1024 1024 | 430 630 1260 790 |
| 几何数据 | 一条已有复合路径 | d、fill、fill-rule 相同 |
| 显示结果 | 杯底和把手被裁切 | 轮廓完整,孔洞透明 |
检查完整轮廓与透明孔洞
实际修复 PNG 为 800×500,透明留白约为左39px、右45px、上40px、下35px。杯底和把手完整显示,把手孔仍然透明。
在浏览器里用预计显示尺寸打开 SVG。画布展示的是 PNG 预览,可下载的 SVG 才保留原路径。预览可以用于检查,但不能代替矢量原稿。

如果路径本来就不存在,另查原因
这种方法成立的前提是曲线已经保存在文件中。缺失路径、蒙版、剪切路径或 CSS overflow 需要分别诊断。扩大 viewBox 无法重建从未保存的形状。
把修正版和原文件一起留存。链接中的样例可复现浏览器显示范围检查;本流程没有验证实体切割或其他应用的导入结果。
常见问题
扩大 viewBox 能找回缺失路径吗?
只能显示已经存在的几何内容。如果路径本身缺失,需要检查原文件。
这次重画了杯子吗?
没有。两份 SVG 的路径数据、填充和填充规则相同,只有 viewBox 不同。
为什么修复后的杯子显得更大?
新的范围把同一幅图的不同区域映射到 800×500 输出中。要分别检查几何形状和显示大小。
给已有标志一个合适的显示范围
打开 Ciyo,检查 SVG,将另存的修正版与源码比较后,再替换网站素材。