SVG 是向量圖:用數學路徑描述圖形、不是像素,所以放到任何尺寸都不會模糊。PNG 則是點陣圖:一格一格固定的像素。把 SVG 轉成 PNG(稱為「光柵化」)就是把那些可無限縮放的路徑,固定成某個像素數量。而其中最關鍵的決定,就是要用多大的尺寸來輸出——這直接決定你的 PNG 是清晰還是糊掉。
這件事我們自己測過。 我們的測試圖是 574 位元組的 SVG 文字。在寬 512 px 下點陣化後,PNG 是 17.9 KB、JPG 是 13.2 KB、WebP 是 6.6 KB——大約是原本的 12 到 32 倍,而且不再能無限放大。點陣化是為了應付不吃 SVG 的軟體,不是為了省空間。 看完整實測數據
為什麼一定要先選尺寸
照片有它天生的解析度,SVG 沒有。匯出成 PNG 時,一定得有個東西來決定像素尺寸。如果工具直接拿 SVG 內建的 width/height(圖示常常很小,例如 24×24),你就會得到又小又糊的 PNG。一開始就選較大的輸出寬度,同一個向量就能在 512、1024 或 2048 像素下銳利呈現。這正是「svg to png 高畫質」這類需求真正需要的做法。
所以你選的尺寸是一個尺寸決定,不是細節。我們那張示意圖是 574 B 的向量指令,可以在任何尺寸渲染;一旦匯出,那個檔案就被綁在一個像素網格上,轉成 PNG 要 17.9 KB。照你真的會顯示的最大尺寸匯出、高密度螢幕用 2×、不要再多 —— 每一個多出來的像素,每一次頁面載入都要付一次。
該選多大的解析度
| 用途 | 建議寬度 |
|---|---|
| favicon、小型 UI 圖示 | 256–512 px |
| 部落格圖片、App 素材 | 1024 px |
| 印刷、主視覺大圖 | 2048 px 以上 |
尺寸越大越清晰,但檔案也越大。不確定時,用你實際顯示尺寸的 2 倍來輸出——高像素密度螢幕(Retina、多數手機)會因為多出的細節而更好看。
尺寸這個選擇的代價,這裡有實測。測試向量圖只有 574 B 的 SVG 文字。在預設 512 px 寬點陣化之後,轉 PNG 是 17.9 KB(+3087%)、轉 JPG 是 13.2 KB(+2262%)、轉 WebP 是 6.6 KB(+1082%)。SVG 比三者都小兩個數量級,因為它存的是指令而不是像素 —— 而你一旦點陣化,檔案就隨你選的寬度平方成長。
該選 PNG、JPG 還是 WebP?
- SVG 轉 PNG — 無損、且保留透明背景。最適合 logo、圖示與任何需要透明的圖。
- SVG 轉 JPG — 檔案更小,但不支援透明(空白處會變白底)。平面插圖放在單色背景上很合適。
- SVG 轉 WebP — 現代格式,檔案小又支援透明,最適合網站。
如果你的 SVG 是透明背景卻轉成 JPG,透明區域就會被填成白色——需要保留透明時,請選 PNG 或 WebP。
上面那個排序就是這一節的答案:同樣 512 px 下,WebP(6.6 KB)贏 JPG(13.2 KB),JPG 贏 PNG(17.9 KB)。WebP 還保得住透明,JPG 不行 —— 所以除非對方真的讀不了 WebP,這個選擇已經替你決定了。
點陣化之後選什麼格式,通常才是意外發生的地方,所以下面是測試語料庫裡同一張 574 B 的示意圖,通過三個轉換器:
| 轉換 | SVG 輸入 | 結果 | 變化 |
|---|---|---|---|
| SVG → PNG | 574 B | 17.9 KB | +3087% |
| SVG → JPG | 574 B | 13.2 KB | +2262% |
| SVG → WebP | 574 B | 6.6 KB | +1082% |
每一個都遠大於它來源的那個向量檔 —— PNG 17.9 KB、JPG 13.2 KB、WebP 6.6 KB —— 因為 SVG 存的是少數幾條圖形指令,而點陣圖存的是那些指令剛好覆蓋到的每一個像素。這就是點陣化真正的代價,也是你要把 SVG 留著的原因。
在瀏覽器本機、隱私地完成
我們的轉換器完全在你的裝置上光柵化——SVG 不會被上傳:
- 拖入一個或多個 SVG 檔。
- 選擇輸出寬度;高度會依長寬比自動計算。
- 下載結果,或一次打包成 zip。
反過來:PNG 轉回向量
反方向——把 logo 的 PNG 變回可縮放的向量——是另一種叫「描摹(trace)」的處理。若你需要的是那個,請看 PNG 轉 SVG 怎麼做,裡面說明了向量化什麼時候好用、什麼時候不適合。
讓文字與細線保持銳利
有兩件事會悄悄毀掉光柵化後的 SVG。第一是字型:如果你的 SVG 參照了算圖端沒有的字型,文字會被默默換成替代字型,版面也跟著跑掉。在光柵化前,先把 SVG 裡的文字轉為外框(路徑),就能保證字形在哪都長得一樣。第二是極細線條:24×24 下的 1px 線,放到 512 會變成約 21px 依然銳利;但若用比實際顯示還小的尺寸算圖,瀏覽器就得把點陣圖放大——那種糊,常被誤怪到格式頭上。
關於 DPI 的小提醒
PNG 存的是像素,不是英吋,所以在螢幕上「DPI」無關緊要——1024px 的圖就是 1024px,標籤寫 72 還是 300 都一樣。它只在印刷時才重要:實體尺寸 × 目標 DPI = 像素。一張要印 4 英吋寬、300 DPI 的圖需要 1200px;150 DPI 則要 600px。所以要印刷時,請從成品尺寸反推,至少輸出到那麼多像素。
常見錯誤
- **讓工具直接用 SVG 內建的小尺寸。**24×24 的圖示就會匯出成 24×24 的 PNG。務必自己設定輸出寬度。
- **放大一張小 PNG,而不是重新算圖。**把點陣圖放大只會更糊;用目標尺寸重新光柵化向量才會銳利。
- **把透明的 SVG 轉成 JPG。**透明會被填成白色。要保留就用 SVG 轉 PNG 或 WebP。
常見問題
為什麼我匯出的 PNG 有白底? 不是 SVG 本身有一塊背景矩形,就是你匯出成了不支援透明的格式。要真正透明的輸出,得用 PNG 或 WebP。
PNG 檔案太大,怎麼縮小? 只算到你需要的大小,再丟進圖片壓縮,就能在看不出畫質下降的前提下縮小檔案。
想全面比較各格式,網頁最適合的圖片格式把 PNG、JPG、WebP 並排比較;若你要的是圖示,可看如何製作 favicon。