實用創作流程

修復被裁切的 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,比較另存的修正版與原始碼後,再替換網站素材。