# 圖片轉 SVG 把 logo、鏤空模板或剪影描成曲線

一個形狀，一條輪廓。不該有的東西，點一下就好。

> 在瀏覽器裡把黑白圖片描成真正的 SVG 輪廓。logo、鏤空模板、簽名、線稿和剪影都變成能放大到任意尺寸的曲線。描多了的部分，點一下就去掉。什麼都不上傳。

本頁是一個完全在你的瀏覽器裡執行的互動式工具，地址是 https://abox.tools/zh-TW/image-to-svg/。你交給它的任何內容都不會被上傳。下面是這個頁面用文字對該工具的全部說明；要使用它，請開啟這個地址。

## 你的圖片**不會上傳**。這裡根本沒有伺服器。

圖片由你自己的瀏覽器從硬碟上讀進來，`src/mask.js` 把它壓成每畫素一位，`src/contour.js` 沿著形狀的邊緣走一圈，`src/fit.js` 再往上貼曲線，總共六百來行你能讀的程式碼，背後沒有引擎，也不用為了跑起來下載任何東西。這個工具沒有任何聯網功能：不取東西，不發東西，就算真有，這個頁面的另一頭也沒有伺服器能接住一張圖。

- ✗ 不上傳
- ✗ 不註冊
- ✗ 沒有水印
- ✓ 斷網能用
- ✓ 開源

## 不上傳怎麼把圖片描成 SVG

1. **選一張圖片。** logo、鏤空模板、簽名、印章、掃描的圖紙、剪影。只要裡面有一個清楚的形狀，就描得乾淨；一張房間的照片不行，下面會明說，而不是等到最後給你個意外。檔案直接從你的硬碟上讀，期間什麼都不會發到任何地方。
2. **告訴它形狀是什麼。** 紙上的圖按**明暗**分開，分界值替你算好。一張物件的照片不行——深灰石頭上的一尊深紅塑像，是深色疊深色，亮度分不開它們。這種要選**主體**：它從圖片邊緣的一圈帶子裡學會什麼是背景，然後把不是背景的都留下。
3. **看紅線，別看設定。** 輪廓畫在它來自的那些畫素上面，因為只有在那裡，這個問題才有答案：一條輪廓對不對，只相對於那些畫素，跟別的無關。拖任意一張圖，兩張一起動；滾滾輪放大到能看清這條線到底在做什麼。
4. **不該有的東西，點一下去掉。** 一個斑點、一枚訂書釘、一個印章、一行說明、一片陰影。一下點中的是那一整塊同色區域而不是一個畫素，所以你指的是一個形狀；再點一下就回來。點一塊被圍住的背景，則是把它填上——不該是洞的洞，就是這麼補上的。
5. **只在需要時調平滑。** *細節*是簡化時線條允許偏離畫素多遠，除非你另有指定，否則按形狀算。*拐角銳度*決定輪廓要拐多大的彎，那個彎才保留為角而不是被磨圓。大多數圖片這兩項都不用碰。
6. **拿走 SVG。** 一個檔案，一條 `<path>`，沒有填充規則要操心：外輪廓朝一個方向轉，洞朝另一個方向轉，所以一個帶四十個洞的形狀也只是一個元素。Illustrator、Inkscape、Figma、瀏覽器和切割機都打得開。

## 說得更細的版本

[怎麼把圖片描成 SVG](https://abox.tools/zh-TW/guides/trace-an-image-into-an-svg/): 在瀏覽器裡把 logo、鏤空模板、簽名或剪影變成真正的向量輪廓。哪些圖片描得好，哪些永遠描不好，以及怎麼改掉描圖器弄錯的地方。

## 工具箱裡還有

- [身高對比圖](https://abox.tools/zh-TW/compare-heights/): 把身高打進去，把圖帶走。為了畫它，不會往外送任何東西。
- [圖片壓縮](https://abox.tools/zh-TW/compress-image/): 說個大小，剩下的它來算。
- [圖片縮放](https://abox.tools/zh-TW/resize-image/): 說個尺寸，拉個框，挑個格式。
- [HEIC 轉 JPG](https://abox.tools/zh-TW/heic-to-jpg/): iPhone 拍的照片，換成什麼都打得開的格式。

## 常見問題

### 我的圖片會被上傳到哪裡嗎？

不會。檔案由你自己的瀏覽器在你自己的硬體上讀取，由本站發出的幾百行 JavaScript 描邊，再作為下載交還給你。這個工具沒有任何聯網功能——從不取東西，也從不發東西——頁面的 `Content-Security-Policy` 把它允許聯的地址全列了出來，沒有一個是本站的。

### 它能把我的照片變成 SVG 嗎？

變不出有用的東西，而且頁面會直接告訴你，而不是等你下載完才發現。描圖會把每一塊顏色相近的區域都變成一個獨立的形狀，所以一張照片回來時是幾千個疊在一起的色塊，檔案比 JPEG 大好多倍，開啟慢，還不像那張照片。描得好的，是裡面有一個*形狀*的圖片：logo、鏤空模板、簽名、線稿、剪影。如果是隻拍了一樣東西的照片，*主體*這個設定會把它摳成一整塊實心剪影——那是另一回事，而且真的有用。

### 找形狀的兩種方法有什麼區別？

問的問題不一樣。**明暗**問的是每個畫素是否比某個值更暗，這對紙上的墨跡再合適不過，而在主體和背景一樣暗的時候毫無用處。**主體**問的是背景是什麼——它從圖片邊緣的一圈帶子裡學，拿每個畫素跟它比，留下不是背景的最大一塊。這在一張物件照片配上大致均勻的背景時管用；在裁得太緊、主體從三邊出畫的圖片上會失敗，因為它學習用的邊緣本身就是主體。遇到這種情況，你可以自己把背景指給它。

### 為什麼描出來的形狀有洞，或者細的部分丟了？

因為圖片變成每畫素一位的那一刻就已經是這樣了。開啟*描圖器拿到的*看看：小於十二畫素左右，字母的內空已經糊上，豎筆已經貼在一起，沒有哪種描圖能找回一個不存在的洞。補救在上游——挪一挪閾值，或者從更大的掃描開始。在*主體*模式下，*補上不超過*會封住小洞，*整個填實*會把背景從圖片邊緣夠不到的洞全部填上。

### 它弄錯的地方能改嗎？

能，第三步基本上就是做這個的。點任何不該出現在圖裡的東西，它就消失；再點一下，它就回來。一下點中的是那一整塊同色區域，所以一下去掉的是整個斑點或整個印章，而不是一個畫素。點一塊被圍住的背景則是把它填上。改動和閾值分開儲存，之後再拖滑塊也不會把它們丟掉。

### SVG 會有多大？

如果是形狀，比圖片小：描出來的剪影通常一到五千位元組，logo 再多幾千。頁面會在下載旁邊告訴你確切數字。如果是照片，會大得嚇人——這是這個工具不適合那個檔案最明確的訊號——超過一千個左右的獨立形狀，頁面就會停止繪製並明說。

### 能描彩色的嗎？

不能。這個工具做的是單色的一個形狀，只有這種情況出來的才是一張圖，而不是一張劣質影印件。彩色描圖意味著先量化成幾種顏色，再把每種顏色當作一個圖層單獨描，結果會讓大多數提出這個要求的人失望。要顏色的話，在這裡描出形狀，再到你的繪圖軟體裡上色。

### 拿到 SVG 之後能做什麼？

放大到任意尺寸而不發虛、改一個屬性就換顏色、做動畫、列印，或者送去切割機、鐳射機。它是一條沒有填充規則可弄錯的 `<path>`，所以 Illustrator、Inkscape、Figma、瀏覽器和大多數 CNC 軟體讀出來都一樣。

### 圖片大小有上限嗎？

上限是你機器的，不是我們的。一頁 300 dpi 掃描的 A4——大約九百萬畫素——不到一秒就描完。更大的圖片也能用，只是更慢，而且工作是在你自己的處理器上做的，不是排在哪個佇列裡。

### 免費嗎？需要帳號嗎？

免費，沒有帳號、沒有登入、沒有試用期、沒有水印。檔案的數量和大小也沒有限制，因為沒有伺服器替它們買單——工作在你自己的機器上做。網站上有廣告，靠廣告維持；廣告拿不到任何關於你檔案的資訊。

### 斷網能用嗎？

能。把頁面載入一次，然後斷開網路，它照樣能用。這也是證明什麼都沒上傳最簡單的辦法：一個要把你的圖片送出去描的工具，拔掉網線那一刻就會停。

## 這條隱私承諾怎麼核實

- **你的圖片沒地方可去。** Content-Security-Policy 把這個頁面允許聯的地址全列了出來，沒有一個是本站的。這裡沒有能收檔案的介面，程式碼裡也沒有一行會把檔案發出去，就算真有那麼個介面也一樣。
- **這裡沒有任何東西會去聯網取資料。** 整個 `src/` 裡，一個 `fetch`、一個 `XMLHttpRequest`、一個 `sendBeacon` 都找不到。整個工具就是對一張圖片的畫素做算術：一個閾值，沿著找到的形狀的邊緣走一圈，再貼幾段曲線。
- **沒有引擎要下載。** 描圖通常是別人的程式在做的事，放到網頁上就意味著第一下點選之前先要下來好幾 MB 編譯過的程式碼。這裡沒有這回事。整個工具就是幾百行從本站發出的普通 JavaScript，這也是頁面一開啟就能用、不用等的原因。
- **Google 載入了什麼，又拿不到什麼。** 廣告指令碼和統計指令碼來自 Google，捐助按鈕來自 Buy Me a Coffee。關於你圖片的資訊，一條都沒給它們。讀圖、取閾值、描邊的每一行程式碼都從本站發出，也都擺在儲存庫裡。
- **斷網照樣能用。** 斷開網路，這個工具跟原來一模一樣，因為它本來就沒有聯網這一步。這是最省事的一條證明。

**你可以自己核對。**上面這些不用你信。這個頁面是儲存庫裡的模板和配置產生出來的，構建指令碼你能讀，也能自己跑一遍，跑出來的結果就提交在 `dist` 分支上。拿實際發給你的內容，跟你自己從原始碼構建出來的結果對一遍就知道了： https://github.com/A-Box-of-Tools/website

最值得先讀的幾個檔案：`config/site.toml` 裡是 Content-Security-Policy，`src/mask.js` 裡是一張圖怎麼變成每畫素一位，`src/contour.js` 裡是沿形狀邊緣走的那一圈，`src/fit.js` 裡是樓梯怎麼變成曲線，`src/subject.js` 裡是沒有明暗可分的時候怎麼把背景算出來。