设计师使用SVG的必读文章

导语-“本文适合设计师浅读，适合有追求的设计师和UI开发同学仔细研读“

近来腾讯云业务已经全面拥抱高清高质的SVG，幸福奔跑在全量高清的康庄大道上。

设计师主要是利用AI，和Sketch进行SVGicon，SVG拓扑图的绘制。

但是，单纯依靠软件一键导出的SVG图形，会因为每位设计师的绘制导出方法不同，在实际使用中出现或多或少的应用问题。从无数的坑里摔倒又爬起，身经百战的我们今天来此来探讨一下，绘制一个供Web使用的SVG图形有哪些必备的注意点，以下我们以一个SVG icon为例：

首先，针对图标，我们需要“建立复合路径”

那么什么是复合路径呢？框选你的SVG元素，右键打开菜单，会出现 “建立复合路径” 的选项。

视觉设计师们使用复合路径，一般是为了处理下图的情况。通过路径复合，让白色菱形方块可以镂空。但是，很大部分的SVGicon，是不需要处理镂空的，这种情况下，大家是否依旧继续“建立复合路径”这个选项，就是个迷了....

但是，“建立复合路径” 对一个优秀的SVGicon的编写，是很重要的！我们来看下图的2段SVG代码的对比，很明显，使用了复合路径的SVG在相比之下，把所有图标内容都绘制在一个<Path>里了，即缩减了SVG的文件大小，同时，一个icon对应一个唯一路径的结构，大大提升了脚本操作的便利性

再次，Sketch导出不要利用"小画板"

Sketch，Ai 都提供了一个直接在页面中层叠画板，再“按画板导出”SVG图形的功能，面对要“导出大型拓扑图的多个SVGicon”这类需求，直接绘制小画板是很方便的一种方式。

但是，如果通过Sketch操作以上步骤，生成的SVG代码与一个健康SVG代码对比，是下图这样的：重点差别为：外框多了<g transform="122" >这样的重置样式。（transform的意思是指位移，向x位移122px，向y位移122px的意思）。

这就是小画板重叠大画板导致的问题了。因为绘制icon的polygon元素的具体定位，是根据大画板的顶点x,y进行定位的；所以这中间的差值，需要依靠外框的transfom位移回去。

这样导出的代码冗余太多，内部icon的绘制定位也需要依靠外部位移才能正确显示，是不健康的。故，在Sketch中请勿使用小画板导出SVG元素，而AI是可以放心使用的，当然最安全的方式，还是新建一个文件，独立进行icon导出。

最后，敲黑板的导出设置！

你也许觉得上面2个提示比较小众，那么敲黑板的必读环节来了。

在图标导出的设置界面，是设计师们最容易迷茫或出错的部分，首先，这里贴一下最适用于腾讯云业务的SVG选项：

（如果你没空做个好学生，把上图的黄金答案背下来，也是不需要再看后面的习题分析了）

我们再来看看各个选项的真实含义是什么。

A.样式

很多设计师会习惯性选择内部CSS的选项（毕竟是默认），这会带来很多隐患。

如下图所示，左侧是使用“内部css”的代码，右侧是使用“内联样式”的代码。它们的差别在于CSS编写的位置。在单个SVG的时候，2种方式都是健康的，可是如果业务中使用了SVG雪碧图，那图1就存在大大的隐患。

" .a "," .b "的类名，是AI通过默认或用户自定的图层名称添加的，大量SVGicon以雪碧图的形式集合在一起，这些style就被打包在一起了。同类名的样式就必然会发生互相污染；这类污染体现在IE9等低版本浏览器对SVG的读取上。故，针对需要SVG雪碧图合并的业务，选择内联样式的导出方式，更为安全健康。

腾讯云业务就曾经在此处踩过坑，在IE9浏览器上使用SVG雪碧图，会出现大量的颜色尺寸错误，其原因就是有个别icon，在导出的时候，使用了内部CSS的方式。

B.字体

使用 “ 转换为轮廓 ” 或 “ SVG ” 选项，导出的代码差别是什么呢？

很好理解，这是1个保留文字为Text的SVG，和将文字转为路径的SVG的对比。这里，大家就要按需选择了。如果选择维持TEXT版本，我们看到，样式里存了字体的属性，也就是说，如果用户的电脑没有PingFang这个默认字体，是会选择系统的默认字体进行替换的。设计师要考虑是否可以接受这种字体的变化 。当然，全部轮廓的SVG文本，是不能再HTML结构里被SEO找到的，后期维护性也非常低。

C.图像

在SVG导出里，图像是一个巨坑。

首先，嵌入和保留的效果基本是一样的，而嵌入和链接的差别，主要在于：一个是将图标转换为Base64的形式存储，一个是href引用。狭义的理解用链接的方式导出，就是让 “ SVG作为一张图片，引用了一张图片 ”，听起来，就不是个小坑。

很多设计师常迷茫的问题：“ 为什么我导出的SVG图片好好的，但是被UI开发同学引用的时候，就出错了呢？”

其实，这是因为，单独在浏览器中查看这个SVG，嵌入或是链接的方式都没有问题；但如果使用<img>标签来引用这个SVG，浏览器中的 img 是不允许加载外部资源的，也就是我们说的，“一个图片，咋还能还引用了一张图片呢 ”。也就是说，上图 “云服务器” 的例子，在Web kit内核下的浏览器，用作阴影的位图图像不会显示，而IE下则直接是一个图片错误示意。