圖片轉 SVG

"一張形狀的圖"和"形狀本身"不是一回事

PNG 或 JPG 是一格一格的畫素。放大到超過它本來的尺寸,那張網格就露餡了:邊緣變成鋸齒,原本利落的 logo 糊掉,瀏覽器也無能為力,因為那些細節壓根就不存在。SVG 存的是另一種東西——真正的幾何。圓就是被描述成一個圓,曲線是一條路徑,填充是一個顏色值。因為這些形狀是數學而不是畫素,放到任何尺寸都能重新畫得清清爽爽。所以一個你打算印到名片上、印到廣告牌上、又要做成 favicon 的 logo,最好是 SVG:一個檔案,不管放多大都不糊。

這個工具把點陣圖轉成這種向量檔案,而且整個過程都在你的瀏覽器裡完成。你選一張 PNG 或 JPG,它用 imagetracer 引擎把裡面的形狀描出來,還給你一個 SVG。圖片是在你自己機器上從 canvas 裡讀的——什麼都不上傳,沒有賬號,頁面載入完之後斷網也照樣能用。你丟進去的圖,不出你的裝置。

它真正擅長的場景

描摹這件事,在輸入平整、邊緣乾淨的時候最出彩:logo、圖示、簡單插畫、線稿、手寫字。這類圖顏色不多、色塊之間界限分明,正是描摹演算法讀得準的東西。它把每一塊顏色區域找出來,沿邊畫一條路徑,結果就是一個只有寥寥幾個形狀的乾淨 SVG——檔案小、邊緣利、後面也好改。

預設決定了演算法怎麼"讀"你的圖。扁平 / logo 把顏色數壓到很低、形狀保持簡單,最適合兩三個顏色的標誌。精細 允許更多顏色和更細的路徑,給層次更豐富的插畫用。海報化 把圖壓成大塊的平塗色帶,一種海報般的圖形感。黑白 把一切歸成兩個色調,線稿、印章、剪影最合適。顏色越少,檔案越小越乾淨;顏色越多能留住細膩處,但路徑和體積也跟著漲。同一張圖不妨試兩個預設對比一下——前後對照預覽會把原圖和描摹結果並排放給你,讓你在下載之前就看清好壞。

關於照片,把話說明白

照片也能描,但你幾乎肯定不會想這麼做。一張照片有成千上萬種微妙不同的顏色、沒有硬邊緣——描摹演算法只能用一層層疊在一起的平塗色塊去湊近似。出來的 SVG 極其龐大(常常比原來的 JPG 還大得多),看起來是塗抹感、海報感,而不是照片感,而且改起來要命。凡是連續色調的東西——人物、風景、產品照——用點陣圖格式才對,那類需求有專門的壓縮和轉換工具。SVG 是給形狀用的,不是給照片用的。這個工具不會攔著你去描一張照片,但預覽會讓問題一目瞭然。

還有一點要講清楚:這是真正的描摹。它讀你給的畫素,畫出跟著畫素走的向量路徑。它不是一個 AI,不會把你的 logo 重畫或"美化"成一個新東西。源圖要是模糊、低解析度或者帶噪點,描摹結果就繼承這些毛病——乾淨、清晰、顏色少的輸入給你乾淨的結果,亂糟糟的輸入給你亂糟糟的路徑。

描完之後還能改色、能編輯

因為輸出的是一個正常的 SVG,由帶名字的路徑和填充組成,你並不會被描摹當時產生的那些顏色困住。用向量編輯器開啟這個檔案——Illustrator、Inkscape、Figma,甚至一個文字編輯器——你可以改一個填充值就把整塊區域換色、微調某條路徑、刪掉演算法多描出來的雜形狀,或者把顏色設成你精確的品牌色值。把 logo 弄成向量的真正好處就在這:它不再是一張定死的圖,而是一個歸你所有、任意尺寸都不糊、可以隨手編輯的物件。