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