製作向量化的手寫文字：Image Vectorizer + Inkscape / Turn a Hand Lettered Sketch into SVG Vector Format: Image Vectorizer + Inkscape
有時候我們想要在海報上加些手寫文字，但是手寫文字掃描後只是個點陣圖，放大到海報上就會出現鋸齒痕跡，不慎美觀。如果能將手寫文字轉換成向量圖，那向量圖不管放到多大，看起來都還是很清晰。這篇我要介紹如何將手寫文字的點陣圖轉換成SVG格式的向量圖，使用的工具都是免費的自由軟體或線上服務喔。
相關工具 / Tools
本篇要用到的工具有三個：圖片瀏覽器XnViewMP、線上服務Image Vectorizer跟向量圖編輯工具Inkscape。Image Vectorizer可以直接用網頁開啟，XnViewMP跟Inkscape則是都要下載並安裝在你的電腦上才能執行。
圖片瀏覽器 XnViewMP
- XnView MP官方網站：http://www.xnview.com/en/xnviewmp/
- XnView MP下載頁面：http://www.xnview.com/en/xnviewmp/#downloads
(直接捲到下面的Windows的地方下載即可) - XnView MP version 0.72備份：OneDrive、Box、Mega
XnView MP是一個免費、跨平臺的圖片瀏覽與簡易處理工具，能夠批次處理大量圖片。XnView MP內建了很多編輯圖片的常用工具，我自己就很常用到自動色階跟改變顏色深度(像是把彩色改為灰階)，而這篇則是會用到調整亮度跟對比的功能。像這些功能都不需要開啟Photoshop或GIMP這種大型的圖片編輯工具，用XnView MP就能搞定了。
Image Vectorizer
- Image Vectorizer: https://www.vectorizer.io/
Image Vectorizer是一個線上服務的網站，它可以將點陣圖轉換成SVG向量圖。每張圖的檔案大小最多5MB，而且一次只能處理一張，短時間內處理太多張還會被要求要做Google reCAPTCHA驗證。
網路上大多數PNG轉SVG之類的服務，都只是在SVG向量圖中嵌入一個點陣圖，因此這個SVG放大縮小還是會變成模糊。但Image Vectorizer的作法跟VectorMagic很像，他們會分析圖片上的像素位置跟顏色，以此判斷這些像素是否能夠組合成各自的圖形，像是線條、圓圈或是曲線。這樣子產生的SVG向量圖，在放大後依然會十分清晰。
Inkscape
Inkscape是專門為了向量繪圖而設計的專業編輯器。它類似於商業軟體的Adobe Illustrator (簡稱AI)或是CorelDRAW，不過更棒的是，它是開放原始碼的自由軟體，可供大家免費使用。Inkscape是跨平臺軟體，可在任何主流的桌面版作業系統中執行。如果你懂得如何使用AI或CorelDRAW的話，相信也能很快就能使用Inkscape。
有了Image Vectorizer跟Inkscape之後，我們就可以來準備製作手寫文字的向量圖了。
手寫文字的點陣圖 / Scan a Hand Lettered Sketch
我先在白紙上寫了個手寫文字「布丁」。字很醜，請大家見諒。
手寫文字大概要多大呢？其實不要小到糊在一起，能夠區別線條差異即可。我拿了一個1元硬幣作為對照，可以大概感覺一下我這兩個字有多小。
接著我們用掃描機來掃描紙張上的手寫文字，再把文字之外的區域裁掉，只剩下文字的部分。
讓我們用這張圖片作為練習題目，讓大家做做看吧：
- 下載圖片：手寫文字「布丁」掃描稿
接下來要開始正式的處理囉。
STEP 1. 修正掃描圖片 / Adjust Scanned Image
上面的手寫文字圖片乍看之下好像沒有什麼問題，但若仔細看看掃描的手寫文字，會發現線條顏色不夠深、旁邊還有一點點雜訊。我們接下來要用XnViewMP的調整亮度和對比來解決這個問題。
讓我們用XnViewMP開啟這張圖片，進入單一圖片的檢視模式。接下來開啟「圖片 > 調整 > 增豔色彩」。
在「增豔色彩」視窗裡面可以看到「亮度」跟「對比」。先將「亮度」調到負數，讓整個圖片變暗。然後再將「對比」調到50以上，讓背景的灰色變成白色。這時候圖片上的雜訊會一併消失，然後線條的顏色也會比較深。
調整完的圖片如上圖。跟原圖比起來，似乎清楚了一點。不過它終究是點陣圖，放大後看起來還是會模糊。接下來就讓我們換個工具，讓點陣圖轉換成向量圖吧。
STEP 2. 將點陣圖轉換成向量圖 / Convert scanned image to SVG format
接下來打開Image Vectorizer網頁吧：
- Image Vectorizer: https://www.vectorizer.io/
按下「Upload Images」，然後選擇手寫文字圖片上傳。
上傳圖片的預設值是用彩色來分析向量圖，但我們的手寫文字只有灰階，甚至最好是黑白，所以我們要調整一下圖片的設定。來將左下角的「Max Colors」設定為「2 (Black & White)」，待Image Vectorizer重新處理後，再按右邊的「Download」下載SVG圖片。
這樣就可以取得一個SVG向量圖檔。但是這個SVG檔案還需要調整一下，讓我們進入下一步。
STEP 3. 修正SVG向量圖 / Fix SVG
接下來用Inkscape開啟剛剛下載的SVG。
這個SVG裡面包含了兩個圖層，上層是中間有鏤空的白色遮罩，中間鏤空的部分就是文字線條。下層是黑色的色塊。我們要將上層白色遮罩和下層黑色色塊各別進行「解除群組」(Ungroup)、「合併」(Combine)的操作，將它們各自轉換成物件，然後再將兩個物件進行「差異化」(Difference)合併，就能夠將白色遮罩中間鏤空的部分變成黑色的路徑圖形。這些操作有點複雜，讓我們一步一步做做看吧。
1. 合併白色遮罩 / Combine white mask
首先我們先點選白色的部分，這樣就會選取上層的白色遮罩。
因為白色遮罩實際上是由很多小的物件組成一個群組，所以我們要先讓它解除群組。從工具列開啟「Object > Ungroup」，這樣白色遮罩就會解除群組。
再來我們要將許多小物件合併在成一個物件。從工具列開啟「Path > Combine」執行合併動作，這樣白色遮罩就會變成一個物件。
這樣白色遮罩的部分就處理完了，接下來我們要換處理黑色色塊。因為黑色色塊位於白色遮罩的下方，我們得先把白色遮罩往下層挪。請按下工具列的「Object > Lower to bottom」，這樣就能顯示黑色色塊。
黑色色塊就會顯示出來，這樣就能進入下一步。
2. 合併黑色色塊 / Combine black block
黑色色塊的操作跟白色遮罩一樣。我們一樣先選取黑色色塊。
選擇工具列的「Object > Ungroup」，解除群組。
再來選擇工具列的「Path > Combine」，將黑色色塊的很多小物件合併成一個。
再把黑色色塊移至最下層，請按下工具列的「Object > Lower to bottom」，將黑色色塊移至白色遮罩之後，這樣就能看到白色遮罩。
好，現在我們可以看到上層的白色遮罩跟下層的黑色色塊。乍看之下好像跟一開始的狀態沒啥不同，但現在白色遮罩跟黑色色塊都是一個獨立的物件，這樣就能進行物件跟物件之間的操作。
3. 差異化 / Difference
接下來我們要用「差異化」功能來合併這兩個物件。
首先我們要選取這兩個物件，請用滑鼠左鍵拖曳選取範圍，包住這兩個物件。
再來我們要將這兩個物件進行「差異化」合併。從工具列選擇「Path > Difference」。
你會發現選取範圍只剩下中間的文字。差異化就是將兩個不同的物件進行相減，保留最後結果的合併處理。
4. 調整頁面大小 / Change page size
接下來我們要把旁邊空白的部分移除，讓圖片只留下中間選取的部分。
從工具列進入「File > Document Properties」。
在Document Properties對話視窗裡面，找到Page Size > Custom size中的「Resize page to comtent...」的元件，點下去開啟它。
按下「Resize page to drawing or selection」按鈕，然後關閉對話視窗。
你會發現頁面已經調整為中間文字的部分，其他多餘的空白處都被移除了。
5. 另存新檔 / Save as new SVG file
接下來我們要將處理好的檔案另外存成一個新的SVG檔案。
從工具列「File > Save As ...」，進入另存新檔。
然後為檔案命一個新的名字，儲存它。
這樣就完成囉。完成檔案如下，大家可以下載來看看：
- 手寫文字向量圖：布丁 4. 完成.svg
比較掃描圖片和向量圖 / Difference between scanned image and SVG
最後讓我們來比較看看一開始的圖片檔案跟向量圖之間有什麼差別吧。現在我們可以把這兩種圖片拉到Google Chrome瀏覽器裡面開啟，然後用Ctrl + 滑鼠滾輪來放大圖片看看。
這是原始掃描圖檔放大後的結果，可以看到整個線條變得非常模糊，不太美觀。
接下來讓我們看看SVG向量圖的放大檢視。可以看到向量圖放大後依然清晰可見，這樣子就算放大後印在海報上也會看起來很漂亮的喔。
小結 / In closing
這篇介紹了如何將手寫文字掃描點陣圖檔轉換成SVG向量圖。有了向量圖之後就能夠做很多應用，像是放大後用於海報、衣服等印刷品上。如果要在Office Word或是Google文件中使用SVG向量圖，或是要將SVG向量圖轉換成高解析度的PNG點陣圖，可以參考「向量圖片之間的轉換與用法」這篇的說明。
這篇不使用以前介紹的VectorMagic，而是選用另一個免費的線上服務Image Vectorizer。雖然兩者的運作原理類似，但最後產生的SVG圖片檔並不相同。Image Vectorizer免費、介面簡單好用，但是SVG檔案需要再用Inkscape修正。VectorMagic只能有限度的免費，但最後產生的SVG檔案似乎比較不用做太多處理。
為了將Image Vectorizer產生的SVG圖檔留下只有線條的部分，這個操作可是花了我一番功夫才搞懂，於是就用這一篇來記錄整個作法。向量圖片實在是很深奧啊。
那麼這次介紹如何將手寫文字轉換成向量圖就到這裡了。你用過向量圖嗎？你以前都是如何將點陣圖轉換成向量圖呢？你是否還有其他方法可以跟我們分享呢？歡迎在下面的留言處跟我們分享你的想法。如果你覺得我這篇教學寫的不錯的話，請幫我在AddThis分享工具按讚、將這篇分享到Facebook等社群媒體吧！感謝你的耐心閱讀，讓我們下一篇見。
