這個頁面的程式碼沒跑起來。

直接從資料夾裡開啟 index.html，瀏覽器會攔下 JavaScript 模組，於是你選好圖片之後，頁面不會有任何反應。改用 http 把這個資料夾提供出去： 

powershell -ExecutionPolicy Bypass -File serve.ps1

然後開啟 http://localhost:8080/。

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

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

繁體中文
檢視原始碼
你的圖片不會上傳。這裡根本沒有伺服器。

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

即時檢查： 檢查中…

離線： 檢查中…

別信我們嘴上說的。開啟開發者工具，盯著「網路」面板，描一張試試。沒有一條請求帶著圖片、縮圖、檔名，或者你選中內容裡的任何一個位元組。或者乾脆拔掉網線，照描不誤。

1 選一張圖片

2 告訴它形狀是什麼

描圖需要每畫素一位：在裡面，還是在外面。決定這一點有兩種辦法，適合的圖片不一樣。白紙上的圖按明暗分開。一張物件的照片不行：深灰石頭上的一尊深紅塑像，是深色疊深色，亮度分不開它們。這種要選主體：它從圖片的邊緣推斷什麼是背景，然後把不是背景的都留下。

3 檢查輪廓，改掉它弄錯的地方

紅線是現在的輪廓，畫在它來自的那些畫素上面。只有在那裡，這個問題才有答案，因為一條輪廓對不對，只相對於那些畫素，跟別的無關。拖任意一張圖，兩張一起動；滾滾輪放大；不該有的東西，點一下。一下點中的是那一整塊同色區域，所以你指的是一個形狀而不是一個畫素；再點一下就回來。

按形狀算 線條允許偏離畫素多遠。低於 1 左右什麼都不會發生，因為樓梯的一級臺階離它所屬的線整整一個畫素；高於 2 左右，就開始吃掉真正的曲線。

拐角銳度 輪廓要拐多大的彎，那個彎才保留為角而不是被磨成曲線。太低，每一點抖動都成了角，圓回來時成了多邊形。

圖片

SVG

線條要多平滑

畫素的樓梯怎麼變成曲線，由兩個數決定。大多數圖片兩個都不用碰，但兩個都值得知道，以備需要的時候。

4 拿走 SVG

以 Markdown 檢視

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

說得更細的版本

怎麼把圖片描成 SVG 在瀏覽器裡把 logo、鏤空模板、簽名或剪影變成真正的向量輪廓。哪些圖片描得好，哪些永遠描不好，以及怎麼改掉描圖器弄錯的地方。

常見問題

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

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

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

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

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

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

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

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

它弄錯的地方能改嗎？

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

SVG 會有多大？

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

能描彩色的嗎？

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

拿到 SVG 之後能做什麼？

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

圖片大小有上限嗎？

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

免費嗎？需要帳號嗎？

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

斷網能用嗎？

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