PNG 轉 SVG

這個工具會描出圖片裡的形狀，再把它們寫成向量幾何 —— 帶有真實座標的 path 與 polygon 資料。成品放大到任何尺寸都不會變模糊，每一個形狀都能在 Illustrator、Inkscape、Affinity 或 Figma 裡被選取、拉動節點。整個過程都在這個瀏覽器分頁裡完成，圖片不會被上傳。

大多數免費的「PNG 轉 SVG」根本沒有向量化

搜尋 PNG 轉 SVG，你會找到幾十個網站，而且它們幾乎都在一秒內就把檔案還給你。那個速度就是破口。真正的描邊要先做色彩量化、找出區塊邊界、對邊界擬合曲線、再寫出座標 —— 這是實際的運算，就算在快的機器上也要花一點時間。

那些網站實際上做的，是用三行 XML 把你的 PNG 包起來：一個 svg 元素，裡面放一個 image 元素，來源就是你的原始檔案編碼成 base64 的文字。副檔名變成 .svg，其他什麼都沒變。每一個畫素還是畫素，放大一樣糊。在 Illustrator 裡打開，沒有任何路徑可以編輯，只有一個鎖住的矩形裝著一張圖。而且檔案通常還比原本的 PNG 大三成左右，因為 base64 編碼本身會膨脹。

這不是程式有 bug，也不是技術不足。包裝的成本是零、不需要任何運算，產出的東西副檔名對得上、瀏覽器也打得開。它只是不是向量。

十秒鐘檢查任何一個轉檔工具

SVG 是純文字檔。在結果檔上按右鍵，用任何純文字編輯器打開 —— 記事本、TextEdit、VS Code 都可以 —— 讀前面幾行。整個測試就這樣，而且對任何工具都有效，包括這一個。

如果你看到 path 或 polygon 元素後面接著一長串數字，那就是真的幾何資料，那些數字是座標。如果你看到的是 image 元素、或是 base64 這幾個字、或是以 data 冒號 image 開頭的字串，那這個檔案裡裝的就是你原本的點陣圖，什麼都沒被描邊。

還有一個不用文字編輯器的檢查法：用瀏覽器打開檔案，然後用力放大。真向量的邊緣在任何倍率下都是銳利的，因為它每次都重新計算。包裝過的點陣圖會在原本 PNG 會糊掉的同一個倍率糊掉。這一頁把兩邊並排放在一起，最高放到八倍，讓你親眼看到這件事發生。

真正的描邊在做什麼

第一步是把圖片減成少數幾種顏色。一張照片可能有二十萬種不同的顏色；一個適合描邊的 logo 大概只需要六種。這一步叫做量化，它決定了最後會產生多少個獨立形狀。

接著，每一群互相接觸的同色畫素成為一個區塊，程式沿著畫素之間的邊界把每個區塊的輪廓走一圈。這樣得到的輪廓精確但非常鋸齒，每一個畫素階梯都是一個轉角。然後開始簡化：沒有帶來資訊的點被丟掉，緩彎被換成二次貝茲曲線，而真正的尖角保留成尖角。最後每個區塊輸出成一個 path 元素，裡面的孔洞用 even-odd 填充規則挖空 —— 這就是為什麼字母 O 的中間不會被填滿。

相鄰的形狀共用同一條邊界，所以那條邊界的兩側需要簡化成同一條線。如果不一樣，色塊之間就會出現髮絲般的白縫。這裡的簡化刻意寫成「與方向無關」：每條輪廓的起點用一個不依賴走訪方向的規則決定，平手時比座標而不是比在清單裡的位置，曲線的建構方式反向走也會得到完全相同的曲線。因此沿著同一條邊界相接的兩個形狀，從兩側簡化出來的結果是一致的。

什麼圖適合向量化，什麼圖不適合

向量化在「由平色區塊與清楚邊緣構成」的圖上效果很好：logo、文字商標、圖示、線稿、墨線插畫、簽名、模板字、地圖、簡單圖表、純色介面的截圖。這類圖描出來的 SVG 通常不只能無限放大，檔案還比 PNG 更小 —— 因為用二十個座標描述的形狀，取代了好幾千個畫素。

它在照片上效果很差，而且換任何工具都一樣 —— 這是格式的性質，不是軟體的能力問題。照片沒有平坦區塊也沒有乾淨邊緣，描邊器只能生出好幾千條小路徑去近似連續的漸層。結果是 SVG 比原本的 JPG 大好幾倍、開啟很慢、看起來像海報印刷而不是照片。這一頁偵測到照片時會直接告訴你，並且把你指向 PNG 壓縮 —— 那幾乎總是使用者真正想要的東西。

抗鋸齒邊緣是中間狀態。設計軟體匯出的文字與 logo，邊緣一圈都是半透明畫素，看起來才平滑。這些邊緣畫素會變成一條條額外的細形狀。把「去除雜點」調高可以清掉它們；把色彩數量調低則會讓它們併進旁邊的顏色。

四個參數怎麼調

色彩數量決定調色盤有幾格。從低往上調。一個只有兩色的 logo 用八色去描，會多出六層你根本沒要的邊緣色階。只有在原圖裡明確不同的平色被併在一起時，才需要往上加。

平滑度同時控制兩件事：多積極地丟掉冗餘的點，以及一個彎要多大才算「值得保留的尖角」。設成零會得到原始的畫素階梯，忠實於畫素格線，適合像素風格的圖。設在五左右，斜向階梯會變成直線、圓形會變成曲線，而九十度的直角仍然是直角。手繪風格、本來就不該有尖角的圖，可以往高調。

去除雜點會丟掉小於指定畫素數的形狀，把它併進包圍它最多的鄰居。這是清掉掃描雜訊、JPEG 壓縮雜訊與抗鋸齒邊緣的那個參數。保留透明背景決定輸出裡的透明畫素是留空、還是填成白色；如果成品反正要放在白底頁面上、而你偏好有一塊實心背景，就把它關掉。

不上傳、無限制、免註冊

描邊是純運算，沒有任何理由跑在別人的伺服器上。這一頁用純 JavaScript 在背景執行緒裡完成，這也是為什麼進度會動、取消鈕按得下去：你的處理器在描邊的同時，頁面全程都還能操作。

沒有任何東西被傳出去。打開瀏覽器開發者工具切到 Network 分頁，描一張圖看看 —— 你不會看到任何一筆夾帶你檔案的請求，因為這一頁在權限上就不被允許發出這種請求。除了你自己裝置的記憶體之外沒有檔案大小上限，沒有每小時次數限制，不加浮水印，也不用註冊。非常大的圖會先降採樣再描邊以維持頁面流暢，而 SVG 仍然以原始尺寸輸出 —— 這不會損失品質，因為向量路徑本身沒有解析度。

PNG 是大家會搜尋的關鍵字，但描邊器只在意畫素，所以 JPG、WebP、GIF、BMP 的處理方式完全相同。JPG 輸入建議把去除雜點調高一點，因為 JPEG 壓縮會在平色區域留下淡淡的方塊紋理，否則那些紋理會變成多餘的形狀。