✨ SVG 優化器

移除 Figma、Illustrator 匯出的 SVG 中多餘的 metadata 和命名空間，有效縮小檔案大小，加速網頁載入。

什麼是 SVG 優化工具？

SVG 優化工具能移除 Figma、Illustrator 等軟體匯出的 SVG 中多餘的 metadata、註解與冗長的命名，縮小檔案體積、清理程式碼。設計軟體匯出的 SVG 常夾帶大量用不到的資料，直接用會讓檔案偏大、不易維護，這個工具幫你產出乾淨精簡的 SVG。

優化後的 SVG 載入更快、更易嵌入網頁或進一步編輯，且視覺效果不變。

適用情境

• 縮小設計軟體匯出的 SVG 檔案
• 清理 SVG 程式碼方便嵌入網頁
• 移除多餘的 metadata 與編輯器資訊
• 優化圖示以加快網站載入

如何使用

1. 貼上或上傳要優化的 SVG。
2. 工具移除多餘資料並精簡程式碼。
3. 對照優化前後的檔案大小與預覽。
4. 複製或下載優化後的 SVG。

使用技巧

• 優化後預覽一下，確認圖形外觀沒有改變。
• 要內嵌進 HTML 的小圖示，精簡後的 SVG 特別適合。
• 保留原始 SVG 備份，方便日後需要再編輯。
• 大量圖示逐一優化，能明顯減少整體網站的負載。

名詞解釋

SVG

可縮放向量圖格式，以程式碼描述圖形、放大不失真。

metadata

檔案附帶的編輯器資訊與註解，對顯示通常非必要。

最佳化

移除冗餘、精簡程式碼以縮小檔案的處理。

常見問題 FAQ

優化後 SVG 的外觀會改變嗎？

一般不會。本工具只移除視覺上無用的資料，如編輯器 metadata（軟體版本、作者資訊）、未使用的命名空間宣告和多餘的空白。這些資料在瀏覽器中本就不會渲染顯示。

為什麼 Figma 或 Illustrator 匯出的 SVG 那麼大？

設計工具在匯出時會自動加入大量 metadata（文件資訊、軟體版本、導引線設定）、多餘的命名空間宣告（xmlns:sketch、xmlns:inkscape 等），以及過度精確的浮點座標（如 123.456789012）。這些對瀏覽器渲染毫無用處，使用優化器可安全移除。

「精簡浮點數精度」會影響圖形準確度嗎？

幾乎不會。SVG 座標從 6+ 位小數精簡到 3 位，在一般螢幕解析度下肉眼完全看不出差異，但可大幅減少路徑資料的文字長度，特別對複雜圖形效果顯著。

動態 SVG（含 CSS 動畫或 JavaScript）也能優化嗎？

可以。本工具只進行靜態結構清理，不修改 <animate>、<animateTransform>、style 屬性（CSS 動畫）或 onclick 等事件屬性，動態效果完整保留。

優化會改變圖形外觀嗎？

不會。工具移除的是 metadata、註解與冗餘資料等對顯示非必要的內容，圖形的視覺外觀維持不變。優化後可預覽確認。

為什麼設計軟體匯出的 SVG 很大？

Figma、Illustrator 等常在匯出時夾帶編輯器資訊、冗長的 id 與多餘屬性，導致檔案偏大。優化能移除這些用不到的部分。

SVG 會上傳嗎？

不會。優化在你的瀏覽器本機完成，SVG 不會上傳或儲存。

優化後可以再編輯嗎？

可以，但建議保留原始 SVG 備份。優化會精簡程式碼，若日後需在設計軟體大幅修改，從原檔編輯較方便。