在第七、第八期的教程中，我们已经学习了如何熟练运用Sketch来绘制一枚图标，但是作为交互设计师（伸手党），怎么能自己动手画图呢？并且在概念设计的阶段，把时间花费在绘制图标上，显然时间分配不合理。所以，本篇教程将讲解如何使用Sketch对SVG的支持特性和第三方插件，快速完成图标的盗用绘制。

注：玩转Sketch系列教程适用于Sketch44或者更高级的版本。

1.SVG图形介绍

使用截图、下载等方式将第三方网站图标以图像的格式粘贴到Sketch中，以达到图标的引用，可能是大多数人的想法，但是这种方式不支持在Sketch中进行二次编辑操作，浪费Sketch对SVG的支持特性。要说清楚这个支持特性之前，我们首先要对SVG图形有一定的了解。

SVG是什么？SVG是一种可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。——腾讯ISUX《为什么要用SVG？》

看不懂？没关系，简单来说，SVG是一种图形的格式，和我们日常接触的JPG/PNG等图形格式没有区别，但是它的质量很小，1024*1024px的图标仅有3kb，而且它是矢量的图形，可以支持编辑修改。在Sketch中，我们导入SVG图形后，可以进行颜色调整、大小变化、形状改变等操作。

2.从第三方网站导入SVG图形

介绍完SVG的特性后，我们只需要一个第三方图标来源网站了，推荐使用阿里的iconfont，图标的种类齐全，支持直接下载SVG、AI、PNG三种格式图形。

导入Sketch之后，就可以对图标进行编辑操作了，十分简单。另外，顺便需要说明的是，Sketch同样支持SVG图片导出，修改后的素材也可以保存为SVG图片，方便再次编辑修改。

3.使用Sketch插件导入SVG图形

在《第一期教程初识Sketch》中，我们就知道Sketch支持第三方插件，其中当然也包括图标类插件。推荐下载微信团队出品的WeSketch插件，它除了内置图标库之外，还支持其他的一些连线、标记功能，插件库使用方法如下：

（1）下载WeSketch插件

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

（2）安装Sketch插件

安装的方式比较简单，找到WeSketch.sketchplugin文件，双击即可完成安装。

（3）使用Sketch插件

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

点击“Icon Manager”后，即可看到图标的选择弹框，从中选择我们想要的图标，点击图标即可完成插入操作。

（4）WeSketch语言切换

很多童鞋可能对纯英文的工具软件比较抗拒，WeSketch插件考虑到了这一点，支持语言切换为简体中文。具体设置路径为“Plugins（插件）”-“WeSketch”-“Setting”，在弹出的设置框中设置为简体中文即可。