abox.tools

語言: 繁體中文

怎麼把圖片描成 SVG

放大的 PNG 是一段樓梯。SVG 是繪圖指令,所以任何尺寸都銳利——把前者變成後者,叫描圖。它在形狀上效果極好,在照片上效果很差,動手之前值得先弄清這個區別。

開啟圖片轉 SVG 一個形狀,一條輪廓。不該有的東西,點一下就好。

以 Markdown 檢視

簡短的回答

開啟圖片轉 SVG,把圖片丟進去,看紅線。那條線就是現在的輪廓,畫在它來自的那些畫素上面。如果它貼著形狀走,拿檔案就行。如果裡面有不該有的東西——一個斑點、一枚訂書釘、一行說明、一片陰影——點一下那個東西,它就沒了。

下面講的全是決定這件事到底成不成的兩個問題:你的圖片是形狀還是照片,以及找形狀的兩種方法它需要哪一種。

兩個畫面:左邊是圖片,上面畫著紅色的描圖輪廓;右邊是完成的 SVG。
輪廓畫在圖片上面,而不只是放在旁邊。只有在那裡,這個問題才有答案——一條輪廓對不對,只相對於那些畫素,跟別的無關。

描圖不是轉換,照片描不了

把 JPEG 轉成 PNG 是轉換:同一張圖,換一種寫法,路上什麼都沒有決定。描圖不是這樣。它把幾乎所有東西都扔掉,只留一樣——一個形狀的邊界——然後把這條邊界寫成曲線。如果你的圖片裡有一個清楚的形狀,這正是你要的。如果是一張房間的照片,就沒有形狀可留,回來的是每一塊顏色相近的區域各自變成一個色塊。

這不是一個等著被工程攻克的限制,所以值得把數字說清楚。一頁 A4 線稿描出來是三個形狀、六千位元組。一頁手寫字是五十個形狀、十五萬位元組。區區一百萬畫素的照片描出來是四千個形狀、一兆半——比 JPEG 大,開啟更慢,還不像那張照片。到了那一步,工具會停止繪製並明說,而不是等你下載完才發現。

描一張照片時顯示的提醒:幾千個互不相連的形狀,和一個巨大的檔案。
一張照片被當成線稿來描,最後就是這樣。檔案照樣可以下載;頁面只是拒絕假裝它是一張圖。

哪些描得好:

有一件跟照片有關的工作確實能做,但那是另一件事:把一樣東西從背景裡裁出來,摳成一整塊實心剪影。第二個設定就是為這個準備的。

找形狀的兩種方法

描圖需要每畫素一位——在裡面,還是在外面——決定這一點有兩種辦法。

明暗問的是每個畫素是否比某個值更暗,這個值替你算好。這對紙上的墨跡再合適不過,logo、掃描檔和鏤空模板都該用它。它出錯的時候,通常錯得看得見:挪動閾值,直到細線保住,而紙不跟著變灰。

主體問的是另一個問題,因為在照片上,第一個問題沒有答案。深灰石頭上站著一尊深紅塑像,是深色疊深色:沒有哪個亮度能把它們分開,所以任何閾值都做不到。它轉而從圖片邊緣的一圈帶子裡學會什麼是背景,拿每個畫素跟它比,留下不是背景的最大一塊。角落裡的一行說明不是最大的一塊,所以會被丟掉,而不是被描出來。

它有一種失敗方式值得事先知道:裁得太緊、主體從兩三邊出畫的照片。這時邊緣大多是主體,模型學到的是主體自己的顏色,答案就裡外顛倒了。這種情況撥哪個滑塊都沒用——錯的是前提,不是算術。關掉從邊緣學背景,勾上改為點一下說「這是背景」,然後在背景上點兩三下。

它弄錯的地方,指一下就能改

閾值是整張圖片共用的一個數,總會在某個地方出錯:一片陰影成了墨跡,一枚訂書釘留了下來,字母 O 的中間糊上了。每一處都是區域性的錯誤,都有顯而易見的區域性解法,而解法不是再來一個滑塊——是把那個東西指出來。

點任何不該出現在圖裡的東西,它就消失;再點一下,它就回來。一下點中的是那一整塊同色區域,所以一下去掉的是整個斑點或整個印章,而不是一個畫素。點一塊被圍住的背景則是把它填上,不該是洞的洞就是這麼補上的。圖片下面那一行會在你點之前告訴你它是哪一種、有多大,所以一下點掉大半張圖的事,永遠不會是個意外。

改動和閾值分開儲存,所以之後再拖滑塊也不會把它們丟掉;把圖片反過來,改動也跟著反過來——你抹掉的斑點還是抹掉的,不會變成背景上的一個洞重新冒出來。

平滑的兩個數,以及什麼時候該碰

細節是簡化時線條允許偏離畫素多遠。低於 1 左右什麼都不會發生——樓梯的一級臺階離它所屬的線整整一個畫素,所以更小的容差會把每一級臺階都留下,沒有東西可簡化。高於 2 左右,就開始吃掉真正的曲線。除非你另有指定,否則它按形狀算,因為一個數沒法同時伺候一整個人像和字母裡兩畫素寬的豎筆。

拐角銳度是輪廓要拐多大的彎,那個彎才保留為角而不是被磨成曲線。這只是決定的一半——一個頂點離鄰居夠遠,也會被留作角,光這一條就能抓住所有明顯的角——所以這個數只裁決那些緩的彎。低於二十度左右,一切都成了角,圓回來時成了多邊形。

大多數圖片這兩項都不用碰。值得知道它們,是為了確實需要的兩種情況:很小的文字的掃描檔,需要更多細節;準備上機器切割的形狀,通常需要更少。

你拿到什麼,拿它做什麼

一個檔案,裡面一條 <path>。外輪廓朝一個方向轉,裡面的洞朝另一個方向轉,所以一個帶四十個洞的形狀也能是一個元素,不用設定填充規則——Illustrator、Inkscape、Figma、瀏覽器和大多數切割軟體讀出來都一樣。

最後一步:這張圖有多少個形狀和點、有多大,以及下載按鈕。
下載之前值得看一眼這個數。一張圖是幾十或幾百個點;幾千個,說明那張圖片是照片。

反過來的方向——你已經有 SVG,需要的是 PNG——是另一件事,有它自己的指南。描圖沒有任何一步是可逆的:從這裡出去的 SVG 是這個形狀的一張新圖,不是它來自的那張圖片。