簡短的回答
開啟圖片轉 SVG,把圖片丟進去,看紅線。那條線就是現在的輪廓,畫在它來自的那些畫素上面。如果它貼著形狀走,拿檔案就行。如果裡面有不該有的東西——一個斑點、一枚訂書釘、一行說明、一片陰影——點一下那個東西,它就沒了。
下面講的全是決定這件事到底成不成的兩個問題:你的圖片是形狀還是照片,以及找形狀的兩種方法它需要哪一種。
描圖不是轉換,照片描不了
把 JPEG 轉成 PNG 是轉換:同一張圖,換一種寫法,路上什麼都沒有決定。描圖不是這樣。它把幾乎所有東西都扔掉,只留一樣——一個形狀的邊界——然後把這條邊界寫成曲線。如果你的圖片裡有一個清楚的形狀,這正是你要的。如果是一張房間的照片,就沒有形狀可留,回來的是每一塊顏色相近的區域各自變成一個色塊。
這不是一個等著被工程攻克的限制,所以值得把數字說清楚。一頁 A4 線稿描出來是三個形狀、六千位元組。一頁手寫字是五十個形狀、十五萬位元組。區區一百萬畫素的照片描出來是四千個形狀、一兆半——比 JPEG 大,開啟更慢,還不像那張照片。到了那一步,工具會停止繪製並明說,而不是等你下載完才發現。
哪些描得好:
- logo、標誌和花押字;
- 鏤空模板、印章和切割檔案;
- 簽名和手寫字型;
- 線稿、排線和漫畫的墨線;
- 剪影,以及任何本來就是白底黑圖的東西。
有一件跟照片有關的工作確實能做,但那是另一件事:把一樣東西從背景裡裁出來,摳成一整塊實心剪影。第二個設定就是為這個準備的。
找形狀的兩種方法
描圖需要每畫素一位——在裡面,還是在外面——決定這一點有兩種辦法。
明暗問的是每個畫素是否比某個值更暗,這個值替你算好。這對紙上的墨跡再合適不過,logo、掃描檔和鏤空模板都該用它。它出錯的時候,通常錯得看得見:挪動閾值,直到細線保住,而紙不跟著變灰。
主體問的是另一個問題,因為在照片上,第一個問題沒有答案。深灰石頭上站著一尊深紅塑像,是深色疊深色:沒有哪個亮度能把它們分開,所以任何閾值都做不到。它轉而從圖片邊緣的一圈帶子裡學會什麼是背景,拿每個畫素跟它比,留下不是背景的最大一塊。角落裡的一行說明不是最大的一塊,所以會被丟掉,而不是被描出來。
它有一種失敗方式值得事先知道:裁得太緊、主體從兩三邊出畫的照片。這時邊緣大多是主體,模型學到的是主體自己的顏色,答案就裡外顛倒了。這種情況撥哪個滑塊都沒用——錯的是前提,不是算術。關掉從邊緣學背景,勾上改為點一下說「這是背景」,然後在背景上點兩三下。
它弄錯的地方,指一下就能改
閾值是整張圖片共用的一個數,總會在某個地方出錯:一片陰影成了墨跡,一枚訂書釘留了下來,字母 O 的中間糊上了。每一處都是區域性的錯誤,都有顯而易見的區域性解法,而解法不是再來一個滑塊——是把那個東西指出來。
點任何不該出現在圖裡的東西,它就消失;再點一下,它就回來。一下點中的是那一整塊同色區域,所以一下去掉的是整個斑點或整個印章,而不是一個畫素。點一塊被圍住的背景則是把它填上,不該是洞的洞就是這麼補上的。圖片下面那一行會在你點之前告訴你它是哪一種、有多大,所以一下點掉大半張圖的事,永遠不會是個意外。
改動和閾值分開儲存,所以之後再拖滑塊也不會把它們丟掉;把圖片反過來,改動也跟著反過來——你抹掉的斑點還是抹掉的,不會變成背景上的一個洞重新冒出來。
平滑的兩個數,以及什麼時候該碰
細節是簡化時線條允許偏離畫素多遠。低於 1 左右什麼都不會發生——樓梯的一級臺階離它所屬的線整整一個畫素,所以更小的容差會把每一級臺階都留下,沒有東西可簡化。高於 2 左右,就開始吃掉真正的曲線。除非你另有指定,否則它按形狀算,因為一個數沒法同時伺候一整個人像和字母裡兩畫素寬的豎筆。
拐角銳度是輪廓要拐多大的彎,那個彎才保留為角而不是被磨成曲線。這只是決定的一半——一個頂點離鄰居夠遠,也會被留作角,光這一條就能抓住所有明顯的角——所以這個數只裁決那些緩的彎。低於二十度左右,一切都成了角,圓回來時成了多邊形。
大多數圖片這兩項都不用碰。值得知道它們,是為了確實需要的兩種情況:很小的文字的掃描檔,需要更多細節;準備上機器切割的形狀,通常需要更少。
你拿到什麼,拿它做什麼
一個檔案,裡面一條 <path>。外輪廓朝一個方向轉,裡面的洞朝另一個方向轉,所以一個帶四十個洞的形狀也能是一個元素,不用設定填充規則——Illustrator、Inkscape、Figma、瀏覽器和大多數切割軟體讀出來都一樣。
反過來的方向——你已經有 SVG,需要的是 PNG——是另一件事,有它自己的指南。描圖沒有任何一步是可逆的:從這裡出去的 SVG 是這個形狀的一張新圖,不是它來自的那張圖片。