SVG 是向量圖:用數學路徑描述圖形、不是像素,所以放到任何尺寸都不會模糊。PNG 則是點陣圖:一格一格固定的像素。把 SVG 轉成 PNG(稱為「光柵化」)就是把那些可無限縮放的路徑,固定成某個像素數量。而其中最關鍵的決定,就是要用多大的尺寸來輸出——這直接決定你的 PNG 是清晰還是糊掉。
為什麼一定要先選尺寸
照片有它天生的解析度,SVG 沒有。匯出成 PNG 時,一定得有個東西來決定像素尺寸。如果工具直接拿 SVG 內建的 width/height(圖示常常很小,例如 24×24),你就會得到又小又糊的 PNG。一開始就選較大的輸出寬度,同一個向量就能在 512、1024 或 2048 像素下銳利呈現。這正是「svg to png 高畫質」這類需求真正需要的做法。
該選多大的解析度
| 用途 | 建議寬度 |
|---|---|
| favicon、小型 UI 圖示 | 256–512 px |
| 部落格圖片、App 素材 | 1024 px |
| 印刷、主視覺大圖 | 2048 px 以上 |
尺寸越大越清晰,但檔案也越大。不確定時,用你實際顯示尺寸的 2 倍來輸出——高像素密度螢幕(Retina、多數手機)會因為多出的細節而更好看。
該選 PNG、JPG 還是 WebP?
- SVG 轉 PNG — 無損、且保留透明背景。最適合 logo、圖示與任何需要透明的圖。
- SVG 轉 JPG — 檔案更小,但不支援透明(空白處會變白底)。平面插圖放在單色背景上很合適。
- SVG 轉 WebP — 現代格式,檔案小又支援透明,最適合網站。
如果你的 SVG 是透明背景卻轉成 JPG,透明區域就會被填成白色——需要保留透明時,請選 PNG 或 WebP。
在瀏覽器本機、隱私地完成
我們的轉換器完全在你的裝置上光柵化——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。