合并路径有很多好处，但是当你或者开发者想要控制路径的某一部分添加动画的时候，麻烦就来了。有些动画是只添加给多元素动画的某部分，或者有时候你只是想要给路径添加不同的填充颜色。如果你把路径合并了，那就麻烦了。

你需要确认开发者的需求（或者你自己的需求，如果开发阶段的工作是你自己完成的话），然后再决定是否合并路径。这可以节省很多时间，还可以避免冲突。

使用 SVG滤镜 ，而不是 Photoshop效果

如果你选择了 效果（Effect） 选项下的 （Photoshop效果）Photoshop Effects 中的任何效果，Illustrator会导出你创建的效果导出成栅格图片。例如，如果你使用 （模糊）Blur 效果来创建投影，那个投影会变成一个栅格图像，嵌入在SVG中，无论是内联还是外部使用，使用 <image> 标签。你肯定不希望在你的SVG中看到它。

要将它以SVG代码的格式生成效果，你需要使用这里提供的SVG滤镜：

去到 效果（Effect） → SVG滤镜（SVG Filters）

选择，然后使用那个面板中提供的滤镜

选择适合绘画的画板

你有在网页上嵌入过SVG吗，给它指定一个高度和宽度，然后发现它其实比你指定的尺寸要小？

大多数情况下，这是因为SVG视窗中有一定大小的白色空白的空间。视窗（viewport，不了解的同学可以点击这里学习）是按照你在样式表中指定的尺寸显示的，但是它里面有额外的空白——在图形周围——使得你的图片看起来好像“缩水”了，因为这块空白是占空间的，在视窗里面。

为了避免这种情况，你需要确保你的画板是刚刚好放下里面的图像的，不要大太多。

画板的尺寸就是导出的SVG的视窗的尺寸，所有画板上的空白都会最终变成视窗中的白色空白。

让你的画板适应图像的尺寸：

选中整个图像（使用 cmd/ctrl + A ，方便爽快~）

去到菜单栏 对象（Object） → 画板（Artboards） ，然后选择 适合图稿边界（Fit to Artwork Bounds）

使用良好的命名、分组和分层

我知道这听起来好像没什么，但在这里强调确实是有原因的：

你在图形编辑器中使用的 id 和 class 名，都会在生成的图形中变成它的 id 和 class 。这些名称的越有意义和它们各自元素的标签越清晰，后期和开发者的冲突就会越少。

现在，我不是说你需要给它们完美的命名——我只是希望它们都有不同的命名方式，命名其实是有难度的，但是适当地给标签分组还有很长的路。例如，如果你要画一辆车，使用 wheel 这个 id 给轮子这个图层或者组成轮子的这组图层，是恰当的。如果你所有的轮子都放在一组，你可能会给它一个id叫 wheels 。给元素和小组简单的命名，可以节省很多时间，特别是如果开发者要编辑和操作代码的时候。

Illustrator在命名这块做得没有很好，所以给图层指定名字可以帮助我们减少它产生的垃圾量。当然，也会有一些额外的编辑来摆脱烦人的下划线，因为AI总是生成下划线，但是使用适当的名字可以帮助我们减少工作量。

如前面提到的，下一个版本的Illustrator会在生成SVG这块有很大的改善，包括生成ID。

使用分层来给相关的元素分组。图层在代码中会被翻译成 group ，所以这块也要好好命名。创建 layer/group 来包裹相关的元素，特别是那些可能作为一个整体添加动画的。会花费很多时间在元素的排序和分组上，如果块没有在设计阶段做好的话。所以为了节省时间，请保持分组恰当。在设计阶段和开发者好好沟通，看看动画要如何执行，可以节省很多时间。

如果你创建的图像将被用于SVG sprite，你所使用的名称将会被大多数自动工具用来生成新文件。因此，使用清晰正确的命名可以产生更干净的文件名。

选择最适合web的输出选项

在写这篇文章的时候，Illustrator有一系列帮助你输出更好的SVG代码的选项。

要导出SVG：

选择 文件（File） → 存储为（Save As） ，快捷键 Shift+Ctrl+S

在下拉菜单中选择SVG

点击**保存（Save）

点击了 保存（Save） 之后，会弹出一个 SVG选项 对话框，包含一系列你可以自定义的选项，会影响生成的SVG代码：

上面的图片中展示的选项是推荐的生成适合Web使用的SVG的。

在这里，如果你不想使用Web字体，可以选择把文本转换成轮廓；Illustrator在输出的时候提供了这样一个选项，如图所示。

图像位置（Image Location）选项指定是否有栅格图像嵌入到你的SVG中，或者在SVG中是否放一个外部链接。不过，这还是根据你自己的需要。SVG中的内联图像会大大地增加文件大小。上次有一位设计师给我发的SVG中包含了一个图像，所以文件大小超过了1M！在把图像（因为应用了Photoshop Effects导致的，我们前面提过）删掉之后，文件就小于 100K 了。所以，好好做选择。

CSS属性（CSS Properties）选项可以让你选择你的SVG文件中添加样式的方式：演示文稿属性、内联样式，还是放在 <style> 标签内。这个问题见仁见智，主要还是看你打算如何嵌入SVG以及接下来要对它做什么操作。如果你不是那个后面的开发人员，记得和开发者好好沟通，以他们的需求为准。

（小数位数Decimal Places）的数量越少，SVG文件也就越小。小数点后一位应该已经足够了，我一般会把后面的内容去掉。

注意如果你选了 3 位或 4 位小数，例如，然后使用优化工具来优化SVG，把小数点变回1，那这个SVG可能会在视觉上被破坏。所以，最好在前面就勾上这项。

选项面板还有很多我没有提到的。Adobe的Michaël Chaize写了一篇关于导出面板的文章，解释了每个选项对应是干啥的。强烈推荐阅读：

Export SVG for the web with Illustrator CC

现在，也就是写这篇文章的时间，Illustrator在导出SVG的时候还是会产生不必要的代码，如编辑元数据、空白分组，等等，所以你需要在导出之后对它进行优化，手工操作，或使用一个单独的SVG优化工具。

在我们跳到优化的那部分之前，我想指出，在保存SVG的时候，保存面板中你可能不会去检查的额外选项：“ 使用画板（Use Artboards） ”：

这个选项在你处理多个SVG图像的时候是非常有用的（例如：icon），你可以给它们设置相同尺寸的面板。

导出多个画板会生成多个 .svg 文件，每个文件对应一个画板。

如果你是只处理一个画板，这个选项就会默认禁用。

选择导出一个或多个SVG文件，是根据你的SVG如何嵌入来决定的。

例如，如果你打算创建一个SVG icon sprite，有几种方法可以创建和使用，每一个需要一种不同的方法：一种技术要求icon最初是分开的，另一种技术则要求它们是在一张图像上的。