點陣圖和向量是存圖的兩種不同方式,搞懂它們的區別,你就知道什麼時候該在兩者之間轉換。點陣圖——PNG、JPG、WebP——是一張定死的、由彩色畫素組成的網格。向量圖——SVG——是一組指令:畫這條路徑、給它填這個顏色、把這個圓放這裡。因為向量用數學而不是畫素來描述形狀,放到任何尺寸都清晰;而點陣圖一旦被推過它本來的解析度,立刻就糊。
"點陣圖轉向量"指的就是描摹:引擎讀畫素,推算出藏在裡面的形狀,再把這些形狀寫成向量路徑。用在對的場景,它是真有用;用在錯的場景,它就一團糟。這篇兩頭都講。
描摹擅長什麼
描摹想要的是平整、邊緣乾淨的輸入:logo、圖示、簡單插畫、線稿、手寫字。這些圖配色有限、界限分明,演算法就能找到每一塊顏色、沿邊畫一條利落的路徑。結果是一個只有幾個形狀的緊湊 SVG——任意尺寸都清晰、檔案小、之後可編輯。如果你的目標是一個從 favicon 到廣告牌都能用的 logo,描摹能帶你到那兒。
為什麼照片不合適
照片正好是描摹最不想要的東西。它有成千上萬種微妙變化的顏色、沒有硬邊緣——連續色調。要把這個向量化,引擎只能用一層層疊在一起的平塗色塊去湊每一段漸層。三件壞事同時發生:SVG 變得極其龐大,常常是原 JPG 的好幾倍;它看著一片塗抹感、海報感,而不是照片感;而且它由成千上萬個沒意義的形狀組成,改起來要命。對照片來說,點陣圖格式就是對的答案——去壓縮那張 JPG,或者轉成 WebP。向量是給圖形用的,不是給照片用的。
預設和顏色數
演算法被允許用多少種顏色,是對結果影響最大的那根槓桿。預設替你定好:扁平 / logo 給簡單標誌把顏色壓低,精細 給層次更豐富的插畫放開一些,海報化 把圖壓成大塊平塗色帶,黑白 把一切歸成兩個色調,給線稿和剪影用。顏色越少,檔案越乾淨越小;顏色越多能留住細膩處,代價是多出的路徑和體積。同一張圖試兩個預設、比一比前後對照預覽,是找到平衡最快的辦法。
全程本地，什麼都不上傳
整個轉換都在你瀏覽器裡用 imagetracer 引擎跑。圖片在你自己機器上從 canvas 裡讀、在本地描、再作為 SVG 還給你——什麼都不上傳,沒有賬號,頁面載入完之後斷網也能用。對一個你不太想發到別人伺服器上的 logo 或內部圖形來說,這一點值得。
有一點要澄清,因為"轉換"這個詞容易讓人誤會:這是真正的描摹,不是 AI 重畫。它跟著你給的畫素走,不會憑空造出一個更乾淨的版本。源圖清晰、扁平、顏色少,結果就清晰;源圖模糊或帶噪點,給你的就是模糊、帶噪點的路徑。
描完之後
因為輸出是一個標準 SVG,由帶名字的路徑和填充組成,你可以在任何向量編輯器裡接著改——Illustrator、Inkscape、Figma。改一個填充值就給整塊區域換色、設精確的品牌色、刪掉雜形狀,或者調路徑。這就是轉向量的意義:圖不再是一張定死的圖,而是一個歸你所有、任意尺寸都能重塑、且不糊的物件。