最近接触到一个项目，用户的跳出率非常的高，最后分析得出是因为页面加载的时间过长，整个页面的加载时间在10秒左右。他们向我咨询了一些优化建议，因为他们整个网站有大量的SVG格式的图片，而且有大量的SVG动画效果。我向他们的团队提了一些SVG优化的建议，比如如何减少SVG的体积等方法，最终优化效果不错，使整个页面的加载时间在2秒左右。而且用户跳出率也减少了很多。
当然，如果我自己来设计SVG的时候，一般不会出现上面这样的问题。但是在一个大的团队里面，开发工程师和设计师常常不是同一个人，这样很容易就出现上面所说的问题。所以在这篇文章中，我会把我自己在设计SVG的时候的一些优化手段整理出来，希望能给大家带来一些帮助。
我主要是使用Adobe Illustrator来做SVG的优化导出工作，因为它在导出和优化SVG方面确实比Sketch做的要好。所以下面所说的优化都是使用Adobe Illustrator来完成的。
开始优化之前
在开始一个项目前，无论如何，都要和设计师进行一个沟通，来使他们了解在设计和导出SVG的时候要注意的一些事情。
一般设计师的习惯是在正式开始设计之前，会在纸上先画好线稿，然后在使用设计工具比如Adobe Illustrator依照线稿设计好图形，这样有一个不好的地方是会产生大量冗余的节点。所以，在实际设计的时候，还是建议使用简单的形状和钢笔工具来设计图形。如果使用很多的复杂图形来设计，那么最终导出来的图形的尺寸也会非常大，所以尽可能的使用少的控制点的路径来设计图形，性能就越好。
当然，这不是说你不能使用一些复杂的形状来设计。使用不同的优化手段，同样的一个相同外观图新可能包含数百个控制点或者是数千个控制点的路径组成，所以在设计的时候，一些必要优化还是必要的。下面来说说使用Adobe Illustrator设计的时候，一些需要注意的点。
减少路径的控制点
如果你的图形有很多的控制点，这个时候你应该考虑要优化下了。在Adobe Illustrator中很容易就可以来优化控制点，你应该使用Illustrator菜单栏上的 对象 > 路径 > 简化 选项来减少图形中的控制点。
当然这里实际要减少的数值要根据你的图形来确定，这里要注意一点的是，减少的数值尽量控制在91%左右，太少的话可能会破坏图形原有的形状。
这是一个优化的快捷方法，当然，建议在设计的时候就要注意控制路径控制点的数量。
这种减少控制点的方法有时候确实能带来显著的优化效果，不过也要看具体所优化的形状。比如，像上图所示的这个复杂的形状，你可以重新使用不同的形状合并成一个形状，来模拟已经存在的形状来实现它，从而优化它的控制点。
这种优化方法，有时候看起来工作量会非常大，其实你可以先快速的使用钢笔工具快速的勾画出大致的形状。然后使用pathfinder工具把它们合并成一个形状。如果看起来和原本的形状不是很像，不要着急。你可以把它覆盖在原图形上，调整原图形的透明度，这样可以帮助你能更快的来模拟原图形来调整路径从而尽可能的还原原图形。
删除重复定义的渐变
在创建一些渐变的时候，像Adobe Illustrator和其它的矢量图形设计工具，在导出SVG的时候会将渐变全部定义在defs标签中。但是在有些时候，会出现重复定义相同渐变的情形，这个时候可以使用Jake Albaugh’s gradient optimizer这个工具，它会自动的把多个重复的渐变合并成只有用到的渐变，通过删除重复定义的渐变也能大大地减少文件的体积。
当然，如果你通过手动的方式来编写渐变就可以避免这种重复定义渐变的情形。下面来简单的说下在SVG中渐变的使用方法：
1、渐变是定义在linearGradient标签中，并且需要指定一个ID这样才可以应用到SVG图形中。
2、它使用 stop offsets来定义颜色的偏移量，使用stop-color来定义渐变的颜色。
<defs>
<linearGradient id="linear-gradient" y1="75" x2="150" y2="75" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff33b"/>
<stop offset=".5" stop-color="#f17b3e"/>
<stop offset="1" stop-color="#e93e3a"/>
</linearGradient>
</defs>
CSS：
.path-class { fill: url(#linear-gradient); }
减小画板的尺寸
在设计图形的时候，画板的尺寸要选择一个合适的尺寸。太大了也会增加路径的控制点；太小了，可能会在路径中增加很多不必要的小数点。你可以通过实践来确定一个合适的画板尺寸（我喜欢使用100 X 100的尺寸）。
在Adobe Illustrator中，要快速的改变一个画板的尺寸，你可以通过Illustrator菜单栏上的 对象 > 画板 > 适合图稿边界 来快速调整图形画板的尺寸。如果，你只是想微调下画板的尺寸，可以通过Illustrator菜单栏上的 文件 > 文档设置 > 编辑画板 来调整图形画板的尺寸，这个方法可以允许你任意调整画板的尺寸。
导出SVG，进一步优化
我喜欢使用Adobe Illustrator还有一个原因是，在导出SVG的时候，它比Sketch提供了更多的选项来设置SVG。如果你使用Adobe Illustrator，使用文件存储为 > SVG来导出SVG就可以对SVG进行一些优化，但是这还不够，你还可以选择下面的一些工具来优化SVG：
1、SVGOMG，这是一个在线的优化工具，提供了很多优化选项。
2、SVGO或者是SVGO-GUI，这是一个基于NodeJS的SVG优化工具。建议使用它的可视化版本即SVGO-GUI。
3、Peter Collingridge’s SVG Editor，我是它的粉丝，虽然这个工具不是很酷炫。
在优化SVG的时候，我会有一个检查清单：
1、清除ID，在使用工具优化SVG的时候，它可能会把你命好名的ID给删除。
2、合并无用的组，又时候，为了更好的组织代码或者是为了方便编写动画，会把一些代码编程组。
3、合并路径
4、格式化代码，当你需要在SVG中编写动画效果或者是其它操作时，你需要格式化下代码，而不是压缩代码。
当然，最后上线的时候，务必使用gzip的方式来压缩你的代码，可以极大的减小SVG的体积。
使用SVG滤镜代替默认的滤镜
设计师在实现一些特殊效果的时候，大部分是使用效果面板中的普通滤镜，比如模糊、阴影等，这样在导出为SVG代码的时候，会在代码中生存一大段的base64代码，其实在实现一些特殊效果的时候，完全可以使用SVG滤镜代替默认的滤镜，在效果 > SVG滤镜可以选择很多的SVG滤镜。要注意的是，只有当文件格式是.ai格式的时候，才可用，而不是SVG格式文件。所以在保存源文件的时候，一定要保存为ai格式的文件。通过使用SVG滤镜不仅仅是改变了图形的外观，而且大大地减少了文件的体积，从1.8MB到1.2KB。
总结
当然，上面说的这些方法，并不是使SVG获得更好性能唯一可以使用的一些方法，但是有一个是优化SVG必不可少的一步是，尽可能减少路径的控制点。当然，性能的优化最重要还是从实际出发，比如要仔细检查SVG文件的加载，并且要不停的优化它。
本文主要是从High Performance SVGs这篇文章整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！
