在第七、第八期的教程中，我們已經(jīng)學(xué)習(xí)了如何熟練運(yùn)用Sketch來繪制一枚圖標(biāo)，但是作為交互設(shè)計(jì)師（伸手黨），怎么能自己動(dòng)手畫圖呢？并且在概念設(shè)計(jì)的階段，把時(shí)間花費(fèi)在繪制圖標(biāo)上，顯然時(shí)間分配不合理。所以，本篇教程將講解如何使用Sketch對(duì)SVG的支持特性和第三方插件，快速完成圖標(biāo)的盜用繪制。

注：玩轉(zhuǎn)Sketch系列教程適用于Sketch44或者更高級(jí)的版本。

1.SVG圖形介紹

使用截圖、下載等方式將第三方網(wǎng)站圖標(biāo)以圖像的格式粘貼到Sketch中，以達(dá)到圖標(biāo)的引用，可能是大多數(shù)人的想法，但是這種方式不支持在Sketch中進(jìn)行二次編輯操作，浪費(fèi)Sketch對(duì)SVG的支持特性。要說清楚這個(gè)支持特性之前，我們首先要對(duì)SVG圖形有一定的了解。

SVG是什么？SVG是一種可縮放矢量圖形（英語(yǔ)：Scalable Vector Graphics，SVG）是基于可擴(kuò)展標(biāo)記語(yǔ)言（XML），用于描述二維矢量圖形的圖形格式。SVG由W3C制定，是一個(gè)開放標(biāo)準(zhǔn)。——騰訊ISUX《為什么要用SVG？》

看不懂？沒關(guān)系，簡(jiǎ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的特性后，我們只需要一個(gè)第三方圖標(biāo)來源網(wǎng)站了，推薦使用阿里的iconfont，圖標(biāo)的種類齊全，支持直接下載SVG、AI、PNG三種格式圖形。

導(dǎo)入Sketch之后，就可以對(duì)圖標(biāo)進(jìn)行編輯操作了，十分簡(jiǎn)單。另外，順便需要說明的是，Sketch同樣支持SVG圖片導(dǎo)出，修改后的素材也可以保存為SVG圖片，方便再次編輯修改。

3.使用Sketch插件導(dǎo)入SVG圖形

在《第一期教程初識(shí)Sketch》中，我們就知道Sketch支持第三方插件，其中當(dāng)然也包括圖標(biāo)類插件。推薦下載微信團(tuán)隊(duì)出品的WeSketch插件，它除了內(nèi)置圖標(biāo)庫(kù)之外，還支持其他的一些連線、標(biāo)記功能，插件庫(kù)使用方法如下：

（1）下載WeSketch插件

官方下載地址：https://github.com/weixin/WeSketch

（2）安裝Sketch插件

安裝的方式比較簡(jiǎn)單，找到WeSketch.sketchplugin文件，雙擊即可完成安裝。

（3）使用Sketch插件

在菜單中，找到“Plugins（插件）”-“WeSketch”-“Icon Manager”即可。

點(diǎn)擊“Icon Manager”后，即可看到圖標(biāo)的選擇彈框，從中選擇我們想要的圖標(biāo)，點(diǎn)擊圖標(biāo)即可完成插入操作。

（4）WeSketch語(yǔ)言切換

很多童鞋可能對(duì)純英文的工具軟件比較抗拒，WeSketch插件考慮到了這一點(diǎn)，支持語(yǔ)言切換為簡(jiǎn)體中文。具體設(shè)置路徑為“Plugins（插件）”-“WeSketch”-“Setting”，在彈出的設(shè)置框中設(shè)置為簡(jiǎn)體中文即可。