免費轉換器

PNG 轉換 SVG 向量化

將 PNG 或 JPG 點陣圖形轉換為可縮放的 SVG 向量圖。完全在您的瀏覽器中進行安全且快速的處理。

將 PNG/JPG 拖曳至此

支援最高 50MB

關於此工具

將 PNG 轉換為 SVG 從根本上來說是一個追蹤操作,而不是格式變更。 PNG儲存像素; SVG 儲存幾何圖元。從像素網格到可縮放向量路徑需要解釋位圖並在相似顏色的區域周圍繪製近似形狀。結果是真正可擴展的——您可以自由調整大小而不會出現像素化——但它並不是原始程式碼的完美再現。攝影內容的追蹤效果很差,因為每個像素級的顏色變化都會變成一個形狀,產生巨大的 SVG,無法達到目的。標誌、圖標、藝術線條和高對比度圖形的描跡清晰,因為它們具有少量且邊界明確的顏色區域。

該轉換器使用 imagetracerjs 庫,這是一個類似於 potrace 的向量追蹤演算法的 JavaScript 連接埠。 PNG 被解碼為 RGBA 點圖,使用可配置調色板將點陣圖分割為顏色區域,將每個區域的邊界追蹤為路徑,使用貝塞爾近似簡化路徑,並將生成的路徑作為 SVG 路徑元素發出。整個管道在您的瀏覽器中運行,無需任何伺服器上傳。

追蹤參數控制保真度和檔案大小之間的權衡。更多的顏色和更精細的細節會產生更大的 SVG,與來源更加匹配;更少的顏色和更粗糙的描畫會產生更小的 SVG,並具有更風格化的感覺。徽標和圖示的預設值已調整;複雜的圖像可能會受益於調整設定的追蹤通道,或者可能根本不適合向量化。

為什麼將 PNG 轉換為 SVG

當您需要將圖像縮放到超出其原始解析度時,向量化 PNG 最有用。尤其是徽標,通常以適中尺寸的 PNG 形式出現,並且需要在廣告看板、視網膜顯示器和大幅面印刷品上顯得清晰。向量軌跡產生的 SVG 可以在不損失品質的情況下進行縮放;權衡是對原始像素的保真度。

對於顏色較少且平坦區域較大的圖形,SVG 也比 PNG 更緊湊。 256×256 的 PNG 圖示可能為 8 KB;具有兩種或三種顏色的等效 SVG 通常小於 1 KB。對於交付到 Web 前端的 UI 圖示庫,向量版本可縮小套件大小並提高所有顯示密度的清晰度。

使用方法

拖放 PNG,選擇追蹤設置,產生 SVG。

  1. 上傳你的PNG: 將檔案拖曳到上傳區域或點選瀏覽。最好的結果來自具有銳利邊緣和少量不同顏色的 PNG - 標誌、圖標、線條藝術、簡單插圖。照片追蹤效果很差並且產生巨大的 SVG。
  2. 如果需要,調整追蹤選項: 顏色計數控制輸出中出現的不同顏色的數量。路徑簡化(也稱為 ltres 或 qtres)控制演算法平滑拐角的積極程度。精度越高,SVG 就越接近來源,但具有更多路徑資料。
  3. 追蹤和預覽: imagetracerjs演算法貫穿了顏色量化、邊緣偵測、輪廓追蹤、貝塞爾曲線擬合。追蹤時間尺度與圖像大小和顏色數量。 256×256 的標誌,4 種顏色在一秒鐘內完成;具有 16 種顏色的 1024×1024 影像可能需要幾秒鐘的時間。
  4. 下載 SVG: 將 SVG 儲存到您的裝置。該檔案包含帶有路徑元素的 XML 標記;您可以在任何文字編輯器中開啟它來檢查或手動調整結果。

常見用例

技術細節

imagetracerjs 實現了多級管道:顏色量化使用 k 均值聚類或中值切割將位圖減少為固定數量的顏色;邊緣檢測識別區域之間的像素邊界;輪廓追踪沿著邊界產生閉合多邊形;直線和曲線擬合用貝塞爾曲線逼近多邊形以減少路徑數據。

最重要的演算法參數是顏色數量(典型值:4-32)、pathomit(比這麼多像素短的路徑將作為噪聲被丟棄)、ltres(線容差 - 邊緣在分割成新段之前可以偏離多遠)和 qtres(二次曲線容差 - 曲線平滑的程度)。預設值適用於徽標;複雜的圖像受益於每個圖像的調整。

輸出是帶有路徑元素的標準 SVG 1.1。每個顏色區域都成為具有填滿屬性的一條路徑。產生的檔案可以在任何瀏覽器、向量編輯器或支援 SVG 的設計工具中開啟。檔案大小主要取決於路徑數和節點密度;典型的追蹤徽標為 1–10 KB。

最佳實踐

常見問題

SVG 輸出是真正的向量檔嗎?
該工具追蹤光柵圖像以建立向量路徑。簡單的圖形、標誌和線條藝術效果最佳。照片會產生複雜的路徑,看起來可能不像預期的那樣。
SVG 與其他影像格式有何不同?
SVG 是一種向量格式——圖像被描述為數學形狀而不是像素。這意味著 SVG 檔案可以縮放到任何大小而不會損失質量,並且它們通常比徽標和圖標等圖形的光柵圖像小得多。
有什麼限制需要注意嗎?
支援最大 50MB 的檔案。非常大或複雜的文件可能需要更長的時間來處理。所有轉換都發生在您的瀏覽器中,因此處理速度取決於您的裝置。
我的影像在轉換過程中是否保密?
是的。您的 PNG 檔案完全在瀏覽器中使用 Canvas API 和 JavaScript 進行處理。沒有任何內容上傳到任何伺服器 - 檔案直接從您的裝置傳輸到轉換器,然後返回您的裝置。
痕跡可以在 Illustrator 或 Inkscape 中編輯嗎?
是的。輸出是帶有路徑元素的標準 SVG。 Illustrator 和 Inkscape 都可以在本機開啟它,讓您編輯路徑、變更顏色和最佳化結果。
我的 PNG 是否已上傳到伺服器?
不會。追蹤是在您的瀏覽器中使用 imagetracerjs 進行的。該文件不會離開您的裝置。
為什麼我的 SVG 檔案很大?
通常是因為來源影像具有太多顏色或太多精細細節。嘗試減少色彩數量、增加路徑簡化或使用具有更清晰幾何形狀的不同來源影像。
我可以描畫具有透明度的 PNG 嗎?
是的。透明像素成為 SVG 中沒有路徑的區域。當 SVG 以任何背景顏色渲染時,透明背景都會被保留。