SVG最佳化工具

SVG 最佳化工具是一個功能強大的線上工具，可幫助您減小 SVG (可縮放向量圖形) 文件的大小，而無需犧牲視覺品質。無論您是處理圖示、插圖、標誌還是複雜的圖形，此工具都能刪除不必要的程式碼、縮短數值並清理 SVG，以獲得最佳的網頁效能。

為什麼要最佳化 SVG 文件？

從 Adobe Illustrator、Figma、Sketch 或 Inkscape 等設計工具匯出的 SVG 文件通常包含大量不必要的資料：

• 編輯器詮釋資料： 編輯軟體特有的資訊，顯示時不需要
• XML 註解： 開發人員註解和自動產生的註解
• 預設值： 設定為預設值的屬性，瀏覽器已經可以識別
• 過度精確： 當 2-3 位小數足夠時，數字卻有 10 位以上的小數位數
• 冗餘元素： 空群組、定義和未使用的資源
• 冗長的顏色： 可以縮短的 rgb() 表示法和 6 位十六進位顏色

最佳化您的 SVG 可以消除這些冗餘，從而加快頁面載入速度、減少頻寬使用並獲得更好的 Core Web Vitals 分數。

最佳化技術

刪除註解和詮釋資料

XML 註解 () 和詮釋資料元素包含渲染不需要的資訊。設計工具通常嵌入廣泛的詮釋資料，包括軟體版本、作者資訊和編輯歷史。刪除這些內容可以顯著減小文件大小。

刪除 DOCTYPE 和 XML 宣告

HTML5 中嵌入的 SVG 不需要 DOCTYPE 宣告和 XML 序言。現代瀏覽器無需這些宣告即可正確渲染 SVG，因此對於網頁使用，刪除它們是安全的。

刪除空屬性和預設屬性

設定為空值或預設值的屬性沒有任何作用。例如，fill-opacity="1" 是預設值，可以刪除。這種最佳化通常在不產生任何視覺影響的情況下產生可觀的節省。

縮短顏色值

顏色值可以透過多種方式表示。此工具將冗長的格式轉換為較短的等效項：

• rgb(255, 0, 0) → #f00 或 red
• #ff0000 → #f00
• #ffffff → #fff

捨入數字

設計工具通常以過高的精度匯出座標和尺寸 (例如 50.123456789)。對於網頁使用，2-3 位小數通常足夠。此工具將數字捨入到您指定的精度，同時保持視覺保真度。

最佳化變換

諸如 translate(0,0)、scale(1) 和 rotate(0) 之類的恆等變換沒有視覺效果，可以安全地刪除。該工具會檢測並消除這些冗餘變換。

刪除空格

不必要的空格、換行符和縮排會增加位元組而沒有好處。根據原始格式的不同，縮小空格可以減小 10-30% 的文件大小。

如何使用 SVG 最佳化工具

1. 上傳或貼上您的 SVG： 將 SVG 文件拖放到上傳區域，點擊選擇文件，或直接將 SVG 程式碼貼上到文本區域。
2. 配置最佳化選項： 選擇要應用的最佳化技術。預設情況下啟用所有選項以實現最大壓縮。如果需要，調整數字精度滑塊 (越低 = 文件越小，越高 = 精度越高)。
3. 點擊「最佳化 SVG」： 工具將處理您的 SVG 並應用所有選定的最佳化。
4. 查看結果： 查看詳細統計資訊，包括原始大小、最佳化後大小、節省的位元組數和減小百分比。比較最佳化前後的預覽以驗證視覺品質。
5. 下載或複製： 下載最佳化的 SVG 文件或將程式碼複製到剪貼簿。

選擇正確的精度

數字精度選項控制在捨入座標和尺寸時保留多少位小數：

• 1 位小數： 激進最佳化，最適合肉眼看不出細微差異的簡單圖示和標誌
• 2 位小數： 大多數網頁圖形的良好平衡
• 3 位小數 (預設)： 建議用於詳細插圖，同時仍能實現良好的壓縮
• 4-5 位小數： 適用於需要精確位置的複雜圖形的高精度

何時保留某些元素

雖然通常希望進行最大程度的最佳化，但在某些情況下您可能希望保留某些元素：

• 無障礙詮釋資料： 如果 title 和 desc 元素為螢幕閱讀器提供重要的無障礙資訊，請保留它們
• 文件註解： 如果您的 SVG 包含為團隊成員記錄結構的註解，請考慮保留它們
• 動畫的高精度： 具有複雜動畫的 SVG 可能需要更高的數字精度，以避免抖動

隱私和安全

您的 SVG 文件將得到安全處理：

• 所有最佳化都在伺服器上進行，文件在處理後立即被丟棄
• 不儲存、記錄或儲存任何 SVG 內容
• 在您點擊「最佳化 SVG」之前，您的文件永遠不會離開您的瀏覽器
• 結果傳輸安全且不被快取

常見問題解答

什麼是 SVG 最佳化，為什麼它很重要？

SVG 最佳化是透過刪除不必要的程式碼、縮短屬性值和清理文件結構來減小 SVG 文件大小的過程。這很重要，因為較小的 SVG 文件在網站上載入速度更快，從而縮短頁面載入時間並改善使用者體驗。最佳化的 SVG 還消耗更少的頻寬和儲存空間。

SVG 最佳化會影響圖形的視覺品質嗎？

不，正確的 SVG 最佳化不會影響視覺品質。此工具僅刪除不必要的程式碼，如註解、詮釋資料、預設值和冗餘空格。實際的形狀、顏色和視覺元素保持不變。最佳化的 SVG 在瀏覽器中的渲染效果將與原始文件完全相同。

我可以減小多少 SVG 文件大小？

大小減小的幅度取決於原始 SVG。從 Adobe Illustrator、Inkscape 或 Figma 等設計工具匯出的文件通常包含大量的詮釋資料、註解和可以刪除的未使用元素。通常可以減小 20% 到 70%，對於過度膨脹的文件，有時甚至可以實現更大的節省。

使用此工具時，我的 SVG 資料安全嗎？

是的，您的 SVG 資料在我們的伺服器上安全處理，並在最佳化後立即丟棄。我們不會儲存、儲存或記錄您上傳的任何 SVG 內容。最佳化在記憶體中進行，在您收到結果後不會保留任何文件。

我應該使用哪些最佳化選項？

對於大多數使用案例，建議使用所有預設選項以實現最大程度的文件大小減小。但是，如果您的 SVG 在 title 或 desc 元素中包含重要的無障礙資訊，您可能希望保留詮釋資料。數字精度選項控制座標中保留的小數位數 - 2-3 位小數通常足以滿足網頁使用。

其他資源

• MDN SVG 文件
• SVG - 維基百科
• Web.dev - 最佳化最大內容繪製 (LCP)