设计师使用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下则直接是一个图片错误示意。

D.对象ID

这个就跟前面内嵌CSS，还是内部CSS有很大关系了。鉴于选项清晰，我们也不推荐使用内部CSS方式，就不赘述了。

E.小数

不废话了，默认 3，保平安，即保留小数点后三位 ，一般不会有太大的问题。

如果SVG图的体积格外大，可以按需将小数点降到2或者1，但是这回导致导出SVG与源文件的定位吻合度降低，一些Path的图形可能发生形变，请大家按需选择。

F.缩小和响应

缩小：压缩SVG代码，删除不必要的空格，来减小SVG图片体积。因为我们的Maxim工具上传时自动会做一次这样的压缩，所以在日常导出时不需要依靠AI的简易压缩了。但是其他业务的设计师同学，可以按需选择。

响应：如下图差别，勾选响应的SVG图形会被赋予width=“100%”,height=“100%” 的属性，图片内容将根据外框大小进行自动缩放。在腾讯云的日常业务中，我们建议保持固定大小。其他业务的设计师同学，可以按需选择。

Tips

A. 来自 不留名同学  的实践经验补充：

“在新版的AI 2018输出svg图标的时候，新增了通过另存为就可以导出SVG的方式，SVG的设置不会自动保存上次勾选的设置，每次都会回退成系统默认设置。”

所以推荐大家依旧使用导出的方法进行批量SVG的存储：

B. 来自 不留名同学  的实践经验补充：

使用画板导出的时候，设置在比较隐蔽的位置，大家注意：

当然，以上这些方式都是针对AI导出SVG的设置考虑的。若是新建画板的Sketch导出SVG，不支持设置这些选项。若按它默认的导出格式，在腾讯云目前的业务中使用是很合适的，是基本满足下图的黄金答案的。其他业务请按需选择。

最后的最后，不管你是不是个好学生，请把下图的黄金答案背下来，它将助你继续在SVG高清大道上幸福奔跑。