实用创作流程

修复被裁切的 SVG 标志,不必重画路径

象牙白框中的炭灰陶质圆环与琥珀色角块
关于为已有形状留足空间的抽象文章插画。

店铺的杯子标志少了把手,但曲线可能还在原文件里。重新描摹残缺预览,会把一个取景范围问题变成另一幅图。

我们在 Ciyo 中修复了一个虚构陶器店标志。下载故意裁切的 SVG 和修正版,先比较源码与显示结果,再替换网站素材。

把残缺文件与原稿一起保留

从 SVG 源码开始,不要拿残缺预览的截图重新描图。另存工作副本,保留原路径。示例只有一条炭灰色复合路径,把手的孔是真正透明的。

两版输出区域均为 800×500。故意设置的错误 viewBox 为 0 0 1024 1024,使杯子的大部分落在可见范围之外。旁边完整的杯子是修复结果,并非重新生成的标志。

Ciyo 完整画布:选中裁切的 800×500 预览,旁边是修复后的杯子;输入指令要求保留原几何数据。
选中裁切的 800×500 预览,旁边是修复后的杯子;输入指令要求保留原几何数据。

先找到曲线边界,再改显示范围

要求计算实际曲线范围,包括曲线转折处。这个例子的 x≈490.710–1620.830,y≈693.803–1363.685;只查看路径锚点,会低估右侧和底部边界。

MDN 将 viewBox 定义为最小 x、最小 y、宽度、高度四个值。旧范围与输出区域的比例不同,因此要检查实际渲染,不能把每条可见边缘简单对应到这四个数。

向 Ciyo 提出范围明确的修复请求

提供 SVG 文本或智能体能读取的源文件,要求报告已有几何形状、另存修正版、渲染两份文件,并将预览放上画布。

下面的指令适用于本例。处理自己的标志时,应让智能体计算带留白的合适范围;把这些坐标直接用于别的图形,可能造成新的裁切。

Ciyo 完整画布:Ciyo 报告曲线范围,将裁切版与修正版并排展示以便检查。
Ciyo 报告曲线范围,将裁切版与修正版并排展示以便检查。
复制这段指令
检查这个 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×500800×500
viewBox0 0 1024 1024430 630 1260 790
几何数据一条已有复合路径d、fill、fill-rule 相同
显示结果杯底和把手被裁切轮廓完整,孔洞透明

检查完整轮廓与透明孔洞

实际修复 PNG 为 800×500,透明留白约为左39px、右45px、上40px、下35px。杯底和把手完整显示,把手孔仍然透明。

在浏览器里用预计显示尺寸打开 SVG。画布展示的是 PNG 预览,可下载的 SVG 才保留原路径。预览可以用于检查,但不能代替矢量原稿。

Ciyo 完整画布:修复后的杯子处于选中状态,完整轮廓显示在透明范围内,没有替换原路径。
修复后的杯子处于选中状态,完整轮廓显示在透明范围内,没有替换原路径。

如果路径本来就不存在,另查原因

这种方法成立的前提是曲线已经保存在文件中。缺失路径、蒙版、剪切路径或 CSS overflow 需要分别诊断。扩大 viewBox 无法重建从未保存的形状。

把修正版和原文件一起留存。链接中的样例可复现浏览器显示范围检查;本流程没有验证实体切割或其他应用的导入结果。

常见问题

扩大 viewBox 能找回缺失路径吗?

只能显示已经存在的几何内容。如果路径本身缺失,需要检查原文件。

这次重画了杯子吗?

没有。两份 SVG 的路径数据、填充和填充规则相同,只有 viewBox 不同。

为什么修复后的杯子显得更大?

新的范围把同一幅图的不同区域映射到 800×500 输出中。要分别检查几何形状和显示大小。

给已有标志一个合适的显示范围

打开 Ciyo,检查 SVG,将另存的修正版与源码比较后,再替换网站素材。