SVG 壓縮工具

SVG 壓縮工具的運作方式

從 Illustrator、Inkscape、Figma 或 Sketch 儲存的 SVG，通常帶有許多瀏覽器從來不會用到的內容：編輯器中繼資料、註解、隱藏圖層、完整寫出的預設值，以及有八位或更多小數位數的座標。此工具會使用 SVGO 將這些全部移除，這是大多數建置工具和設計 App 都依賴的開放原始碼 SVG 最佳化工具，所以圖形看起來一樣，檔案卻變小了。

SVGO 會對檔案執行多次處理。它會合併和縮短路徑、將數值四捨五入到您選擇的精確度、摺疊不必要的群組、移除空白元素，並以最短的形式改寫色彩。viewBox 會保留，所以 SVG 仍可縮放到任何尺寸，而檔案中其他部分所參照的 ID 會被縮短並同時更新參照，所以漸層和遮罩仍然有效。

精確度是唯一重要的設定。「高」保留三位小數，在任何正常尺寸下都看不出差異，是圖示和標誌的安全選擇。「平衡」保留兩位，「最小」保留一位，適合大型插圖，因為十分之一個單位遠小於一個像素，但可能讓非常小的圖示變形。如果結果看起來不對，請以較高的精確度重新壓縮原始檔案。

約 200 KB 的最佳化工具會在您第一次按下按鈕時載入。您的 SVG 會在此分頁中讀取和改寫，絕不上傳，這對未發表的標誌和客戶作品很重要。

SVG 壓縮工具選項說明

適用時機

在將圖示和標誌放到網站上之前（每 1 KB 都會增加頁面載入時間）、在將 SVG 內嵌到 HTML 或 React 元件之前、在將設計素材提交到程式碼儲存庫之前，或當上傳表單限制檔案大小時，請先壓縮 SVG。

請為您的設計 App 保留原始、可編輯的 SVG。最佳化會移除圖層名稱和參考線等編輯器資料，所以需要編輯作品時，請重新開啟原始檔案。

關於 SVG 最佳化工具

SVGO 是 SVG Optimizer 的縮寫，這個開放原始碼工具是大多數網頁建置工具，以及提供最佳化匯出功能之設計 App 中 SVG 最佳化的幕後功臣。它會將 SVG 解析成樹狀結構，對其執行一組經過充分測試的清理步驟，再寫回檔案，重複進行直到無法再節省任何空間。它在這裡執行的每個步驟都能讓圖形保持相同的外觀，這就是為什麼它的預設值在正式環境中備受信賴。此頁面使用的版本完全在瀏覽器中執行，會在您第一次使用此工具時從 jsDelivr CDN 載入。

SVG 壓縮工具疑難排解

「已經最佳化；原樣傳回」

此 SVG 已經過最佳化，所以無法在不改變它的情況下移除任何內容。會傳回原始檔案。

圖形的某部分移位或彎曲了

在低精確度下，非常小的圖示可能會移位。請以「高」精確度重新壓縮原始檔案。

「不是 SVG 檔案」

檔案中不包含 SVG 圖形。匯出為 SVG 但只是包裝點陣圖片的檔案，也無法大幅縮小；請改為壓縮其中的圖片。

如何使用 SVG 壓縮工具：逐步說明

1. 按「選擇 SVG 檔案」，或將檔案拖曳到方框中。
2. 如有需要，請調整選項；預設值適合大多數用途。
3. 按下「壓縮 SVG」。處理會在您的裝置上進行。
4. 使用下載按鈕儲存結果。

線上轉換安全嗎？

大多數線上工具所謂的「線上」，是指您的檔案會上傳到某家公司的伺服器，在那裡處理，並保留一段時間後才刪除。這裡不是這樣。頁面會將工具的程式碼下載到您的瀏覽器，您的檔案是在您自己裝置上的分頁中讀取和處理。檔案絕不會傳送給 TapToConvert 或任何其他人。

您可以自行驗證：頁面和轉換引擎載入後，關閉 Wi-Fi，工具仍然可以運作。這也代表沒有排隊、沒有每日限制，也沒有伺服器設定的檔案大小上限；唯一的限制是瀏覽器分配給單一分頁的記憶體。