PNG 轉 SVG 教學：Logo 邊緣俐落、背景透明的做法

要把 PNG 轉 SVG，做法是先把圖片描圖成向量形狀，檢查邊緣和顏色，再匯出檔案。原圖清不清楚很關鍵：描圖能讓 Logo 自由縮放，但原圖裡已經看不清的細節，描圖不一定補得回來。

上面的葉子插圖只是說明描圖的原理，並不是實際的轉換結果。

這篇用圖片向量化示範怎麼把 Logo 轉成向量圖，包括去除白色背景，以及避免小細節消失的方法。圖片轉換支援 10 MB 以內的 PNG、JPG 和 WebP，不需要帳號。

PNG 轉 SVG 之後，檔案有什麼不同？

PNG 存的是像素，也就是點陣圖。向量路徑則用座標和曲線描述形狀，所以放大縮小時，不會連原本的像素格子一起放大。

副檔名是 .svg，不代表圖片已經向量化。SVG 檔案裡也可以直接放一張點陣圖，W3C 的 SVG 規格就透過 image 元素說明了這種做法。被包進 SVG 的 PNG，仍然帶著原本點陣圖的所有限制。想要一個能編輯的 Logo，你需要的是描圖後的路徑：在向量編輯軟體裡可以點選，也可以換色。

描圖是一種近似。色塊單純、邊界清楚的圖，描起來最準；模糊、陰影和很小的字，形狀就很難還原。如果能跟原設計師拿到向量原檔，請優先用原檔。手上只有點陣圖時，圖片轉向量圖才派得上用場。

描圖前先整理 PNG

挑一個最清楚的 Logo 檔，最好是從原始設計稿直接匯出的版本。別用有介面元素、拍歪或四周留白太多的截圖。原檔另外留一份，完成後可以拿來跟 SVG 對照。

仔細看背景。在修圖軟體裡看到灰白棋盤格，可能代表透明；但如果棋盤格被存進了 PNG，它就是圖案的一部分。這種檔案拿去描圖，每一個格子都可能變成一個形狀。

Logo 上有小字的話，上傳前先放大看看。如果 PNG 裡兩個筆畫已經黏在一起，把精細程度調高，它們多半還是黏著。這時在編輯軟體裡重新排字，通常比從模糊的圖片裡硬救來得可靠。

PNG Logo 轉 SVG 的 5 個步驟

1. 載入圖片，確認圖稿類型

打開圖片轉 SVG 工具，點 選擇圖片，或直接把 PNG 拖進上傳區。等第一版結果出來，過程中請不要關閉頁面。

工具會自動套用一組初始設定。如果調整選項是收合的，先點開 微調，再看 圖稿類型。平面 Logo 或圖示請選 Logo。動任何設定之前，先比較 原圖 和 向量結果，第一次描圖可能已經抓到主要形狀了。

2. 設定合適的顏色上限

用 最多顏色數 簡化配色。雙色標誌可以先試 2 色，看兩個顏色有沒有都留下來；有漸層或陰影的 Logo 可能需要更多。目標是保留有意義的顏色，而不是把邊緣每一點淡淡的過渡色都變成獨立的形狀。

在 編輯色盤 裡點選色塊就能改顏色。鎖定品牌色 可以在調整色盤時保住指定的顏色。你也可以選取幾個相近的色塊，按 合併選取色彩，把它們併成目標色。每調一次都看一下預覽，尤其是兩種顏色交界的地方。

3. 精細程度和平滑度分開調

小缺口、細線或字母的開口消失時，把 精細程度 調高；多出不需要的雜點時，就調低。精細程度越高，SVG 可能越大、越複雜，所以不是越高越好。

用 平滑度 調整輪廓，同時盯著轉角和曲線。一次只改一個設定，才看得出是哪一項有效。先放大檢查邊緣，再縮回 Logo 實際使用的大小。放大時看起來比較整齊的修改，縮小後反而可能讓小 Logo 更難辨認。

4. 小心去除白色背景

PNG 有不想要的白底時，打開 移除白色。它處理的是與外圍相連的白色背景，不會把 Logo 裡所有白色區域都刪掉。

檢查白色的字，以及碰到外圍背景的白色部分。封閉的空間也要看：沒有和外圍相連的白色區塊可能會留下來。彩色背景、陰影或存進檔案的棋盤格，可能要另外用修圖或向量軟體清理。

要得到透明背景的 SVG，Logo 周圍必須真的是透明的。把匯出的檔案分別放在淺色和深色背景上看，比較容易發現殘留的白色形狀或淡淡的白邊。

5. 匯出並檢查 SVG

打算繼續編輯，就在 SVG 匯出用途 選 設計；網頁 則會輸出適合網站使用的精簡程式碼。處理完成後，再按 下載 SVG。

替換現有的 Logo 之前，先在向量編輯軟體裡打開檢查：

• 形狀可以點選，也可以換色。
• 字母開口、窄縫和小細節都還看得到。
• 顏色符合你要的配色。
• 放在淺色和深色背景上，背景都表現正確。

要拿去印名片、做招牌或其他加工，請在該用途的軟體裡確認尺寸和製作規格。下載了 SVG，不代表檔案已經可以直接送印。

Logo 描圖的常見狀況怎麼修

輪廓歪歪扭扭怎麼辦？

有更清楚的 PNG 就換一張。平滑度慢慢調，調太多會把刻意設計的尖角磨圓。一直修不好的地方，可能要手動編輯路徑。

形狀太多、太碎怎麼辦？

降低最多顏色數或精細程度，再確認重要的特徵還在。色盤裡幾乎一樣的顏色，可以視情況合併。

文字看起來不對怎麼辦？

描圖後的文字會變成形狀，不是可以編輯的文字。需要指定的字型，或之後還要改字，請在編輯軟體裡用正確的字型重新輸入。

常見問題

PNG 轉 SVG 可以免費嗎？

可以。圖片轉換和 SVG 下載都免費，不用註冊，也沒有浮水印。用文字生成向量圖是另一個功能，需要登入，目前免費，每個帳號每天有生成次數上限。

點陣圖和向量圖的差別是什麼？

點陣圖（例如 PNG、JPG）由一格一格的像素組成，放大後邊緣會出現鋸齒。向量圖（例如 SVG）用路徑和曲線記錄形狀，放大縮小都維持平滑，也能逐一修改顏色。Logo 常常要同時用在名片、招牌和網站上，所以通常會準備一份向量檔。

轉成 SVG 能讓模糊的 Logo 變清楚嗎？

它能產生可縮放的輪廓，但原圖裡已經看不清的細節，描圖不一定補得回來。在意準確度時，請換一張更清楚的 PNG，或手動重畫受損的部分。

SVG 會保留透明背景嗎？

工具支援原圖的透明度。請檢查匯出的結果，特別是柔邊和陰影，這些地方可能會被簡化。如果是不透明的白底，試試 移除白色，再檢查剩下的形狀。

沒有 PNG，也能做出 Logo 嗎？

用文字生成向量圖輸入一段描述，就能產生一個起步的概念稿。接著調整生成的圖案，再到向量編輯軟體裡加上精準的品牌文字。

完成前，再檢查一次向量檔

一次成功的 png轉svg，會保留讓這個標誌好認的形狀、顏色和間距。從清楚的原圖開始，只調需要調的地方，再把匯出的檔案放到實際用途裡檢查。把你的 Logo 轉成 SVG，從手邊現有的圖檔開始。