好，今天我們來聊聊 SVG 壓縮。嗯... 我知道很多人聽到這個，第一個反應就是「喔，我知道，就那個 SVGOMG 網站，丟進去，下載，搞定」。對，這沒錯，但... 但這只做了大概 30% 的事情吧。如果你真的想把網站速度，尤其是跟 Core Web Vitals 有關的指標，還有那個... SEO 分數做上去，那只懂這個是遠遠不夠的。
很多時候，問題不在於「有沒有壓縮」，而在於「壓得聰不聰明」。亂壓一通，有時候會把 SVG 裡頭重要的東西，像是做動畫要用的 ID 啊、CSS class 啊，都給搞丟了。結果檔案是變小了，但整個功能都壞了，那... 那有什麼用，對吧？所以，今天我想從頭講清楚，SVG 優化到底是在做什麼，以及怎麼做才是對的。
重點一句話
簡單講，聰明的 SVG 壓縮，目標是在「不影響視覺和功能」的前提下，盡可能移除所有多餘的資料，來換取更快的載入速度，這對 Core Web Vitals 和 SEO 排名有直接幫助。
來看個實際例子，差異有多誇張
光說可能沒感覺，我們直接看個圖。這是我之前在一個專案裡頭遇到的，一個... 一個客戶給的 Logo SVG 檔案，設計師直接從 Adobe Illustrator 存出來的。你看那個檔案大小，真的有夠誇張。
你看，從 212KB 變成 18KB，少了快... 90% 以上吧。而且，重點是，這兩張圖你看起來會覺得有差嗎？根本沒有。這就是我們要追求的「無損優化」或說「視覺上無損」。使用者根本感覺不出來，但瀏覽器載入速度是天差地遠。你想想看，如果你的網頁用了十幾個這樣的圖示... 那個累積下來的速度差異就很可觀了。
SVG 壓縮怎麼做？從入門到進階的 5 種方法
好，那接下來就是重點了，到底要怎麼做到這件事？我把它分成五種方法，從最簡單無腦的，到需要整合到開發流程裡的專業做法。
方法一：無腦首選，使用線上壓縮工具
這個就是大家最熟的。把 SVG 檔案拖到網站上，它就幫你處理好。目前市場上最強的，應該還是 Jake Archibald 開發的 SVGOMG。 它是個網頁版的 SVGO... SVGO 等等會講，它是一個優化引擎。
但用 SVGOMG 不是丟上去就好。我拜託你，一定要看看右邊那一排開關。像是「Clean up IDs」、「Remove metadata」... 你要去理解每個選項是幹嘛的。例如，如果你的 SVG 只是個靜態圖示，那「Remove scripts」跟「Remove styles」大概都可以開。但如果你的 SVG 本身就帶有互動或動畫，那你亂開選項，可能就會把它壓壞。所以，花點時間去玩玩看那些設定，很重要。
方法二：硬派作風，手動編輯 SVG 程式碼
如果你... 你膽子比較大，或是想完全掌控，你可以直接用 VS Code 或任何程式碼編輯器打開 SVG 檔案。你打開會發現，它其實就是一堆 XML 格式的文字。
你會在檔案開頭看到很多... 很多垃圾資訊。像是 ``，或者是一大堆 Adobe Illustrator 自己加的註解和元數據。這些東西對瀏覽器渲染 SVG 一點幫助都沒有，都可以直接刪掉。還有像是空的 `
方法三：從源頭管理，優化設計軟體的匯出設定
這是我覺得最理想的狀況，就是在設計師產出檔案的時候，就先做好第一步的優化。不管是 Adobe Illustrator、Figma 還是 Sketch，在匯出 SVG 的時候都有一些選項可以設定。
舉例來說，Illustrator 裡面有個「小數點位數」(Decimal Places) 的選項。欸，說真的，一個小小的圖示，你路徑的座標需要精確到小數點後 4、5 位嗎？根本不用。通常設個 1 或 2 就綽綽有餘了，光是這個動作就能省下超多檔案空間。 Figma 的設定比較少，但它預設匯出的 SVG 算是滿乾淨的。重點是，在設計階段就養成好習慣，可以省下後續工程師很多麻煩。
方法四：整合到開發流程，用 SVGO 自動化處理
好，這部分是給開發者看的，也是我覺得最專業、最一勞永逸的做法。你應該把 SVG 優化這件事，變成你前端建構流程 (build process) 的一部分。我們要用的工具就是 SVGO (SVG Optimizer)，它就是 SVGOMG 背後的那個引擎。
你可以在你的 Vite 或 Webpack 設定檔裡面，加入 SVGO 這個 plugin。設定好之後，未來只要你在專案裡用到任何 SVG 檔案，它在打包上線前，就會自動幫你執行優化。你只要設定一次規則就好。例如，你可以設定說「所有 SVG 都要移除註解」、「路徑精度統一到小數點後一位」等等。
對了，這邊有個小細節。我看 Google 的 web.dev 網站上講的性能優化，比較是原則性的建議。 但如果你去看一些台灣本地開發者的部落格，像是 iT 邦幫忙上面的文章，他們會提供很具體的 Vite 設定檔範例。 像是我之前參考的一篇，它的 `vite.config.js` 寫法就跟 SVGO 官方文件有點不一樣，主要是為了適配 Vite 的插件系統。這種在地化的實戰經驗，有時候比看官方文件還好懂。
方法五：回歸設計本質，簡化路徑與形狀
最後這個方法，其實更像是一個... 一個觀念。就是，最有效的壓縮，來自於最簡單的設計。一個 SVG 檔案的大小，很大程度取決於它路徑 (`
所以，與其事後用工具去猜、去簡化，不如在設計的時候，就盡量用最少的錨點去畫出想要的圖形。另外，如果能用 SVG 的基本形狀，像是 `
壓縮方法這麼多，該怎麼選？
我知道，聽起來好像很複雜。其實你可以根據你的情境來選。我弄了個簡單的比較表，讓你比較好懂。
| 壓縮方法 | 優點 | 缺點 / 風險 | 適合情境 |
|---|---|---|---|
| 線上工具 (如 SVGOMG) | 超快、超簡單，不用安裝任何東西。視覺化的介面讓你知道每個選項的效果。 | 呃... 就是你可能會手殘，把不該關的選項關了，導致 CSS 或 JS 失效。而且每次都要手動做，很煩。 | 臨時需要處理一兩個 SVG 檔案，或是你想測試不同壓縮參數的效果時，超好用。 |
| 手動編輯程式碼 | 完全的控制權！你可以精準地刪掉你想刪的，留下你需要的。有時候... 感覺還蠻爽的。 | 風險最高。很容易就改錯東西，整個檔案就掰了。而且超花時間，效率很低。 | 當自動化工具有問題，或你需要做一些非常規的修改，像是手動調整某個路徑時，才會這樣幹。 |
| 建構工具 (如 SVGO) | 一勞永逸！設定一次，整個專案的 SVG 都自動處理好。可以確保團隊產出的 SVG 風格一致。 | 需要懂一點前端工程，要會設定 Webpack 或 Vite。初期設定... 嗯... 可能要花點時間 debug。 | 只要是正式的、有規模的網站或應用程式專案，都應該用這個方法。這是專業的標準做法。 |
| 設計軟體匯出 | 從源頭解決問題，最有效率。可以讓後續的工程師省下很多力氣。 | 前提是... 你家的設計師要知道這件事，而且願意配合。這需要跨團隊溝通。 | 理想的工作流程。設計師在交付檔案時，就已經是初步優化過的版本。 |
幾個我常見的「壓壞了」的慘案
最後，分享幾個我血淋淋的教訓，也就是最常把 SVG 搞壞的幾個操作，你千萬要避開。
第一個，移除 `viewBox` 屬性。千萬不要。`viewBox` 是 SVG 的心臟，它定義了 SVG 的座標系統和長寬比。 你把它拿掉，SVG 很可能就不知道自己該多大，有時候會變得超大，有時候會直接消失。
第二個，過度簡化路徑。有些壓縮工具為了極致縮小檔案，會非常激進地去減少路徑錨點。結果就是... 你的 Logo 從一個漂亮的曲線變成一坨... 一坨看起來像融化掉的東西。所以，壓縮後一定要再三檢查，視覺上是不是還能接受。
第三個，清掉互動需要的 ID 或 class。這我前面提過了，但真的太重要所以再講一次。如果你的 SVG 是個可以點的按鈕，或是裡面有某個部分要用 JavaScript 控制它動起來，那你千萬不能把它的 ID 或 class 名稱給清掉。SVGOMG 有個 "Clean up IDs" 的選項，如果你有用到 ID，記得要把它關掉，或是設定好前綴，避免誤刪。
總之，SVG 優化是個細活。它不是單純追求檔案小，而是要在檔案大小、視覺品質和功能完整性之間，找到那個最甜的... 甜蜜點。希望今天的分享對你有幫助。
你平常壓縮 SVG 都用哪一招？
聊了這麼多，也想知道大家平常是怎麼處理 SVG 的。來投個票吧！
