PNG 是由像素組成的,放大就會糊;SVG 是由數學路徑組成的,放到多大都銳利。把 PNG 轉成 SVG——也就是向量化或描摹(trace)——對 logo 和圖示是超好用的一招,但對照片就是壞主意。這篇教你怎麼分辨。
這件事我們自己測過。 描邊只有在「圖本來就由純色塊組成」時才划算。我們那張透明標誌從 28.8 KB 變成 1.7 KB,省下 94%,而且從此可以無限放大。照片則完全反過來:1.88 MB 的 PNG 變成 7.74 MB 的 SVG 路徑,是原本的四倍。 看完整實測數據
點陣 vs 向量,一句話
- 點陣(PNG、JPG、WebP):一格格彩色像素。適合照片;放大會出現方塊。
- 向量(SVG):用數學描述的形狀。可無限縮放、檔案通常很小,最適合 logo 與印刷。
「描摹」實際在做什麼
轉換器沒辦法神奇地知道你圖裡的形狀,它是在近似:把顏色相近的區塊歸群,重畫成向量路徑。所以結果是對原圖的乾淨「詮釋」,不是像素級的複製。顏色越少、邊緣越銳利,描摹效果越好;平滑漸層與細節多的圖,效果越差。
什麼情況 PNG 轉 SVG 效果極好
- logo 與圖示:平面色塊、邊緣清楚
- 線稿與簡單插圖
- 想在任何螢幕或印刷上都銳利的黑白標誌
這些用 PNG 轉 SVG 會產生小又可縮放的檔案,放進網站或放大成大型看板都不糊。
支持描邊的實測理由很窄,但很決定性。我們的透明標誌 28.8 KB → 1.7 KB(-94%),而且變成可以無限放大 —— 那是我們全部數據裡單筆最大的勝利。那就是「顏色少、邊緣銳利」能換到的東西。
什麼時候該維持點陣圖
- 照片——描摹照片會產生成千上萬條雜亂路徑、檔案反而更大、成品也難看。
- 複雜漸層或紋理——同樣的問題。
照片請維持點陣格式,改用圖片壓縮來控制大小。
反對它的實測理由一樣清楚。同一個工具把平面插畫變成 34.7 KB → 117.0 KB(+238%)、介面截圖 18.0 KB → 27.3 KB(+52%)、照片 1.88 MB → 7.74 MB(+312%)。描一張 JPG 照片更糟,330.2 KB → 7.49 MB(+2224%)。每一塊顏色都變成一條路徑,而一張照片有好幾萬塊。
如何轉檔(且保護隱私)
以下工具全程在你的瀏覽器本機描摹,圖片不會上傳:
選個細節等級、看預覽、下載。如果描摹版看起來乾淨,你就有了一個永遠不會糊掉的 logo;如果看起來雜,那張圖就是該留在 PNG。
快速判斷表
| 你的圖 | 適合描摹成 SVG? | 原因 |
|---|---|---|
| 平面色塊 logo、2～4 色 | 適合 | 邊緣乾淨、檔案極小 |
| 圖示或線稿 | 適合 | 路徑放到多大都銳利 |
| 含文字的截圖 | 通常不適合 | 抗鋸齒邊緣會變成雜亂路徑 |
| 照片 | 不適合 | 上千條路徑、檔案更大、成品更差 |
| 漸層或紋理圖 | 不適合 | 平滑色調無法化約成純色形狀 |
一個具體例子
想像一個黑白社團 logo,存成 512 px 的 PNG。放大貼到海報上,邊緣就碎成一階一階的像素;把它描摹成 SVG,同一個標誌放到多大印出來都銳利,而且常常不到 10 KB。同一招用在全家福照片上就完全相反:描摹器找不到單一形狀可依循,於是把整張圖切成上千塊色斑,檔案暴增,皮膚和天空看起來像「按號碼填色」的海報。同一個工具、相反的結果——因為一張圖是由形狀組成,另一張是由連續色調組成。
下面是描邊在兩個非常不同的輸入上實際做出來的結果:
| 測試圖 | 輸入 | 輸出 | 變化 |
|---|---|---|---|
| 帶透明的標誌 | 28.8 KB | 1.7 KB | -94% |
| 螢幕截圖 | 18.0 KB | 27.3 KB | +52% |
平面的標誌描出來是 1.7 KB(-94%)—— 真的划算,因為少數幾個圖形就能把它完整描述。螢幕截圖是 18.0 KB → 27.3 KB(+52%):描邊器必須為每一塊顏色相近的區域產生一條路徑,而一張滿是文字的截圖有好幾千塊。那個落差就是判斷規則。如果描邊之後檔案變大,那張圖本來就不是向量的材料。
常見誤解
- 「SVG 一定比較小。」 只有簡單圖形才是。描摹過的照片通常比原本的 PNG 還大。
- 「描摹能還原失去的細節。」 不能。它只是重新詮釋既有內容,永遠不會增加解析度。
- 「任何 PNG 都能變成乾淨的 logo。」 來源若模糊或有雜訊,描摹只會把那份雜亂一起繼承下來。
常見問題
描摹後還能再編輯 SVG 嗎?
可以。因為 SVG 是由路徑組成,你能用向量編輯器打開,單獨替某個部件換色或改形狀——這是平面 PNG 做不到的。
為什麼我的描摹檔看起來「色塊化」?
描摹器把你的圖化約成寥寥幾個純色。把顏色或細節等級調高,或接受這是一張照片、乾脆留成點陣圖。
那反過來要怎麼做?
從向量回到像素很簡單,在你選定的尺寸下依然銳利——見 SVG 轉 PNG。