圖片轉SVG描摹器

圖片轉SVG描摹器能將 PNG、JPG 或任何其他點陣圖轉換為乾淨、無限縮放的 SVG 向量圖。與需要上傳檔案的伺服器端描摹器或僅嵌入 base64 點陣圖的「假」SVG 不同，此工具完全在您的瀏覽器中運作 — 將圖片量化為多個顏色圖層，並結合邊緣追蹤、Ramer–Douglas–Peucker 簡化以及 Chaikin 轉角平滑演算法，將每個圖層的輪廓重新描摹為真實的向量路徑。拖放標誌、圖示、草圖或照片，即可即時觀看並排對比預覽的重建過程，接著便能複製 SVG 標記或下載可在 Figma、Illustrator 或 Inkscape 中編輯的 .svg 檔案。

本描摹器的獨特之處

運作原理 (5 階段管線)

使用方法

1. 上傳點陣圖。 將 PNG/JPG 拖放到投放區、點擊瀏覽、從剪貼簿貼上 (Ctrl+V)，或點擊任何內建範例以查看描摹器的實際運作效果。
2. 選擇預設。 「標誌」適用於 2–4 色的標記，「剪影」適用於裁剪出的形狀，「線條草圖」適用於手繪藝術，「照片海報」適用於海報化的照片，「精細藝術」則適用於具有細微差別的 10 色輸出。
3. 調整滑桿。 「顏色圖層」控制描摹器保留多少種不同的顏色。「平滑度」修飾像素階梯。「簡化度」折疊長直條（越低 = 細節越多，越高 = 檔案越小）。「描摹解析度」設定內部的運作寬度。
4. 複製或下載。 使用複製 SVG 獲取原始標記，使用下載 .svg 獲取可編輯的向量檔案，或使用下載 .png 將清理後的 SVG 重新渲染回高解析度的點陣圖。

獲得最乾淨描摹效果的技巧

• 從高對比度的圖片開始。 純色背景和清晰的邊緣比充滿漸層的照片更能呈現好得多的描摹效果。
• 針對特定工作使用正確的預設。 預設的「標誌」預設假設為 3 種扁平顏色 — 用在照片上看起來會很奇怪。對於自然圖像，請切換到「照片海報」或「精細藝術」。
• 先推高簡化度，再調整平滑度。 簡化度會移除點；平滑度則會軟化剩餘的部分。按照該順序操作可以使結果同時保持檔案小且外觀平滑。
• 調低標誌的描摹解析度。 對於圖示來說，240 px 就綽綽有餘了 — 再調高只會產生充滿雜訊的路徑。
• 切換「透明背景」（如果您希望將 SVG 放入有顏色的版面中）。否則，描摹器會用白色填充背景。
• 對於草圖，請使用邊緣模式。 它會先運作 Sobel 濾鏡，然後描摹生成的邊緣圖 — 非常適合線條藝術和鉛筆畫。

描摹的 SVG 展現身手之處

向量標誌和圖示在每個螢幕尺寸和 DPI 下都能保持清晰 — 從 16×16 的網站圖示到 4K 的大型橫幅。描摹出的 SVG 也是進一步編輯的完美輸入來源：在 Figma、Adobe Illustrator 或 Inkscape 中開啟檔案，您就可以對任何單獨的路徑進行重新著色、重塑形狀或製作動畫。SVG 同時也是一等網頁格式：將標記內聯貼入 HTML 中可省去額外的網路請求，透過 data: URI 將其作為 background-image 放入 CSS 中，或者使用 stroke-dasharray 對 path 筆劃製作動畫，以獲得手繪書寫的效果。

演算法背景

經典的金級標準描摹器是 Potrace（Peter Selinger，2003 年），它使用多邊形擬合和曲線最佳化階段來產生非常平滑的貝茲路徑。一個完整的 Potrace 移植需要數千行程式碼，因此本工具使用了更輕量、同樣被充分理解的管線：用於輪廓提取的 Moore-neighborhood 邊界追蹤、用於路徑簡化的 Ramer–Douglas–Peucker（也稱為 Douglas–Peucker 演算法）以及用於平滑的 Chaikin 切角演算法。每個階段在路徑長度上都是 O(n)，因此整個描摹器在遠不到一秒的時間內即可完成典型的 240 px 圖片處理。

隱私與安全

所有程序都在本地運作。<input type="file"> 元素直接將您的檔案讀入瀏覽器，Canvas API 在您的裝置上提取像素資料，而 JavaScript 描摹器絕不會帶著您的圖片發出網路請求。您可以透過開啟 DevTools → Network 並在描摹時進行觀察來確認這一點 — 不會出現任何上傳流量。這使得該工具對於專有標誌、未發布的品牌資產和個人照片來說都是非常安全的。

常見問題

我的圖片會上傳到你們的伺服器嗎？

不會。圖片轉SVG描摹器是 100% 用戶端運作。您的點陣圖會被讀入瀏覽器，使用 Canvas API 進行處理，並以原生 JavaScript 進行描摹，絕不會透過網路傳送。中斷您的 Wi-Fi 網路，描摹器依然可以正常運作。

我可以描摹哪些圖片格式？

您的瀏覽器可以渲染的任何點陣格式：PNG、JPG、GIF（第一影格）、WebP 和 BMP。您也可以描摹現有的 SVG（它會先被點陣化），這對於簡化複雜的向量圖或重新量化它們的顏色非常有用。

我應該從哪個預設開始？

對於純色標誌和圖示，請使用標誌預設。對於純黑白剪裁，請使用剪影。對於繪畫和線條藝術，請使用線條草圖。對於照片，請使用照片海報或精細藝術。然後輕推滑桿 — 即時預覽可以讓您清楚看出每個控制項的作用。

為什麼我描摹的 SVG 看起來有鋸齒？

增加平滑度滑桿可以使尖銳的像素邊角變圓，增加簡化度滑桿可以收縮長直條。較高的描摹解析度也能在描摹前擷取更多細節，從而提供更精細的輪廓。

我可以在描摹後編輯 SVG 嗎？

可以。輸出的是純 SVG 標記，每個顏色圖層都有一個 <path>（或在單色/邊緣模式下每個剪影一個）。您可以在 Inkscape、Illustrator、Affinity Designer, Figma 或任何文字編輯器中開啟它，以對個別路徑進行重新著色、重塑形狀或製作動畫。路徑是按渲染順序列出的（最淺的在前），因此任何向量編輯器中的圖層面板都會與之相匹配。

輸入的圖片最大可以是多少？

任何大小都可以 — 但描摹器內部會將您的點陣圖重新取樣至所選的描摹解析度 (64–512 px)。調得更高可以擷取更精細的細節，但代價是 SVG 檔案大小會變大。對於大多數標誌，200–300 px 是最合適的平衡點；對於詳細的照片，請嘗試 400–512 px。

描摹出的 SVG 看起來會和點陣圖完全一模一樣嗎？

很接近，但絕不會到像素級完美 — 這是向量化的權衡代價。將圖片量化為 N 種顏色必然會捨棄漸層，而路徑簡化則會移除微小的特徵。對於品牌關鍵資產，如果存在原始向量檔案，您應該始終從中開始；本工具適用於您只有點陣圖且需要其可用向量版本的情況。

我可以將描摹出的 SVG 用於商業用途嗎？

描摹器不會在輸出中添加浮水印、屬性聲明和分析指令。您是否可以將結果用於商業用途，取決於您對原始點陣圖所擁有的權利 — 描摹他人的標誌並不會轉移其所有權。請將其用於您創建或獲得授權進行向量化的資產上。