複雜圖片用 PNG 儲存,可能比用幾千個形狀描述它更省空間。轉向量是為了能編輯形狀,不保證縮小檔案。

找找不需要的細節

文字周圍的噪點、毛邊和紋理陰影可能產生許多小形狀。若不需要這些細節,先換清楚的原圖,或在圖片編輯器中清理再轉。其他工具生成的 SVG 也可能嵌入了一整張 PNG 或 JPEG,可參考SVG 內容檢查。ImageSVG 輸出不嵌入點陣圖。

在副本上嘗試簡化

  1. 保留原 SVG。
  2. 在向量編輯器裡選中形狀,少量簡化路徑,減少曲線上的點。
  3. 比較轉角、窄縫和文字內部的孔洞;變形或消失就撤銷。
  4. 儲存副本,比較大小和最終使用尺寸下的外觀。

大部分體積來自複雜形狀時,只刪後設資料用處不大。不能只憑檔案變小就認為更好。

觀察花藝插畫

觀察手指、花瓣邊緣和花莖之間的細小空隙。每一處邊界都需要繪圖資訊,因此細節豐富的圖片可能產生較大的 SVG。請在實際使用尺寸下比較外觀。

原圖
原圖
轉換後的 SVG
轉換後的 SVG
原圖 · 轉換後的 SVG · 檢視示例的製作過程

需要編輯或多尺寸使用時保留 SVG;照片或固定尺寸的圖片可能更適合 PNG 等格式。也可以保留 SVG 用來編輯,網頁上用 PNG 副本。

SVG 變小,也可能失去重要細節

下載 A 和 B,以相同尺寸比較。A 頂部有缺口、中間有孔洞;B 去掉了這兩處細節,因此資料更少。下方位元組數從檔案讀取。兩份都是專門製作的教學範例,不是轉換結果,也不是公開作品的實測最佳化。簡化前請先保留副本。

SVG 變小,也可能失去重要細節 — A
188 位元組
SVG 變小,也可能失去重要細節 — B
116 位元組

SVG A ↓ · SVG B ↓