在 Mac 上最佳化與壓縮 SVG 檔案
清除 Figma、Illustrator 和 Inkscape SVG 中的編輯器殘留內容並四捨五入座標，檔案更小，外觀不變。
在 Mac 上使用「SVG 最佳化」
App 的截圖，使用範例檔案。
如何使用「SVG 最佳化」
- 1
拖入你的 SVG
加入從 Figma、Illustrator、Inkscape 或 Sketch 輸出的 SVG 檔案，一個或多個皆可。
- 2
選擇精確度
兩位小數適合大多數圖示和插圖。
- 3
決定 ID 和標題
移除未使用的 ID；如果 SVG 需要供螢幕閱讀器描述，請保留標題。
- 4
按一下「最佳化」
註解、中繼資料和編輯器殘留內容會被移除，數字也會四捨五入。App 會顯示處理前後的總大小。
- 5
比較兩者
最佳化後的副本會在名稱中加上「optimised」，儲存在「下載項目 › OneMacTools」的日期資料夾中。可用「預覽」（眼睛）按鈕確認外觀相同。
「SVG 最佳化」的功能
移除註解、中繼資料、編輯器專用的元素和屬性、空群組、未使用的 ID 和多餘的小數位數，同時保持形狀不變。可選擇 1、2 或 3 位小數，以及是否為螢幕閱讀器保留標題，再用「預覽」比較。
適合用於
- 網站上線前先縮小圖示
- 清理輸出的插圖
- 讓 SVG 程式碼更易讀
選項說明
- 小數位數
- 1、2 或 3，預設為 2。形狀、位置和大小中的數字會四捨五入到這個小數位數。細小或非常精細的圖稿用 3，大型、簡單的形狀用 1。
- 移除未使用的 ID
- 預設開啟。移除檔案中沒有任何地方引用的 id 屬性。如果你的 CSS 或 JavaScript 以 ID 選取元素，請關閉此選項。
- 保留標題（供螢幕閱讀器使用）
- 預設開啟。保留 <title> 和 <desc> 元素，螢幕閱讀器會用它們描述影像。純裝飾用的 SVG 可以關閉此選項。
最佳做法
- 小圖示請用 2 或 3 位小數檢查。四捨五入到 1 位可能會讓 16 或 24 px 圖示的細節偏移。
- 對於會以 ID 製作動畫或設定樣式，或使用 aria-labelledby 指向標題的 SVG，請關閉「移除未使用的 ID」。
- 圖表和示意圖等有意義的影像，請開啟保留標題，讓它們保持無障礙。
- 在 HTML 中內嵌 SVG 或用「影像轉 Base64」轉換之前，先進行最佳化；省下的每個位元組，在每次載入頁面時都會省下。
- 請保留原始輸出檔。最佳化後的檔案是用於發佈的，不適合再拿回設計 App 中編輯。
搭配使用
- 輸入
- SVG 檔案。
- 輸出
- 名稱加上「optimised」的最佳化 SVG。
- 移除註解、中繼資料、編輯器專用的元素和屬性（來自 Inkscape、Sketch、Illustrator、Figma 等）、空群組和 XML 宣告。
- 不是有效 SVG 的檔案會列出回報，而不會被更改。
關於「SVG 最佳化」的問題
如何縮小 SVG 檔案？
將它拖到「SVG 最佳化」上並點按「最佳化」。編輯器殘留內容、註解和中繼資料會被移除，冗長的小數也會四捨五入，檔案變小但外觀不變。
最佳化會改變 SVG 的外觀嗎？
不應該會。形狀會保持原位，數字只會四捨五入到你選擇的小數位數。可用「預覽」按鈕比較；非常小、細節繁多的圖示請使用 3 位小數。
為什麼從 Figma 或 Illustrator 匯出的 SVG 這麼大？
設計 App 會加入瀏覽器不需要的中繼資料、編輯器專用屬性，以及小數位數很多的數字。移除這些內容通常能明顯縮小檔案。
什麼是未使用的 ID？
檔案中沒有任何地方引用的 id 屬性，通常是圖層名稱留下來的。除非你自己的 CSS 或 JavaScript 有用到，否則可以放心移除。
我應該保留 SVG 中的標題嗎？
需要，如果圖片有實際意義（例如圖示按鈕或圖表），螢幕閱讀器才能描述它。純裝飾性的圖片可以移除。
可以一次最佳化多個 SVG 嗎？
可以。拖入整組圖示，每個檔案都會產生自己的最佳化副本。
「SVG 最佳化」會上傳我的檔案嗎？
不會。「SVG 最佳化」完全在你的 Mac 上執行，檔案絕不會離開你的 Mac，也能離線使用。
「SVG 最佳化」會更改我的原始檔案嗎？
不會。結果會另存為新檔案，放在「下載項目 › OneMacTools」中以日期命名的資料夾；除非你開啟了另有說明的選項，否則原始檔案會完全保持原樣。
「SVG 最佳化」需要什麼？
只需要一台搭載 macOS 26 或以上版本的 Mac。不需另外安裝任何東西。
接下來這樣做
將影像轉成 Base64 data URI，可直接貼到 HTML、CSS 或 JSON 中。
Sprite 圖產生器將圖示打包成一張影像，附上顯示各圖示的 CSS 和 HTML 預覽。
