SVG 檔案結構與網頁效能
可縮放向量圖形（SVG）是一種基於 XML 格式的圖像檔案，廣泛應用於現代網頁設計與開發。與點陣圖不同，SVG 透過程式碼定義點、線、曲線及顏色，因此在任何螢幕解析度下都能保持清晰。然而，由繪圖軟體導出的 SVG 檔案通常包含大量與視覺呈現無關的冗餘數據，例如編輯器元數據、歷史記錄、註解及多餘的空格。
在網頁效能最佳化的過程中，縮減資產體積是提升載入速度與改善使用者體驗的關鍵。當網頁包含大量內嵌 SVG（Inline SVG）或圖示時，未經壓縮的程式碼會直接增加 HTML 文件的總體積，導致瀏覽器解析與渲染的時間延長。透過移除這些不必要的 XML 元素，可以在不改變圖形外觀的前提下，顯著減少檔案大小。
安全清理與無損最佳化機制
本工具採用「無損」最佳化機制，專注於安全清理 SVG 程式碼。在最佳化過程中，系統會執行以下調整以縮減體積：
- 移除 XML 註解與元數據（metadata）
- 清除繪圖軟體產生的編輯器命名空間及未使用的命名空間
- 壓縮屬性之間多餘的空格
- 將顏色代碼重寫為較短的等效形式（例如將
#ffffff轉換為#fff）
為了確保圖形在網頁上的排版與互動功能不受影響，最佳化器會嚴格保留以下核心元素：
- 完整保留
viewBox屬性，確保圖形縮放比例正確 - 保持所有
id屬性與標籤（labels）不變，避免破壞 CSS 樣式綁定或 JavaScript 互動 - 幾何數據（geometry）維持原樣，不進行路徑改寫（path rewrites）或小數精度捨入（precision rounding），防止圖形輪廓變形
瀏覽器本機處理與隱私保護
你的 SVG 程式碼會在瀏覽器本機進行最佳化，不會上傳至 BroBroGo。所有解析與壓縮運算均在用戶端裝置上即時執行，確保處理過程的私密性。
需要注意的是，本工具設有安全防護機制。為了防止 XML 外部實體注入等安全漏洞，系統會阻擋含有文件類型（Document Type）或自訂實體（Custom Entity）宣告的 SVG 檔案。
最佳化工具運作規則與限制
工具在處理輸入的 SVG 程式碼時，會遵循特定的限制與錯誤處理流程：
| 狀況 / 輸入限制 | 系統行為與顯示訊息 |
|---|---|
| 輸入欄位為空 | 顯示「請先貼上 SVG 程式碼。」 |
| 輸入內容不含任何 SVG 元素 | 顯示「找不到 <svg> 元素。」 |
| 含有文件類型或自訂實體宣告 | 顯示「此 SVG 使用了文件類型或自訂實體。請先將其移除再進行最佳化。」 |
| 程式碼字元數超過最大限制 | 顯示「此 SVG 體積過大。請控制在 {max} 個字元以內。」 |
| 最佳化運算時間超過 15 秒 | 顯示「處理時間過長並已停止——請嘗試較小的 SVG。」 |
| 成功壓縮檔案體積 | 顯示「已最佳化——體積減少 {pct}%（節省了 {saved}）。」並提供「原始」、「輸出」與「節省」的位元組（bytes）數據 |
| 安全清理後檔案體積未減少 | 顯示「已最佳化。在安全清理設定下，檔案體積並未減少。」 |
| 其他未知解析錯誤 | 顯示「無法最佳化此 SVG。」 |
在最佳化過程中，若使用者點選清除或更改輸入內容，系統會立即終止當前正在進行的最佳化程序。
常見問題
它會清理甚麼內容？
它會移除註解、元數據（metadata）、編輯器命名空間、多餘的屬性空格、未使用的命名空間，並將顏色重寫為較短的等效形式。viewBox、ID、標籤和幾何數據則會保持原樣。
所有 SVG 都能最佳化嗎？
它能處理一般的內嵌 SVG 程式碼。含有文件類型或自訂實體宣告的 SVG 會被阻擋，因為這類宣告可能會導致解析不安全。請移除這些宣告後再試。
這會改變圖形的外觀嗎？
最佳化工具會避免改寫路徑、重新命名 ID、移除 viewBox 及進行小數精度捨入。如果你的設計流程依賴註解或元數據（metadata），請保留一份原始 SVG 備份。