我近期会写一篇关于SVG sprite的文章，涉及到这个画板选项，但是在那之前，你可以在24Ways.org上看看我写的几篇关于sprite技术的文章：

An Overview of SVG Sprite Creation Techniques

这里也有一篇关于SVG sprite的文章~

优化还是不优化...? 这是个问题

大家通常是建议在把SVG从图形编辑器中导出后，再用单独的优化工具来进行优化。当前最流行的优化工具是基于NodeJS的，叫做SVGO。但是它不可能一直为你优化SVG提供最好的服务，特别是当你要添加动画的时候。

如果你打算给SVG添加脚本或动画，你一般会设置一定的文档结构——分组名、id等等，以便在javascript中进行操作。如果你使用SVGO（或其它的任何优化工具）进行优化，这个文档结构就会被破坏。

优化工具通常会删除所有无用的分组和id，还会给SVG应用很多改变来对其进行优化。

我试过在使用 <animate> 给SVG添加动画之后，再对其进行优化。SVG的文档结构被破坏了，应用的动画也变得乱七八糟，因为整个结构都改变了。所以，在优化SVG之前要牢记这一点。

如果你是手动编辑或生成具有一定文档结构的SVG，尽量不要用优化工具来优化，尽可能手动优化把。在SVG文档的开头和结尾的部分，很多内容都是可以手动编辑的。其它的缀余的东西，如元数据和像Sketch这些编辑器生成的类名——它没有SVG优化选项，手工优化比较难。

我一般不用Sketch来生成复杂的SVG。我使用Illustrator或Inkscape；后面那个有一个默认的输出面板，提供了很多优化SVG的选项（如下图）。Inkscape目前生成的SVG代码是最干净的——如果你选了 Optimized SVG 选项，但是在retina屏幕上模糊的UI，还有它对于OS X上X11的依赖，使得它用起来真是非常麻烦，所以我一般都用Illustrator。

如果你需要/或者必须优化SVG，SVGO是一个我比较建议的工具。

SVGO有一大堆可以用的插件，你可以用来适应任何类型的工作。你可以在下面的这篇文章（我几个月前写的）中找到更多关于我上面提到的这些工具的信息：

Useful SVGO[ptimization] Tools

沟通，一定要尽早沟通

我给了这么多的提示，最重要的一条就是沟通啦！！一定要在设计阶段最最开始的时候就和开发人员沟通好。

我这里假设的是，你是设计师而不负责后面的开发（写脚本、动画、嵌入等）。

上面的所有tip都是需要大家对于开发知识有一定的了解的。所以除非是设计+开发阶段都是你负责，否则集合和开发人员好好沟通，了解他们会使用来进行哪些操作。如果你做的项目非常紧急，你可能没办法花太多时间在后期的图片修改上，那么尽早和开发沟通好，可以节省很多时间。

设计师和开发者应该成为好朋友。SVG的本质就是设计和开发阶段是共通的，所以需要两方好好沟通，在整个创作过程中。

译者补充

这里有一篇文章也提到了一个AI中导出SVG文件的技巧，非常实用~

希望这篇文章能够给你提供一些帮助。我不是设计师所以可能漏掉了一些设计方面的东西，你可以在评论里进行补充~

感谢阅读~

本文根据 @SaraSoueidan 的《 Tips for Creating and Exporting Better SVGs for the Web 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： 。

彦子

在校学生，本科计算机专业。逗比一枚，热爱前端热爱生活，喜欢CSS喜欢JavaScript喜欢SVG，爱玩PS玩AI玩啊逗比的软件。努力向上，厚积薄发。