这类问题经常出现在网站图标、软件界面图标，还有产品页素材交付的时候，图标在Sketch里面看着一点问题都没有，可一旦导出成SVG格式，放到网页里、开发工具中，或者是其他设计软件里面，颜色就突然变成了黑色、灰色，甚至有一部分渐变干脆就消失了，处理这件事得分两步来看：要先把SVG导出这件事的流程给做规范了，然后再回过头去检查颜色的样式、透明度、蒙版，还有代码里引用它的方式。

　　一、Sketch怎么导出SVG图标

　　从Sketch里面导出SVG图标，最关键的地方，其实就是先把图层给整理干净，然后再去设置导出的格式，如果图层本身就不清不楚的，那后面导出来的SVG文件，就算勉强能打开，里面也容易多出来一堆没有用的分组、尺寸发生偏移，还有颜色也会变得不正常。

　　1、先把图标的画板给整理好

　　在打开Sketch文件以后，先把需要导出的那个图标给选中，最好把这个图标单独放进一个独立的画板里面去，画板的尺寸，要跟它实际被用到的时候，那个大小保持一致，就比如说十六乘十六、二十四乘二十四、三十二乘三十二这几种，图标的周围，不要留下那些不相关的文字、参考线，或者是被隐藏起来的图层，因为那些隐藏图层，有时候也会影响到交付时候的判断。

　　2、把那些无关紧要的分组给合并一下

　　如果图标的内部有好多层嵌套在一起的分组，那就先去确认一下，是不是每一层都真的有必要保留下来，可以把那些装饰用的线条、填充的色块、还有负责阴影的图层，都整理到几个清楚明了的组里面去，不要让一个图标的文件里混进去好几个不同的版本，图层的命名呢，也要尽量简单一点，这样也方便后面接手的人去检查SVG的结构。

　　3、去设置一下导出的格式

　　把画板或者图标的组给选中，在右侧的那个面板里，找到导出相关的区域，去添加一个导出项，然后把格式选成SVG，尺寸的话，通常保持一倍大小就可以了，除非这个图标有特别的适配要求，等这些都设置完了，就去执行导出选中项的操作。

　　4、检查一下导出来的文件

　　导出来以后，不要看都不看就直接交付出去了，可以先用浏览器、本地的预览工具，或者是代码编辑器，把那个SVG文件打开来看一看，重点要去看图标的尺寸、周围的边距、线条的粗细，还有颜色，这些东西是不是都一致的，如果发现图标的边缘被裁切掉了，那就要回到Sketch里面去调整一下画板的边距；要是发现周围留出来的空白区域大得离谱，那就得去检查一下画板的尺寸，还有对象它所处的位置了。

　　二、Sketch导出SVG后颜色为什么会丢失

　　Sketch把图标导出成SVG之后颜色会丢掉，比较常见的原因，倒不单纯是导出这个动作失败了，而是Sketch里面看到的那种视觉效果，并没有被SVG给完整地识别出来，又或者是SVG在进到了网页里面以后，它的颜色被别的地方定义的样式给覆盖掉了。

　　1、颜色用的是共享样式或者变量

　　有些图标的颜色，是从共享样式、符号的覆盖，或者是变量的设置那里来的，这种颜色在导出去了以后，换到外面的环境里，就有可能没办法再继续保持住原来的那种映射关系了，碰到这种情况，在导出之前，可以把那个图层重新选中，再确认一下它填充的颜色，把那些关键的颜色，改成直接去填充一个具体的色值，这样就能少一些对外部样式的依赖。

　　2、图层里面含有透明度和混合模式

　　Sketch里面的透明度、阴影、叠加、模糊，还有混合模式这些效果，到了SVG里面，并不一定都能被完完整整地还原出来，所以，在导出之前，需要去检查一下右侧面板里面的不透明度，还有混合模式的设置，如果图标是要用在网页上的，那就尽量去减少那种特别复杂的效果，把颜色都做成是很明确的填充和描边，这样会保险很多。

　　3、用到了蒙版或者裁切的效果

　　如果图标里面带着蒙版、裁切的路径，或者是有一些布尔运算还没有被展开，那么导成SVG之后，就有可能出现局部的颜色消失不见的情况，这个时候，可以先去复制一份图标出来，放在旁边当个备份，然后再对那些形状执行一下合并或者轮廓整理的布尔操作，让最后导出来的对象，能够更加接近它真实的路径形态，不过要注意，最好不要直接在原文件上去做那种很大动作的合并，免得后面再想改的时候，就不好下手了。

　　4、网页里的CSS把SVG的颜色给覆盖了

　　当SVG被放到网页里面以后，它的颜色，是有可能会被CSS里面的填充、描边，或者是当前文字颜色这一类规则给覆盖掉的，特别是那种图标的组件库里，经常会把所有的SVG都统一设置成跟着当前文字的颜色走，碰到了这种情况，就得让开发的同学去检查一下SVG它自己内部的代码，还有页面上定义的样式，去确认一下，最终显示出来的颜色，到底是来自SVG它自己本来的样子，还是被外部的样式给强行改掉了。

　　三、Sketch图标在交付前要怎么复查一遍

　　在把Sketch图标交付出去之前，要做一次复查，重点就是看一看那个SVG文件，是不是在设计的这一端，和开发的那一端，都能保持表现一致，光是在Sketch里面看着是没有问题了，可这不代表交付以后就真的不会有问题冒出来。

　　1、把填充和描边重新检查一遍

　　去挨个点一下图标里面的那些形状，确认一下它们的填充色和描边是不是都设置得很清楚，对于那些只需要填充的图标，就不要留下什么多余的描边；对于那些只需要描边的线性图标，就要把线宽和端点、拐角的样式都给统一起来。

　　2、把文字和特殊的对象也复查一下

　　在SVG格式的图标里面，是不太建议把还能直接编辑的文字给留在里面的，要是图标里面带着字母、数字，或者是一些符号，那可以在备份文件里面，先把那些文字给转成轮廓，然后再去导出成SVG，这么做，就能减少因为缺少字体而带来的那些显示上的差异了。

　　3、把尺寸和命名再复查一遍

　　在导出之前，去把图标的画板尺寸都统一一下，文件的名字也要起得足够清楚，比如像搜索、用户、下载这种能一眼看明白的英文名，最好不要用中文、空格，还有那种乱糟糟的编号来给文件起名，这样开发的同学在接手管理的时候，也会更容易一些。

　　4、去实际使用的环境里再复查一次

　　把做好的SVG文件，放到网页里或者是产品的页面上去看一看，这个效果，要比单独在那个预览工具里看，要可靠得多，重点去检查一下，在深色的背景上、浅色的背景上、按钮被鼠标悬停的状态下，还有被放大缩小了以后，这些不同的情况下，显示出来的样子是不是都正常，很多颜色上的问题，往往就是在这种真实的页面环境里面，才会暴露出来的。

　　总结

　　关于Sketch怎么去导出SVG图标，还有导出来以后颜色又为什么会丢掉，处理的先后顺序，应该是先动手把图层和画板给整理好，然后再按照SVG的格式去导出，最后，再去检查一遍颜色的来源，还有它被实际使用的那个环境，颜色的丢失，通常都跟共享的样式、透明度、蒙版、混合模式，还有CSS的覆盖脱不开关系，只要在导出之前，把填充、描边、尺寸，还有命名这些东西，都给整理得清清楚楚，那就能给后面省下很多反复返工的麻烦。