PNG 轉 SVG 教學：Logo、圖示與線稿的向量描圖

PNG 是點陣圖：由固定的像素格組成，每個像素有一個顏色，也可以有不透明度。一個 500 × 500 px 的標誌正好有 250,000 個方格，除此之外什麼都沒有，所以放大成海報尺寸時，只能讓每個方格變大，或讓方格之間的縫隙變模糊。SVG 是向量圖，本質上是一個文字檔，以座標和填色列出 <path>、<circle>、<rect> 等圖形。瀏覽器或切割機會依所需大小重新繪製這些圖形，所以向量標誌在手機螢幕和展覽看板上都一樣清晰。

由向量轉成點陣很容易，因為算圖程式只要把圖形畫成像素；SVG 轉 PNG 一秒就能完成。反過來則沒有無損的捷徑，因為像素格裡沒有記錄原本的圖形，必須有程式看著像素，推測每個圖形從哪裡開始、到哪裡結束。這個推測的步驟稱為描摹或向量化，從 Illustrator 到命令列程式，每一個真正的 PNG 轉 SVG 轉換器，底層都是描摹器。

有些轉換器會跳過最難的部分。它們輸出一個合法的 SVG 檔，裡面只有一個 <image> 元素，把原本的 PNG 以 base64 文字嵌入，檔案也因此比 PNG 大約多出三分之一。這種檔案能以 SVG 開啟，也能通過檔案類型檢查，但本質上仍是包著向量外殼的像素圖：放大後會看到一樣的鋸齒邊緣，切割機也找不到可循的路徑。用文字編輯器開啟任何 SVG，搜尋 data:image/png；如果找得到，就代表沒有經過向量化。

描摹最適合原本就以圖形繪製的圖片。設計軟體匯出的標誌、扁平圖示、黑色輪廓的卡通、掃描的簽名或鏤空模板，都是由少數幾種純色與清楚的邊緣組成。描摹器會把每種顏色歸為一個區域，沿著邊界擬合平滑曲線，因此產生的 SVG 會很接近設計師原本畫的圖形。字標中的粗體字也能描得很好，因為大字母也只是另一個填色圖形，每個字形都會變成可重新上色或縮放的輪廓，但不能再重新打字編輯。

照片則正好相反。人像或商品照有成千上萬種細微差異的色調彼此融合，向量格式沒有有效的方式描述。要求描摹器輸出 16 色，會得到有明顯色帶的海報化插畫；要求 64 色，則會得到數以萬計的細小圖形，檔案比 PNG 大很多，看起來仍不像照片。柔和的漸層、陰影與光暈也一樣會變成一疊疊細色帶。小字是第三個麻煩：在 10–12 px 時，反鋸齒會讓每個字母和背景融在一起，描摹器分不出「e」和「o」。

解析度比任何設定都重要。描摹器會把每條曲線擬合到邊緣上的階梯狀像素，階梯越細，曲線就越準確。如果 PNG 是你自己從 Figma、Canva、Photoshop 或簡報匯出的，請以顯示大小的兩到三倍重新匯出；寬 1500–2000 px 的標誌能給描摹器足夠的資訊。除非 AI 放大後在 100 % 檢視下看起來很乾淨，否則請不要先用 AI 放大器放大小張 PNG，因為憑空產生的邊緣紋理，會和真實邊緣一樣被忠實描摹。

接著讓背景單純一點。PNG 支援完整透明，而透明背景是最容易處理的情況：完全透明的像素都視為空白，所以 SVG 後面不會有白色方框。如果 PNG 有實色底，請先緊貼圖案裁切；我們的教學 如何依比例裁切圖片 說明了精確取景的方法。雜亂的背景，例如穿在 T 恤上拍下來的標誌，應在描摹前移除，或用單一純色塗掉。

最後，在描摹器替你減色之前，先自己減少顏色數量。在原始檔中隱藏陰影、光暈與漸層疊加；如果向量版本不需要漸層，就用其中間色取代。數一數剩下的純色數量（包含輪廓色）並記下來，這是下一步最有用的數字。如果同一個標誌有 JPEG 和 PNG 可選，請選 PNG，因為 JPEG 壓縮會在每條邊緣周圍產生雜訊，詳見 JPG、JPEG 與 PNG 的差異。

每個描摹器都會問同樣三個問題，即使標籤不同。第一個是要保留幾種顏色。在 PNG 轉 SVG 轉換器 中，色彩模式 可選 彩色、灰階 或 黑白，顏色數量 則決定像素分成幾群，範圍是 2 到 64。請設成你記下來的數量。設得太高，描摹器會把反鋸齒的邊緣像素分成各自的細小顏色，在每個圖形周圍形成淡淡的光圈；設得太低，則會把兩種品牌色合併成一種。

第二個問題是如何處理邊緣。平滑化 會磨平像素造成的階梯，細節 則決定多小的斑點仍會變成圖形。PNG 頁面預設 細節 為 70、平滑化 為 40，可以在乾淨的匯出檔上保留小轉角。如果出現灰塵和零星小點，請降低 細節；如果曲線看起來歪歪扭扭，請提高 平滑化；以直邊構成的幾何標誌，請把 曲線 設為 直線；想保留方塊感的像素藝術，則設為 像素邊緣。

第三個問題只適用於黑白描摹：墨水與紙張的分界要劃在哪裡。臨界值 範圍是 1 到 254，預設為 128。比臨界值暗的像素變成黑色，較亮的則變成空白。以細藍色原子筆寫的簽名，請往 160–180 調高，讓淡淡的筆畫保留下來；在略帶灰色的紙上以粗麥克筆畫的圖，請往 100 調低，避免紙張紋理變成小斑點。一次只改一個設定再比較，因為各項設定會互相影響。

不要只看縮圖。請在瀏覽器中開啟 SVG，放大到 400–800 %，檢視最緊湊的曲線，例如字母的圓弧或尖角的頂端。好的描摹結果會有平滑的弧線，設計中有轉角的地方則是銳利的轉角；不好的結果會出現抖動、凹陷和被磨圓的尖端。接著用 Inkscape、Illustrator 或 Figma 等向量編輯器開啟檔案，並開啟外框或節點檢視。簡單的雙色標誌通常只需要幾百個節點；如果你的檔案有幾千個，表示描摹器跟著雜訊走了，路徑編輯或切割起來會很痛苦。

檔案大小是快速的合理性檢查。扁平標誌經最佳化的 SVG，通常是幾 KB 到幾十 KB，往往比原本的 PNG 還小。描摹出的檔案如果比來源 PNG 大好幾倍，通常代表顏色太多、細節太多，或是不該描摹的照片。請保持開啟 最佳化 SVG，它會在不造成可見差異的情況下捨入座標並合併路徑；最後再把圖稿放大到海報尺寸、縮小到網站圖示尺寸，確認兩種大小都清晰易讀。

免費的桌面選擇是 Inkscape。匯入 PNG 後選取它，開啟 路徑 > 描摹點陣圖（Shift+Alt+B）。亮度截止等單次掃描模式會產生一條黑色路徑，適合線稿；多次掃描模式則會把指定數量的顏色或灰階描成堆疊的圖層。Inkscape 的黑白描摹是以 Potrace 為基礎，這是 Peter Selinger 於 2001 年發表的描摹函式庫。Potrace 本身是命令列程式，讀取的是 PBM、PGM、PPM 或 BMP 而非 PNG，只能處理雙色圖片，並輸出 SVG、PDF、EPS 或 DXF，很適合用指令碼大量處理掃描檔。

在 Adobe Illustrator 中，影像描圖在 Illustrator CS6 取代了舊的即時描圖。置入 PNG 後，開啟 視窗 > 影像描圖，從黑白標誌、3 色或 16 色等預設集開始，再到進階區調整路徑、轉角與雜訊。描圖結果會保持即時狀態，直到你按下 展開，才會變成一般可編輯的路徑。如果兩種程式都沒安裝，瀏覽器版轉換器也執行相同的減色、找邊緣、擬合曲線流程；圖片轉 SVG 轉換器 還支援 JPG、WebP 和 HEIC，也能輸出 EPS、PDF 或 DXF 而不是 SVG。

在網頁上，SVG 自 2001 年起就是 W3C 建議標準，所有現行瀏覽器都能在 <img> 標籤、CSS 背景或直接內嵌於 HTML 中顯示，甚至可以在滑鼠移過時改變顏色。描摹後的標誌通常能用一個小檔案，取代為 Retina 螢幕準備的多種尺寸 PNG。對於切割機，Cricut Design Space 和 Silhouette Studio 需要的就是 SVG：每個描摹出的形狀都會變成切割路徑，多色描摹則會產生分開的圖層，可以用不同顏色的貼紙材料分別切割。雷射切割機和 CNC 軟體通常偏好 DXF，PNG 轉 DXF 可以使用相同的描摹設定產生。

印刷廠會要求向量圖稿，因為印刷機、刺繡打版師或割字機需要的是邊緣，而不是像素；對於貼紙、T 恤或橫幅，描摹後的 SVG 通常就夠用。不過它仍然只是近似結果：曲線是擬合出來的，顏色是由像素平均而來，文字也會變成輪廓。因此在描摹公司標誌之前，請先詢問製作者。設計師或代理商幾乎都留有原始的 AI、EPS、PDF 或 SVG 檔，裡面有精確的曲線、指定色彩和字型，寄給你只要一分鐘。當原始檔已經遺失、標誌只留在掃描過的信紙上，或是圖稿是你自己的手繪時，描摹才是合適的工具。