跳到主要內容

SVG 轉 WebP

把 SVG 向量圖光柵化成 WebP,可自選輸出尺寸、放多大都清晰,全程在瀏覽器本機完成。

92

我們自己測的:真實檔案大小

設定: 輸出寬度 512 px(預設值)

測試項目轉換前轉換後變化
向量圖512×341574 B6.6 KB+1082%
這些數字告訴你

同一張圖在寬 512 px 下是 6.6 KB,對照 JPG 的 13.2 KB、PNG 的 17.9 KB。所以如果非得離開向量,WebP 是三者裡最省的點陣格式,而且還留得住透明。不過它仍是那個 574 位元組 SVG 的將近 12 倍,而 SVG 放到多大都清楚。

2026-07-28 用 Chromium 151.0.7922.34 把這幾個檔案丟進「這一頁」實際跑出來的結果。每一頁都用同一組公開的測試檔,所以不同轉換器之間的數字可以互相比較。測試方法與原圖下載 →

SVG 轉 WebP 是什麼?

這個工具把 SVG(向量圖)光柵化WebP 點陣圖。因為 SVG 用數學路徑描述、可無限縮放,你可以先選好輸出尺寸再轉,放多大都清晰。整個過程都在你的瀏覽器本機完成,不上傳。WebP 是 Google 推出的現代網頁格式,同時支援透明與更高壓縮率,通常比 JPG/PNG 小 25–35%,很適合網站加速;少數老舊軟體可能不支援。

如何使用

  1. 選擇或拖入你的 SVG 檔(可多選)。
  2. 選擇輸出寬度(高度會依比例自動計算)。
  3. 按「下載」儲存 WebP;多檔可一次打包成 zip。

為什麼要先選尺寸

SVG 是向量,本身沒有固定像素;轉成 WebP 這種點陣格式時必須決定要多少像素。若直接用 SVG 內建的小尺寸(常見於圖示,如 24×24),輸出就會很小又模糊。先選好較大的寬度再光柵化,才能得到銳利的高解析結果——這也是「svg to webp high quality」真正需要的做法。

SVG 本來更小更清晰,為什麼還要轉 WebP?

好問題——如果目的地吃得下 SVG,你其實不必轉:SVG 通常更小、能無限放大又不糊。會需要轉 WebP,幾乎都是因為目的地不接受 SVG:

  • 很多社群平台、商城、留言區、老 CMS 不准上傳 .svg(常以資安為由),但收 WebP。
  • SVG 內含外部字型或濾鏡,到別的環境會走樣;轉成點陣的 WebP 能把畫面「定稿」,所見即所得。

WebP 的好處是同時保留透明又檔案小,是點陣化 SVG 時的首選;只有面對很舊、不支援 WebP 的環境,才退回 PNG。記得比照 SVG→PNG 先想好輸出尺寸,點陣化後就放大不了了。

三者中最小,那為什麼不是預設選擇?

實測上這個出口最省:574 B → 6.6 KB(+1082%),而 JPG 要 13.2 KB、PNG 要 17.9 KB —— WebP 只有 PNG 的三分之一多一點,而且同時保住透明(JPG 做不到)。那為什麼不無腦選它?因為相容性是這裡唯一真正的變數。WebP 在 Safari 14(2020)之前不被支援,而且有些桌面軟體、CMS 上傳欄位、電子郵件用戶端到今天仍然不收。判斷方式很實際:你控制得了顯示端嗎?自己的網站 → 用 WebP,必要時用 <picture> 附後備。要寄給別人、貼進別人的系統、或不確定 → PNG 大得多但沒有人不認。另外注意那 +1082%:即使最省的出口,點陣化本身就是十倍以上的代價,所以原始的 SVG 一定要留著。

常見問題

SVG 轉成點陣,哪個格式最小?

WebP,而且差距明顯。在同樣的預設寬度 512 px 下,574 位元組的測試 SVG 轉出來是 WebP 6.6 KB、JPG 13.2 KB、PNG 17.9 KB。WebP 還保得住透明,JPG 不行,所以兩項它都贏。唯一該改選 PNG 的理由,是對方到現在還讀不了 WebP。

我的 SVG 會被上傳嗎?

不會。轉換全程在你的瀏覽器本機以 Canvas 完成,SVG 不會上傳到任何伺服器,也不會被儲存。

SVG 轉 WebP 可以放大不模糊嗎?

可以。SVG 是向量、可無限縮放;本工具讓你先選較大的輸出寬度(例如 1024 或 2048px)再光柵化,就能得到清晰的高解析 WebP。

該選多大的尺寸?

favicon 或圖示選 256–512px;一般網頁圖片選 1024px;要印刷或當大圖選 2048px 以上。尺寸越大越清晰,檔案也越大。

WebP 會保留透明背景嗎?

會。WebP 支援透明,SVG 的透明區域會被保留。

延伸閱讀

SVG 轉 PNG 怎麼做?挑對解析度才不會模糊 →

嵌入此工具

把這個工具免費放進你的網站或部落格 —— 複製下面的程式碼貼上即可(內含一條回到本站的連結)。