瀏覽器內的免費工具
圖片向量化：把 PNG 或 JPG 轉成 SVG
放入一張 PNG 或 JPG，這個點陣圖轉向量圖的工具就在本頁把它描摹成 SVG——任何檔案都不會被上傳。它先把畫面歸併為若干純色，再沿著每種顏色每一塊區域的邊界走一遍，每種顏色寫成一條路徑。標誌、線稿、圖表或掃描的示意圖需要的正是這個。照片不在適用範圍內，下面的內容會直說原因。
正在渲染範例…
內建範例：一張只剩 PNG 的長條圖
多邊形，每種顏色一條路徑。沒有畫東西的地方會露出棋盤格。
把 PNG、JPG、WebP、GIF 或 BMP 拖到這裡
檔案由你的瀏覽器解碼，並在本頁完成描摹。它從不上傳，所以除了你自己機器放得下多少，沒有別的大小限制。
顏色夠覆蓋資料系列，容差收緊讓座標軸保持筆直，保留背景。
更大的圖片在描摹前會被縮到這個尺寸，這正是頁面保持流暢的原因。之後 SVG 與解析度無關，所以把處理尺寸調大買到的是邊界精度，不是輸出尺寸——代價是點數變多。
圖片會用中位切分歸併成這麼多種純色，每一種成為一條路徑。兩種顏色得到剪影；圖表一般八種就夠。
丟點時輪廓可以離像素邊界多遠。為 0 時得到完整的階梯；到 1 px 時直邊乾淨，曲線仍然平滑。
小於這個值的區域和孔洞會被丟掉——JPEG 塊狀假影、掃描器灰塵和零星的單個像素。 在目前的設定下丟掉了 123 塊區域。
#fcfcfa5 個環，450 個點#0072b24 個環，156 個點#d55e002 個環，12 個點#3341552 個環，466 個點#009e732 個環，240 個點
純色描摹的實際效果
掃描的線稿
兩種顏色，去掉白色背景，最小區域面積調到足以丟掉紙張顆粒。掃描檔的每一筆邊上都有成千上萬個接近灰色的像素；只有歸併成兩種純色，這一筆才會變成一個形狀。
只剩 PNG 的圖表
來到這裡最常見的原因：圖在簡報或舊論文裡，畫圖的腳本已經找不到了。八種顏色足夠覆蓋資料系列和座標軸，容差收緊可以讓軸線保持筆直。
兩種顏色對八種顏色
顏色越多並不越好。兩種顏色時標誌是乾淨的剪影；八種顏色時柔和的明暗變成四條看得見的色帶，因為純色描摹無法表現漸層，只會把它做成色調分離。
向量圖為什麼能任意放大
同一個角放大八倍。點陣圖除了自己的像素網格再拿不出別的；SVG 會按印表機或期刊要求的任意尺寸重新畫出這條邊。
真正鏤空的孔洞
外邊界和它裡面的孔被描摹成兩條繞向相反的環，路徑寫成 fill-rule evenodd。字母 O 的中間、圓環或者環形圖的中心因此是空的，而不是被填滿。
照片會變成什麼樣
放在這裡是因為所有人都會問。照片裡沒有純色區域可找，於是描摹只能自己造出來：成千上萬個斑塊、好幾 MB 的檔案，以及一張在任何尺寸下都比原圖更難看的圖。
怎樣把圖片轉成向量圖
整個轉換都在這個頁面裡完成。沒有排隊、沒有帳號、沒有上傳這一步，唯一的限制是你自己的瀏覽器能解碼什麼。
- 把 PNG、JPG、WebP、GIF 或 BMP 拖到方框裡，或者選一個檔案。瀏覽器會解碼它並畫到畫布上，按你選的處理尺寸重取樣，使最長邊正好放得下。
- 設定顏色數量。這是最關鍵的一步：圖片會被歸併成這麼多種純色，每一種在 SVG 裡成為一條路徑。
- 把簡化容差往上調，直到輪廓不再像階梯。大多數圖形在 1 像素左右合適；0 會保留像素級的精確邊界。
- 把最小區域面積往上調，直到噪點消失。否則掃描器的灰塵、JPEG 的塊狀假影和零星的單個像素都會各自變成一個小多邊形。
- 如果你希望圖形疊在背後的內容上、而不是壓在一個白色矩形上，就開啟去除白色背景。掃描紙張那種偏灰的白也算白。
- 看一下點數。它是檔案有多重的老實指標；當這個數字與你看到的細節量相稱時，就可以下載 SVG 了。
描摹究竟做了什麼
值得說清楚，因為「向量化」這個詞用得很鬆，而結果好不好取決於它實際做了什麼。四個步驟，全部在你的瀏覽器裡完成。
- 用中位切分做色彩量化。像素先進入一個 32,768 格的顏色直方圖，然後反覆切分，直到盒子數量等於你要的顏色數，每個盒子成為調色盤裡的一種顏色——盒內像素的真實平均值。下一次切分選的是像素數乘以顏色跨度最大的那個盒子，而不是單看像素數最多的，這樣掃描檔上大片接近白色的紙就不會把整個調色盤吞掉。
- 每種顏色生成一張二值遮罩，然後做邊界追蹤。追蹤沿著已填充像素與空鄰居之間的縫隙走，得到區域精確的、與座標軸對齊的輪廓，而不是向內偏半個像素的等值線。兩塊只在角上相接的區域會得出兩個形狀，而不是一個被掐細的 8 字。
- 孔洞會被描摹成繞向相反的獨立環，每條路徑都寫上 fill-rule evenodd，所以孔是真的空的。字母 O 的內部保持通透。
- 按你設定的容差用 Ramer-Douglas-Peucker 做簡化。輸出裡的每一個點都曾經落在像素邊界上——沒有任何插值。
- 輸出是多邊形。這個工具不做貝茲曲線擬合，所以描摹出的圓是一個多邊的多邊形，而不是圓弧。容差合適時，螢幕上和印刷品上都看不出差別，但在編輯器裡開啟這個 SVG，你會看到一段段直線——在你向別人承諾曲線之前，應該先知道這一點。
什麼適合向量化，什麼不適合
點陣圖轉向量圖的描摹，找的是單一顏色的區域。哪些圖片能用，全都由這一句話推出來。
- 效果好：標誌和文字標、鋼筆線稿、掃描的示意圖和插圖、流程圖、地圖、繪圖軟體的截圖、長條圖和折線圖、圖示、印章、帶剖面線的技術圖。它們都是邊界明確的純色區域。
- 要小心：帶反鋸齒的截圖和文字。每條邊緣上的過渡像素會被分配到最接近的純色，可能留下一圈細細的光暈。顏色多了，光暈會自成一層；顏色少了，光暈會被吸收。小號文字描摹後仍然清楚，但它是輪廓，不是可編輯的文字。
- 不適合：照片。照片是連續色調——沒有純色區域可找——所以描摹只能自己造，結果是一張色調分離的斑塊圖，有成千上萬個區域，檔案還比原來的 JPG 更大。沒有任何設定能解決，因為問題在圖片本身，不在參數。
- 不適合：漸層、柔和陰影、模糊、發光和半透明疊加。每一種都會變成看得見的色帶。如果原圖有漸層，老實的辦法只有兩個：用兩種顏色描摹，然後自己在編輯器裡重新加漸層；或者去找原始檔案。
- 本來就是向量：如果這張圖出自繪圖函式庫、CAD 或繪圖軟體，先去找原始的 SVG、PDF 或 EPS。描摹向量檔案匯出的 PNG 總會丟東西——精確座標、分組、以及作為文字的文字。
四個控制項，各自犧牲了什麼
這裡每一個控制項都是用一樣東西換另一樣。知道它往哪個方向付代價，比瞎試快得多。
- 顏色，2 到 16。太少，圖裡本來不同的部分會併成一個形狀。太多，每條邊緣上的反鋸齒都會自成一層，路徑數成倍增加，卻看不出任何差別。數一數圖裡你真能叫得出名字的純色，就從那個數量開始。
- 簡化容差，單位是像素。為 0 時輪廓嚴格貼著像素網格，放大看就是階梯。往上調會把階梯併成直線段，再往上調就開始削掉真實細節的拐角。最細的部分最先消失，所以某一筆不見了，原因就在這裡。
- 最小區域面積，單位是平方像素。小於這個閾值的區域和孔洞會被丟掉。掃描檔一般需要 20 以上，乾淨的匯出幾乎不需要。孔只可能比包著它的區域更小，所以把這個值調高，絕不會讓某個孔孤零零留在一個已被丟掉的形狀裡。
- 去除白色背景。顏色接近白色的層會被丟掉，而不是畫出來。想把線稿疊在有顏色的簡報上時很有用；如果白色本身是畫面的一部分，比如眼白，或者示意圖裡本該不透明的空隙，就不要開。
- 處理尺寸。調大意味著邊界是在更多像素上量出來的，描摹更忠實，點也更多。它不改變 SVG 能畫多大——向量圖沒有解析度——所以調大它是為了精度，不是為了輸出尺寸。
下載之後
SVG 是一個裝滿座標的文字檔案，這正是它比一張更大的 PNG 更值得擁有的原因。
- 可以無限放大。同一個檔案既能印在 90 公釐寬的期刊欄裡，也能印成 A0 海報，不會出現馬賽克，也不需要重取樣——出版社要向量圖通常就是為了這個。
- 每種顏色就是一條路徑，所以在 Illustrator、Inkscape、Affinity 或 Figma 裡給某一層換顏色只要點一下。層按面積從大到小寫入，所以背景在檔案最前面。
- 它可以當幾何圖形來編輯。你可以刪掉一塊區域、拖動一個點，或者把兩個形狀合併。不能做的是改文字，因為描摹出來的字是輪廓——如果標註需要改，就重新標註原圖，而不是改描摹結果。
- 它可以直接嵌入。LaTeX 用 svg 套件或者轉成 PDF 後都能用，PowerPoint 和 Word 會把它作為形狀匯入，瀏覽器則直接內嵌顯示，不需要額外請求。
- 可以做差異比較和版本管理。因為它是文字，同一張圖的兩次描摹可以逐行比對，二進位的 PNG 做不到。
常見問題
這個圖片轉 SVG 的工具免費嗎？
免費，而且沒有什麼需要註冊。描摹在你的瀏覽器裡執行，不消耗點數，沒有浮水印，轉多少張都不限。有沒有帳號，這個頁面都一樣。
怎麼把 PNG 轉成 SVG？
把 PNG 拖到本頁的方框裡，設定你想要的純色數量，把簡化容差調到輪廓看起來乾淨，把最小區域面積調到噪點消失，然後下載 SVG。標誌或線稿通常是兩到四種顏色、容差 1 像素左右；圖表則是八種顏色、容差更緊一些。
我的圖片會被上傳到伺服器嗎？
不會。瀏覽器解碼檔案、畫到畫布上，本頁的描摹程式碼讀取這些像素。沒有任何網路請求攜帶你的圖片——這也意味著頁面載入完成後離線也能用，機密或尚未發表的圖稿不會離開你的機器。
它能把照片向量化嗎？
沒有實用價值，與其讓你自己試出來，不如直說。描摹靠的是找出單一純色的區域，而照片沒有這種區域——色調是連續變化的。你得到的會是一張色調分離的斑塊圖：成千上萬個細碎區域、往往比原 JPG 還大的檔案，以及在任何尺寸下都更難看的圖。如果你需要把照片變成線稿，那是插畫的活，不是格式轉換的活。
它會擬合曲線，還是輸出多邊形？
多邊形。輪廓是從真實的像素邊界生成、再用 Ramer-Douglas-Peucker 簡化的，所以 SVG 裡每個點都曾落在那條邊界上，沒有任何東西被插值成圓弧。容差在 1 像素左右時，描摹出的圓看起來是平滑的，但它是一個多邊的多邊形，編輯器裡顯示的是一段段直線，而不是貝茲控制點。
我描摹出的 SVG 為什麼是鋸齒狀的？
要麼容差是 0 或接近 0，像素階梯被原樣保留；要麼處理尺寸相對細節太小。先把容差調到 1 像素左右——階梯就會併成直線段。如果圖形很精細，也把處理尺寸調大，讓邊界在被簡化之前是在更多像素上量出來的。
怎樣得到透明背景，而不是一個白色矩形？
開啟去除白色背景。量化後顏色接近白色的層會被丟掉而不是畫出來，所以原來是紙的地方 SVG 沒有填充，背後的內容會透出來。掃描紙張那種偏灰的白按白色處理。如果白色是畫面的一部分，就別開。
點陣圖和向量圖有什麼不同？
點陣圖——PNG、JPG、GIF、WebP——是一張固定的像素網格，放大只能讓像素變大。向量圖——SVG、EPS、PDF 圖形——把形狀存成座標，按要求的任意尺寸重新畫出來，這就是出版社和印刷廠要它的原因。點陣圖轉向量圖，意思是從像素裡把形狀找回來，而這只在像素構成界限明確的純色區域時才做得到。
