Logo 從 PNG 轉 SVG——細節不失真的向量化指南
手上有張 PNG 格式的 Logo。要給網站用 SVG——給 Retina 螢幕上銳利顯示的郵件簽名用、給印名片的印刷店要求向量。雇設計師重畫要好幾天。自動向量化工具幾秒鐘。這篇講怎麼向量化得乾淨、這些工具在哪失敗、失敗時怎麼補救。
用到的工具：paste-to-download.com/zh-TW/vectorize——瀏覽器版 PNG/JPG 轉 SVG，不上傳、無浮水印。
為什麼 Logo 需要 SVG
Logo 必須在任何尺寸都好看。32 × 32 的 favicon 和 4000 × 4000 的展會 Banner 是同一個 Logo，但點陣檔（PNG、JPG）只能是一個尺寸——其他尺寸要嘛像素糊（拉大），要嘛浪費位元組（縮小但檔案大）。
SVG（可縮放向量圖形）把 Logo 描述成數學——曲線、填色、描邊。數學在任何尺寸都完美渲染。現代瀏覽器和多數設計軟體都標配支援。
理想做法：主 Logo 存 SVG，按需匯出點陣版本。
自動向量化在做什麼
向量化工具（也叫 trace 或描摹）掃點陣圖，找出顏色相近的區域。每個區域算一條閉合路徑沿區域輪廓走。輸出每區域一條路徑——就是你的 SVG。
輸出品質取決於：
- 原始解析度——越高細節越多
- 邊緣銳度——乾淨的邊描出來乾淨；糊邊出歪扭的路徑
- 顏色數——顏色少 = 輸出簡單；顏色多 = 路徑多
- 抗鋸齒偽影——點陣化產生的軟邊會形成假的微色區
理解這些就能預處理原始檔，得到乾淨向量輸出。
第 1 步：用手上最高解析度的原始檔
金科玉律：原始向量檔存在（AI、EPS、PDF、SVG）就用它，別向量化。
只有點陣時挑最大、最乾淨的：
- 2000 × 2000 PNG 永遠比 200 × 200 縮圖向量化效果好
- 網站上截的 Logo 比網站源檔差
- 翻拍印刷 Logo（相機拍名片）遠比數位檔差——重編碼 + 攝影雜訊 = 大量假色區
如果原始檔小或帶雜訊，先用 /zh-TW/upscale Lanczos 模式清洗 + 放大再向量化。
第 2 步：需要的話先清理原始檔
向量化工具喜歡：
- 乾淨的白色或透明背景
- 純色（不要漸變或攝影紋理）
- 銳利的邊（抗鋸齒沒問題；糊的不行）
向量化工具討厭：
- JPEG 區塊狀失真（每 8×8 區塊變成假區域）
- 漸變（被解析成多個離散色階）
- 投影（被向量化成一圈圈低透明環）
- 攝影背景（每片葉、每朵雲變成一條路徑）
預處理：
- 去背 /zh-TW/remove-background 如果 Logo 在複雜背景上
- 輕微模糊 如果原始檔有 JPG 失真（反直覺——軟化假邊）
- 提對比度 如果原始檔發灰
- 加飽和度 讓向量化器更清楚區分色區
第 3 步：打開向量化工具選合適模式
打開 /zh-TW/vectorize。拖入 Logo。選模式：
- 高對比度：1–2 色 Logo 最佳（黑白、黑色加單色）。出 1–2 條路徑。
- 彩色：多色平塗 Logo（3–8 色）。每色區一條路徑。
- 細節：帶很多小元素或精細線條的 Logo。路徑多，輸出大。
現代品牌 Logo（乾淨、扁平、2–4 色）預設走「彩色」模式。老式字母組合或單色 Logo 走「高對比度」。
第 4 步：調閾值和顏色數
兩個關鍵滑桿：
- 閾值（0–255）：區分明暗的亮度切點。閾值越高越多像素歸「暗」區。預設 128（中灰）。調到 Logo 邊緣跟原圖匹配為止。
- 顏色數：SVG 裡最多有幾種填色。2 色 Logo 設 2，5 色 Logo 設 5。太高生雜訊，太低合併掉本不同的色。
paste-to-download 向量化器兩個滑桿都即時預覽。調到預覽跟原圖一致再匯出。
第 5 步：匯出 SVG 在瀏覽器裡驗證
按 向量化並下載。把得到的 .svg 拖到瀏覽器網址列：
- 應該跟 PNG 一致
- Ctrl+= (Mac 上 ⌘+=) 放大到 1000% 邊還是銳
- 改瀏覽器視窗大小——SVG 在任何尺寸下都銳利重繪
看著破（鋸齒路徑、丟色、形怪）就回第 4 步換設定。
常見失敗 + 修法
「Logo 邊緣看著波浪」
原始檔要嘛解析度太低，要嘛有 JPG 失真。換更高解析度源，或者把源跑 /zh-TW/compress 先轉 PNG（去 JPG 區塊狀），再向量化。
「有些顏色合併了」
顏色數設太低。提高直到原圖每個獨立填色都有自己的路徑。
「Logo 周圍有過渡色光暈」
抗鋸齒偽影。降低顏色數（把光暈合併到主色），或者提高閾值（消除淺邊像素）。
「Logo 裡的小字讀不出」
文字是點陣向量化最難的東西。兩個選擇：(a) 找到原字體在 SVG 裡手動排版（公司一般用商業可得的字體；查字體名），或 (b) 接受向量近似，以後再修。
「原圖漸變變成色帶條」
向量化器沒法輕易表示連續漸變。要手動把色帶換成 <linearGradient> 或 <radialGradient> 元素。多數 Logo 不值得這麼做；漸變是關鍵就在 Illustrator/Figma 按品牌色規範重做。
什麼時候該雇設計師
自動向量化適合：
- 內部用（簡報、內部站、原型）
- 從印刷材料的初轉換
- 形狀簡單的小 Logo
不適合：
- 多年使用的品牌正式素材
- 含複雜手繪元素的 Logo
- 超大印刷尺寸（橫幅、車貼）
品牌正式素材的工作流：自動向量化 → 用輸出做起點 → 在 Inkscape 或 Illustrator 裡手動清理。設計師從自動向量化起點開始要花 30 分鐘而不是 3 小時。
瀏覽器本地：為什麼對 Logo 重要
Logo 常常是發布前機密。把它上傳到未知服務做向量化是洩露風險。
/zh-TW/vectorize 完全在你瀏覽器分頁裡跑。基於 Potrace 的向量化器編譯成 WebAssembly，本地執行，Logo 不離開裝置。Network 驗證：沒有任何外發 Logo 資料。
一句話總結
- 用手上最高解析度乾淨源
- 需要時去背或去雜訊
- 打開 /zh-TW/vectorize 選對模式
- 調閾值和顏色數到預覽跟原圖一致
- 匯出後在瀏覽器裡多個縮放級別驗證
結果：一個從 16 px favicon 到 16 ft 展會 Banner 都完美縮放的 Logo。