時(shí)隔一年，日常使用時(shí)還是碰到了新坑，需要再重新整理一下問(wèn)題及解決方法，自取所需

1、圖標(biāo)導(dǎo)出后路徑錯(cuò)誤/重疊/缺失 

2、圖標(biāo)畫(huà)的時(shí)候尺寸明明一樣，開(kāi)發(fā)拿去就大小不一，排不整齊

3、關(guān)于批量處理的問(wèn)題

4、關(guān)于壓縮優(yōu)化文件體積的問(wèn)題

1、sketch里畫(huà)的圖標(biāo)導(dǎo)出后路徑錯(cuò)誤/重疊/缺失 解決方法

sketch直接導(dǎo)出的svg有大約幾百分之一的概率無(wú)法正常顯示，尤其是一個(gè)面中間布爾挖掉一塊的這種路徑容易重復(fù)，或者布爾的方式發(fā)生錯(cuò)誤，相交變成相減之類(lèi)的，需要導(dǎo)入到AI軟件中重新整理路徑，獲得最精簡(jiǎn)的路徑之后再導(dǎo)出。具體步驟可以查看分割線(xiàn)以下之前寫(xiě)過(guò)的步驟，不贅述。

2、圖標(biāo)畫(huà)的時(shí)候尺寸明明一樣，開(kāi)發(fā)拿去就大小不一，排不整齊 解決方法

   以上圖為例，不同圖標(biāo)的畫(huà)板尺寸一致，但是負(fù)空間大小不一致，直接導(dǎo)出的時(shí)候就會(huì)變成這樣子

這樣在前端小伙伴使用的時(shí)候，很難調(diào)整尺寸，非常需要設(shè)計(jì)師在導(dǎo)出時(shí)就把負(fù)空間的大小確定下來(lái)，才能獲得理想的開(kāi)發(fā)結(jié)果，解決方法如下：

a、在固定尺寸的畫(huà)板中制作圖標(biāo)，導(dǎo)出時(shí)選中整個(gè)畫(huà)板導(dǎo)出，畫(huà)板尺寸保持一致，就可以獲得一致的尺寸

直接選中整個(gè)畫(huà)板導(dǎo)出，負(fù)空間的尺寸就被固定下來(lái)了

b、如果不是在單獨(dú)的畫(huà)板中制作的圖標(biāo)呢？可以放入AI中調(diào)整畫(huà)板尺寸后導(dǎo)出

選中畫(huà)板設(shè)置

彈窗中選中編輯畫(huà)板

將寬高設(shè)定好之后保存

3、關(guān)于批量處理的問(wèn)題 

評(píng)論中有提到如何批量處理，很可惜AI自帶的批處理命令里沒(méi)法把調(diào)整畫(huà)板尺寸的操作錄進(jìn)去，改格式倒是可以，但僅限于一般按照功能或含義命名的圖標(biāo)。按照這種目錄樹(shù)規(guī)范命名的方式，導(dǎo)出的存儲(chǔ)路徑是每個(gè)圖標(biāo)不同的，批處理也沒(méi)法處理，會(huì)讓保存路徑亂掉，還是只能手工一個(gè)一個(gè)的改和存。

4、關(guān)于壓縮優(yōu)化文件體積的問(wèn)題

原文中推薦的svgomg網(wǎng)站最近打不開(kāi)了，推薦另一個(gè)也是把svgo服務(wù)封裝的國(guó)產(chǎn)小工具，一樣好用

https://www.zhangxinxu.com/sp/svgo/

如有任何版權(quán)問(wèn)題請(qǐng)聯(lián)系我刪掉

--------------------------------------------------------------更新分界線(xiàn)------------------------------------------------------------------------

對(duì)SVG格式支持的最好的軟件還是AI，但是有時(shí)候圖方便就在Sketch里面把圖標(biāo)畫(huà)了，省的在兩個(gè)軟件中間轉(zhuǎn)來(lái)轉(zhuǎn)去。

結(jié)果要切圖交付準(zhǔn)備美滋滋下班的時(shí)候，開(kāi)發(fā)大哥說(shuō)你的圖有問(wèn)題。Excuse me？都這個(gè)點(diǎn)了哪有時(shí)間再去AI里重新畫(huà)一遍？？沒(méi)事，哪里進(jìn)坑的我們從哪里爬出來(lái)，下面分享并記錄下解決方法。

假如我們?cè)赟ketch里面畫(huà)了這樣一個(gè)笑臉

直接用導(dǎo)出功能出來(lái)之后，在瀏覽器里面變成了一個(gè)黑臉（我也想黑臉）

這時(shí)候?yàn)g覽器里查看代碼看一下

額，好長(zhǎng)，而且不知道是什么。請(qǐng)教了開(kāi)發(fā)之后我們嘗試看看里面都出了什么問(wèn)題

path是路徑的意思，做設(shè)計(jì)的都知道路徑是有很多個(gè)錨點(diǎn)連在一起組成的，path后面那么多數(shù)字就是錨點(diǎn)的坐標(biāo)。復(fù)雜的圖形錨點(diǎn)就多了，但是我們這個(gè)笑臉很簡(jiǎn)單，后面應(yīng)該有優(yōu)化的空間。關(guān)鍵是，我們的笑臉只有一個(gè)面，不應(yīng)該出現(xiàn)兩個(gè)path，這就是黑臉的原因了，原來(lái)是眼睛嘴巴的位置填充了多余的一個(gè)路徑。非常遺憾Sketch解決不了這個(gè)問(wèn)題，只能AI上了

AI打開(kāi)~直接將這個(gè)SVG導(dǎo)入到AI中，圖層面板里就可以找到這些多余的東西，去掉顯然不會(huì)影響圖案，放心大膽的刪

刪掉之后用保存為，選擇SVG格式，這里需要選擇SVG Tiny1.1，否則safari瀏覽器會(huì)有不兼容的問(wèn)題

再看代碼，path已經(jīng)只剩一個(gè)，錨點(diǎn)坐標(biāo)也瘦身了很多

現(xiàn)在關(guān)鍵問(wèn)題已經(jīng)解決，就是有點(diǎn)兒強(qiáng)迫癥啊，發(fā)現(xiàn)了一個(gè)進(jìn)一步優(yōu)化SVG體積的好工具SVGOMG，墻裂安利一下

界面超級(jí)簡(jiǎn)單，里面的設(shè)置用默認(rèn)的就行

拖拽進(jìn)去下載出來(lái)，相比最開(kāi)始瘦了6倍，雖然幾個(gè)k看起來(lái)不多，積少成多也是很可觀了

對(duì)比下看看，我也終于感受到代碼少了的那種爽哈哈

啰嗦一句，直接把顯示有問(wèn)題的SVG拿去SVGOMG瘦身是不行的哈，多余的path還是得在AI里刪掉。今天的分享就是這樣，謝謝大家，點(diǎn)贊的小主貌美如花，帥到銀河對(duì)岸