SVG Optimizer 免費線上壓縮 SVG，實測檔案不上傳就縮掉 77%

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

一個 1,046 bytes 的測試 SVG，拖進 SVG Optimizer 的網頁，幾秒後變成 231 bytes，位元組直算壓掉 77.9%，與畫面顯示一致。這段期間我把瀏覽器的網路請求側錄下來：沒有任何一筆對外連線。這個工具在官網上主打兩件事，免費，以及檔案從頭到尾不離開你的瀏覽器，這兩件事在我這次測試都成立。

但有一件事比壓縮率更值得先講。我把它的壓縮引擎檔抓下來看，裡面留著開發者機器上的建置路徑，指向一個名為 svgomg 的資料夾，旁邊還有 SVGO 第一代引擎的依賴套件 csso 3.5.1。把這幾條線索擺在一起，這個看起來新的中文工具，壓縮核心是從 SVGOMG 那套開源專案編譯出來的第一代引擎，而 SVGOMG 自己的線上版現在跑的已經是第四代。它好用，也確實如宣稱地在瀏覽器本機處理檔案，但你該知道自己在用的東西是什麼來歷。

這輪實測：壓掉 77%，處理期間對外請求是零

我的測試檔不是乾淨樣板，而是刻意做得肥：開頭有 XML 宣告和註解，中間塞了 Inkscape 的編輯器資料、title、desc、一個沒用到的漸層定義，座標全部寫到小數點後七位，還有一個用 style 屬性寫的填色。設計軟體和繪圖軟體匯出的 SVG 常常就是這副樣子，編輯資訊跟著檔案走，體積自然膨脹，這也是壓縮工具最有發揮空間的場景。實際輸出 231 bytes，位元組直算的縮減比例與畫面顯示的 77.9% 對得起來。站方在頁面上寫能夠壓縮大約 50% 體積，拿我的測試檔對照，這個說法算保守，編輯殘留越多的檔案，壓縮率只會更漂亮。

網路流量的部分這樣看：等頁面完全載入後，把請求紀錄清空，接著上傳檔案、等它壓完。四秒的觀察窗裡，瀏覽器沒有發出任何新的對外請求。壓縮引擎是一支約 766KB 的 svgo-web.js，隨頁面一起載進瀏覽器執行，這是「檔案不上傳」宣稱能夠成立的結構性原因：引擎本來就在你這一端跑，伺服器端沒有收檔案的環節。站方提供拖入檔案、選擇檔案、直接貼原始碼三種輸入方式，我實測的是檔案上傳這條路。

引擎檔裡的建置路徑，標記著它的來歷

svgo-web.js 是壓縮的核心，我把它整支抓下來檢視內部字串，看到三個互相印證的特徵。最直接的是一段 Windows 路徑 E:\wamp\www\GitHub\svgomg，這是開發者編譯這支檔案時的工作資料夾，svgomg 正是 Jake Archibald 那套知名開源 SVG 壓縮介面的倉庫名稱。依賴版本也對得上：檔案裡的 csso 標記為 3.5.1，這是 SVGO 第一代用來壓縮樣式區塊的套件，後來的大版本已經換掉這套結構。外掛命名同樣停在過去：面板上的 cleanupIDs 用的是大寫 D 的舊式拼法，現在的版本早就改成小寫。

把這些特徵放在一起，結論可以講得很白：SVG Optimizer 的壓縮核心，指向有人在 Windows 電腦上把 SVGOMG 倉庫的程式碼複製下來，自行打包成的瀏覽器版引擎，SVGO 版本停在第一代。SVGO 與 SVGOMG 都是 MIT 授權的專案，這樣的取用在授權上是允許的；只是這個網站上找不到任何出處標示，頁尾只寫著 Powered by SVG Optimizer。對使用者的意義很實際：你不會因為換用它而拿到更新的演算法，論引擎世代它反而落在後面，細節在後面的比較段展開。

向量圖為什麼會肥：壓縮刪的是三類東西

SVG 本質上是文字檔，用標籤描述形狀、座標與樣式，它會肥，原因通常落在三類。一類是編輯器殘留：Inkscape、Illustrator 這類軟體為了來回編輯，會把圖層名稱、編輯器命名空間、metadata、註解一起寫進檔案，瀏覽器渲染時完全用不到。另一類是冗長寫法：座標寫到小數點後七位、顏色用完整六位十六進位、樣式集中在 style 屬性裡，這些對人眼和軟體友善，對解析器都是多餘的位元組。最後一類是結構鬆散：重複的群組、可合併的路徑、能用更短語法描述的形狀。

壓縮工具做的事情，就是對這三類東西分別下手。無損的部分刪了不影響畫面，像是編輯殘留與註解；寫法的改寫有數學上的等價性，例如座標捨入到第幾位、矩形改用路徑資料描述，畫出來的結果在螢幕上看不出差別。真正要留意的是會改變檔案行為的選項，例如把 viewBox 拿掉之後，圖就失去等比縮放的參考，只能照寫死的寬高呈現，放到響應式版面會出問題。看壓縮工具時該檢查的就是這個：預設值幫你避開了哪些地雷。

壓縮前後對照：刪掉編輯殘留，改寫冗長語法

輸出的 231 bytes 拿來逐項比對，看到的是道地 SVGO 的手法。XML 宣告、註解、metadata、title、desc、沒用到的漸層定義，全部刪除；Inkscape 的命名空間與圖層屬性清乾淨；矩形從 rect 元素改寫成 path 的路徑資料；#ff0000 縮寫成 red，#00ff00 縮成 #0f0；小數點後七位的座標收短，10.0000000 變成 10，50.5000000 變成 50.5。style 屬性裡的填色被抽出來變成 fill 屬性，多餘的線寬與描邊設定一併被清掉。整張圖的視覺結果不變，描述它的文字瘦了一大圈。

結果區的表格分成預覽、優化、操作三欄，預覽欄顯示壓縮後的渲染結果，壓完可以直接目視確認圖形沒有走樣，旁邊就是檔案大小變化與縮減百分比。整個過程不動你的原檔，輸出是另外複製或下載出來的新內容，原檔留在原處，來回嘗試不同參數組合沒有覆蓋風險。壓縮工具的介面做到這個程度，該有的確認迴路算是齊的。

Pin

右側的參數面板，是把 SVGO 的三十九個外掛逐項翻成中文標籤讓你勾選，從移除註解、壓縮樣式到圖形轉路徑都在裡面，每勾一項結果即時重算。預設勾了三十一項，前面提到的 viewBox 地雷預設是關閉的，這點做得比第一代 SVGO 指令列的預設值安全，第一代預設會刪 viewBox，新版已經改為預設不刪。有資安意識的細節在這裡：移除 script 元素的選項預設是關閉的，嵌有腳本的 SVG 壓完之後，腳本會原樣保留。處理自己或可信來源的圖檔無妨，但拿別人給的 SVG 要轉貼上線時，這種預設得多想一下。另外要注意這些標籤的用字是簡體中文，這個站提供簡中介面並掛廣告，繁體用字不在它的規劃裡。

Pin

四種拿結果的方式，Base64 與 CSS 都實際點過

壓完之後的操作欄有五個按鈕：複製優化、下載、複製 Base64、複製 CSS、刪除。前兩個直觀，後兩個我實際點開讀了剪貼簿內容：複製 Base64 給你 data:image/svg+xml;base64 開頭的字串，可以直接塞進 img 標籤的 src；複製 CSS 給的是百分比編碼的 data URI，貼到樣式表的 background-image 就能用。站方文案寫的「URL 編碼格式」指的就是後者這種寫法。要把向量圖直接嵌進網頁或樣式表、不想多管理一個檔案的人，這兩顆按鈕省掉自己轉檔的功夫。

檔案不外流，不代表頁面沒有追蹤

這是最需要分開來看的兩件事。SVG 檔案確實不離開瀏覽器，實測成立；但頁面本身在載入時拉了兩個第三方腳本，一個是 Google AdSense 的廣告腳本（發布商編號 ca-pub-2737057559362179），另一個是 Cloudflare 的 Insights beacon，這類腳本會回報頁面載入與訪客行為的統計。它的隱私政策寫著不使用任何第三方分析服務、不用 Cookie 做追蹤，字面上確實沒有 Google Analytics，但 Cloudflare 那顆 beacon 本身就是第三方的量測腳本，廣告聯播在多數情境下也會帶 Cookie。圖檔隱私與瀏覽隱私是兩回事：前者這個工具顧到了，後者要看你自己介不介意。

網站本身也是匿名格局：沒有公司名稱、沒有 GitHub 連結，聯絡方式是一個 gmail 信箱；隱私政策的最後更新停在 2024 年 6 月，首頁頁尾寫 2026，政策頁頁尾寫 2025。工具能用是一回事，要把它放進長期工作流之前，這些背景都是該先知道的事。站方另在同一個網域經營一個 SVG 編輯器頁面。

和 SVGOMG 擺在一起看，差異集中在四條

既然引擎同源，選擇就變得單純，但先把世代講清楚。SVGOMG 的線上版頁面自己標著 Powered by SVGO v4.0.0，跑的是現在這一代引擎；SVG Optimizer 用的第一代引擎，中間隔了三次大版本改寫。落差在哪裡可以用操作面看出來：SVGOMG 提供數字精度、多次處理、gzip 後大小對照這些全域設定，SVG Optimizer 的面板只有勾與不勾，沒有精度數值可以調，也沒有 gzip 對照；而網頁送檔通常會經過 gzip，壓縮率只看原始位元組其實會高估差距：我把實測的測試檔兩個版本分別壓縮，原檔 gzip 後是 551 bytes，優化後的輸出 gzip 後是 192 bytes，帳面 78% 的縮減，經過伺服器壓縮後實際差距是 65%。要精算傳輸體積的人，SVGOMG 那個 gzip 對照開關是認真做的。輸入方式倒是差不多，兩邊都能開檔或直接貼原始碼，SVGOMG 的標語從頭到尾就寫著它是「SVGO 缺的那個 GUI」。SVG Optimizer 的優勢也很清楚：簡體中文介面、Base64 與 CSS 兩種即用輸出、不限檔案大小，這些 SVGOMG 要嘛沒有要嘛要自己動手。兩邊都免費、都在瀏覽器本機處理，真正的差異軸就四條：引擎世代、操作語言、輸出格式，以及你願不願意在壓圖的時候看廣告。

如果你的需求還沒走到壓縮這一步，站內先前的文章可以接起來看：要為網站產生 SVG 格式的 favicon，有 SVG favicon 產生器的介紹；要把文字直接轉成 SVG 向量圖，可以看 texttosvg.app 的實測；做完的向量圖再拿到這類工具壓小，整條鏈就完成了。

臨時壓圖走它，天天要壓的人走別條路

臨時要把一張 SVG 壓小、手上沒有裝任何工具、也不介意簡中介面和廣告，它是最快的一條路：打開頁面，拖檔案進去，按下載，結束，整段不需要註冊或付款。日常工作流裡要反覆處理大量 SVG 的話，我會把重心放在更可問責的選項：SVGO 本身有 npm 套件形式的指令列可以進腳本，編輯器也有對應外掛，或至少用開源可查的 SVGOMG，這些都有明確的出處和版本可以對。公司環境的判斷也順帶說一句：就算檔案確認不出你的瀏覽器，這個頁面本身仍是第三方寫的程式碼，連同廣告與量測腳本一起跑在你的機器上，管控嚴格的環境連開這個頁面都該先過內部規範，這不是這個站特有的問題，是所有線上工具共同的邊界。最後留一個未驗證的點給你自己試：站方宣稱檔案大小無上限，我只在 Chromium 系瀏覽器上測了小檔，巨型檔案的行為沒有實測過，第一次用先拿不重要的檔案練手比較穩。