當(dāng)我們做好一些圖標準備導(dǎo)出成 SVG 文件時都要輪廓化描邊，但是草率地輪廓化描邊經(jīng)常會產(chǎn)生多余的錨點，25學(xué)堂從別的地方搬來一些方法，或許可以幫助您導(dǎo)出更「干凈」的 SVG 圖形。

何為「不太干凈」的 SVG 圖形？

「不太干凈」的 SVG 圖形。

這兩個圖標在一開始設(shè)計的時候都是用 2 像素的描邊進行設(shè)計，在輪廓化描邊以及合并形狀之后產(chǎn)生了許多多余的錨點。

如果用 AI 自帶的簡化（對象-路徑-簡化）工具，會改變圖標原來的形狀。

使用 AI 自帶的簡化工具會改變原有的形狀。（頂層的黃色是使用簡化工具之后的效果）

下面分享兩個技巧，幫助設(shè)計師導(dǎo)出「干凈」的 SVG 圖標。

技巧一：將圖形擺正

如果我們的圖標在創(chuàng)作過程中調(diào)整了形狀的角度，在輪廓化描邊之前請把形狀轉(zhuǎn)正，輪廓化描邊之后再還原。如下圖：

請注意大多數(shù)情況下都要手動定一個原點再旋轉(zhuǎn)，不能用 AI 默認的中心點，因為中心點會隨著形狀的旋轉(zhuǎn)而變化，導(dǎo)致無法回到原來的位置。

技巧二：減少重疊的路徑

通常圖標都是用各種基礎(chǔ)形狀之間的布爾運算制作出來的，在輪廓化描邊之前請注意減少相互重疊的路徑，如下圖：

檢查您的圖標是否有過多的重疊路徑

我們要做的就是選刪掉這些重疊的部分，再輪廓化描邊就好了。

因為重疊的曲線路徑（尤其是曲線路徑），不刪除直接輪廓化描邊的話會出現(xiàn)很多不必要的錨點。

如果您設(shè)計的路徑端點是圓頭端點或者方頭端點，請在錨點與路徑的交接處也要處理！

圓頭端點

如果用 AI 自帶的吸附效果，把錨點跟路徑并在一塊的時候直接輪廓化錨邊很容易會多幾個不必要的錨點，所以我們還要再處理一下。

第一個方法是把鍵盤增量調(diào)低一點（大概0.5 px）手動把每個錨點向路徑遠離一個鍵盤增量；

用鍵盤增量來解決，適合水平、垂直或是45°旋轉(zhuǎn)的路徑

第二個方法是把輪廓化錨邊之后不急著合并，而是把端點位置的錨點往里面縮一點（圓頭端點可以使用「刪除錨點工具」，方頭端點只能直接拖動錨點）

刪除某些比較突出的錨點，適合圓頭端點的路徑

可以看到其實這樣做的目的是也是減少重疊的路徑，讓一個輪廓不受其他小路徑的影響。

清理前后對比明顯

最后

想要導(dǎo)出更「干凈」的 SVG 圖標并不難，只是比較繁瑣，而且很枯燥。其實如果平常使用在 APP 設(shè)計、網(wǎng)頁、BANNER 之類的場景，就算錨點有一點偏差也沒關(guān)系，因為圖案太小了，上看不出來細微的偏差。但是如果想讓作品更規(guī)整、規(guī)范就要把每一處細節(jié)處理好。