在第七、第八期的教程中，我們已經(jīng)學(xué)習(xí)了如何熟練運用Sketch來繪制一枚圖標(biāo)，但是作為交互設(shè)計師（伸手黨），怎么能自己動手畫圖呢？并且在概念設(shè)計的階段，把時間花費在繪制圖標(biāo)上，顯然時間分配不合理。所以，本篇教程將講解如何使用Sketch對SVG的支持特性和第三方插件，快速完成圖標(biāo)的
盜用繪制。注：玩轉(zhuǎn)Sketch系列教程適用于Sketch44或者更高級的版本。
1.SVG圖形介紹
使用截圖、下載等方式將第三方網(wǎng)站圖標(biāo)以圖像的格式粘貼到Sketch中，以達(dá)到圖標(biāo)的引用，可能是大多數(shù)人的想法，但是這種方式不支持在Sketch中進(jìn)行二次編輯操作，浪費Sketch對SVG的支持特性。要說清楚這個支持特性之前，我們首先要對SVG圖形有一定的了解。
SVG是什么？SVG是一種可縮放矢量圖形（英語：Scalable Vector Graphics，SVG）是基于可擴展標(biāo)記語言（XML），用于描述二維矢量圖形的圖形格式。SVG由W3C制定，是一個開放標(biāo)準(zhǔn)。——騰訊ISUX《為什么要用SVG？》
看不懂？沒關(guān)系，簡單來說，SVG是一種圖形的格式，和我們?nèi)粘＝佑|的JPG/PNG等圖形格式?jīng)]有區(qū)別，但是它的質(zhì)量很小，1024*1024px的圖標(biāo)僅有3kb，而且它是矢量的圖形，可以支持編輯修改。在Sketch中，我們導(dǎo)入SVG圖形后，可以進(jìn)行顏色調(diào)整、大小變化、形狀改變等操作。
2.從第三方網(wǎng)站導(dǎo)入SVG圖形
介紹完SVG的特性后，我們只需要一個第三方圖標(biāo)來源網(wǎng)站了，推薦使用阿里的iconfont，圖標(biāo)的種類齊全，支持直接下載SVG、AI、PNG三種格式圖形。
導(dǎo)入Sketch之后，就可以對圖標(biāo)進(jìn)行編輯操作了，十分簡單。另外，順便需要說明的是，Sketch同樣支持SVG圖片導(dǎo)出，修改后的素材也可以保存為SVG圖片，方便再次編輯修改。
3.使用Sketch插件導(dǎo)入SVG圖形
在《第一期教程初識Sketch》中，我們就知道Sketch支持第三方插件，其中當(dāng)然也包括圖標(biāo)類插件。推薦下載微信團隊出品的WeSketch插件，它除了內(nèi)置圖標(biāo)庫之外，還支持其他的一些連線、標(biāo)記功能，插件庫使用方法如下：
（1）下載WeSketch插件
官方下載地址：https://github.com/weixin/WeSketch
（2）安裝Sketch插件
安裝的方式比較簡單，找到WeSketch.sketchplugin文件，雙擊即可完成安裝。
（3）使用Sketch插件
在菜單中，找到“Plugins（插件）”-“WeSketch”-“Icon Manager”即可。
點擊“Icon Manager”后，即可看到圖標(biāo)的選擇彈框，從中選擇我們想要的圖標(biāo)，點擊圖標(biāo)即可完成插入操作。
（4）WeSketch語言切換
很多童鞋可能對純英文的工具軟件比較抗拒，WeSketch插件考慮到了這一點，支持語言切換為簡體中文。具體設(shè)置路徑為“Plugins（插件）”-“WeSketch”-“Setting”，在彈出的設(shè)置框中設(shè)置為簡體中文即可。
