这篇技巧来讲讲SVG文件优化的问题。
当设计师要从设计软件中(这里是指Adobe Illustrator)导出SVG文件的时候,最好是在导出前能对图形进行一些优化,这样能大大减小导出后文件的体积。
主要是包括以下几个部分。
减少路径的控制点
如果你的图形是基于手绘或者是在路径中用到了很多的控制点,那么在输出SVG格式图形前,你应该使用Illustrator菜单栏上的 对象 > 路径 > 简化 选项来减少图形中的控制点,当然这里实际要减少的数值要根据你的图形来确定,这里要注意一点的是,减少的数值尽量控制在90%左右,太少的话可能会破坏图形原有的形状。

这是一种能快速减少文件体积的方法,当然对一些非常复杂的图形,还是建议在一开始在使用钢笔工具的时候,尽量减少控制点的数量。
控制画布的尺寸
画布的尺寸不能太大,因为画布越大意味着路径上的控制点也越多,从而导致文件体积的增大。太小,有可能在导出的SVG代码中会存在很多的小数点,这里推荐画布的尺寸为100 x 100。
在Illustrator中,想要改变画布的大小也非常方便,在菜单栏上对象 > 画板 > 适合图稿边界 就可以自动根据画布图形元素的边界来调整画布大小。

有时候你可能想按照自己的预期来调整画布的尺寸,并不想自动来调整画布。这时候可以选择菜单栏上的文件 > 文件设置 > 编辑画板就可以手动来调整画布的大小。
导出然后优化
做完一些基本的优化后,使用Illustrator导出SVG文件,我们还可以使用一些工具对它进一步优化。下面推荐一些优化工具:
SVGO-GUI,这是一个基于node的优化工具。运行软件之后,直接把文件拖入软件中它会自动帮你优化好SVG文件。

Peter Collingridge’s SVG Editor,一个在线编辑器,你可以把你的代码贴进上面链接网页中的编辑框中,然后点击load按钮,它就会解析你的SVG代码,并且提供优化的选项来优化SVG代码:
