SVG 檔案的結構與網頁效能影響
可縮放向量圖形（SVG）是一種基於 XML 格式的文字檔案，用於描述二維向量圖形。由於 SVG 是以文字程式碼來定義點、線、路徑與顏色，因此常包含許多與視覺呈現無關的冗餘資訊。在現代網頁設計中，SVG 扮演著關鍵角色，廣泛應用於圖示、標誌與插圖。
當網頁載入多個未經整理的 SVG 檔案時，過大的檔案體積會直接累積成額外的網路傳輸負載，進而拖慢網頁載入速度並影響使用者體驗。透過優化工具減少 SVG 程式碼的體積，能有效提升前端效能，這對於需要頻繁載入內嵌 SVG（Inline SVG）或外部 SVG 檔案的網頁開發人員與設計師而言至關重要。
安全無損的 SVG 程式碼清理機制
本工具採用無損（Lossless）優化機制，在縮減檔案體積的同時，絕對不改變圖形的實際外觀。優化程式會自動識別並移除 XML 結構中不必要的元素，包括：
- 檔案註解與元資料（Metadata）
- 向量繪圖軟體產生的編輯器命名空間（Editor Namespaces）
- 屬性之間多餘的空白字元
- 未使用的命名空間
- 將顏色值轉換為更短的等價寫法（例如將
#ffffff轉換為#fff）
為了確保圖形在網頁上的排版與互動功能完全正常，本工具會嚴格保留 viewBox 屬性、元素 ID、標籤以及幾何資料。優化過程不會進行路徑改寫、ID 重新命名、刪除 viewBox 或小數精度捨入，確保圖形細節不失真。
瀏覽器本機端處理與隱私保護
使用本工具優化 SVG 程式碼時，所有的運算與程式碼清理工作皆在你的瀏覽器本機執行，你的 SVG 程式碼不會上傳到 BroBroGo 伺服器。
需要注意的是，本工具設有安全防護與效能限制：
- 字元限制：輸入的 SVG 程式碼必須在指定的字元限制內，若超出限制，系統會顯示「這段 SVG 太大。請控制在
{max}個字元以內。」。 - 安全阻擋：為了防範 XML 實體注入等安全風險，本工具不支援含有文件類型（Document Type）或自訂實體（Custom Entity）宣告的 SVG 檔案。若偵測到此類宣告，將會顯示「這段 SVG 使用了文件類型或自訂實體。請刪除後再優化。」並阻擋處理。
- 逾時機制：若 SVG 結構過於複雜導致優化處理時間超過 15 秒，系統會自動中斷並顯示「處理時間過長,已停止——請換小一點的 SVG。」。
- 程序中斷：在優化進行中，若使用者清空輸入或變更輸入內容，系統會立即終止當前的優化程序。
錯誤訊息與狀態說明
在操作過程中，工具會根據輸入狀態即時回饋對應的提示：
| 狀態或錯誤情境 | 介面顯示文字 |
|---|---|
| 輸入區為空並嘗試優化 | 請先貼上 SVG 程式碼。 |
| 輸入內容不含任何 SVG 元素 | 沒有找到 <svg> 元素。 |
| 成功減少體積 | 已優化——體積減少 {pct}%（節省 {saved}）。 |
| 安全清理後檔案大小未變 | 已優化。安全清理後體積沒有減少。 |
| 其他未知錯誤導致無法處理 | 無法優化這段 SVG。 |
常見問題
它會清理哪些內容?
它會移除註解、metadata、編輯器命名空間、多餘的屬性空白、未使用的命名空間，並把顏色寫成更短的等價形式。viewBox、ID、標籤和幾何資料會保留。
所有 SVG 都能優化嗎?
普通內嵌 SVG 程式碼可以直接處理。帶文件類型或自訂實體宣告的 SVG 會被擋下，因為這類內容會讓解析不安全；刪除這些宣告後再試。
會改變圖形顯示嗎?
優化時不會改寫路徑、重新命名 ID、刪除 viewBox，也不會做小數精度捨入。如果你的設計流程依賴註解或 metadata，請保留一份原始 SVG。