创建和导出SVG的技巧_H5之家 - 中国HTML5教程资源分享第一站

我们在响应式网页设计的工作中经常用到SVG，这个过程通常包括设计阶段和开发阶段。设计阶段通常是由不懂编程的设计师们完成的。因为原生SVG作为一种图像格式和文档格式，在图形编辑器中创建SVG效果的每一步，都会直接影响生成的代码以及负责嵌入SVG代码、编写脚本或添加动画的开发者的工作。在我的日常工作中，我通常是既做设计师又做开发者，自己处理自己设计的内容，而SVG图像就是我的日常开发内容之一。

我之前做的大多数实例都放在以前的项目中了，一般需要一次或两次编辑，在我给它们编写脚本之前，因为导出的SVG代码并没有优化到足以放到工作环境中——特别是动画，所以我被雇来做这块内容了。原因是很多我曾经共事的设计师都基本不懂代码。他们都是负责创建矢量图形和UI，而且对他们来说，SVG也只是一种图像格式，他们并不懂SVG的代码是如何生成的，当他们从图形编辑器中导出SVG文件的时候。

有一些设计师们可以采取或避免的步骤——“do and don't”——可以帮助大家生成更整洁的代码。在这篇文章中，我给大家分享了一些这方面的技巧。如果你还有其它的建议，可以在文章末尾的评论里留言。

我们下面讲到的技巧都是适用于Adobe Illustrator (Ai)的——我的首选图形编辑器——还有其它的图形编辑器也是同样的道理。但是因为我个人使用的是AI，所以我这篇文章都是拿AI来讲。

我们先看看AI中SVG导出选项都有哪些，理解每个选项都是什么意思。因为这些选项将来也可能会有改变，到时这篇文章也会更新的。

注意这篇文章是基于我前面的演讲“SVG For Web Designers (and Developers)”——我在上个月的2015年CSSDevConf上作的演讲

下面开始吧。

使用简单的图形元素创建简单的图形，尽量避免用 <path>

这是SVG有这么多可以创建的基础图形的原因，基本形状（戳这里学习）。虽然我们用一个 <path> 元素就可以创建出所有形状了，但是也不要这么任性嘛~

简单的图形元素（ <line> , <circle> , <rect> , <ellipse> , <polygon> 和 <polyline> ）存在是有它的原因的，其中一个原因就是图形元素的可读性更强，可维护性更好，也比 <path> 更易于编辑！

基础图形还自带神器——各种各样的属性，允许你控制图形的特性，如位置（ x , y , cx , cy ），尺寸（ width 和 height ）， path 就没有这些属性啦。

例如，下面的片段展示的是将一个圆导出为一个简单的图形，第一种方法是用 circle ，第二种方法是 path ：

如果你想要给图形添加动画，也就是说，移动圆的位置或者让它变大，你可以通过 x 和 y 坐标和半径 r 来操作。但是如果你的圆是用 path 生成的，你就必须用CSS/SVG变换（即平移和缩放）来完成。然后假设你想要给 path 添加动画，你可能还需要进一步应用变换？最后可能会变得非常混乱。

使用简单图形的另一个优点是，在大多数情况下，使用简单图形元素创建图形的代码量，要比使用 <path> 元素的代码量少很多啊（上面的那个代码片段就很明显了）！！所以使用简单的图形会使得最后的文件小一些，这样会比较好。

将文本转换为轮廓outline，或者不要

怎么在AI中把文本转换为轮廓呢？

选中你想要转换的文本

选择文字（Type） → 创建轮廓（Create Outlines）或快捷键 Shift+Ctrl+O

优点

文本转换为轮廓会保留原来使用的字体，这样我们就不需要额外引入Web字体。也就是说你节省了一些额外的 HTTP 请求，也不需要担心你的文本会降级展示，变得不那么美丽动人漂亮可爱了。

给文本添加轮廓，保留了原来的字体，对于设计品牌标志是非常好用的。例如：logo。我经常会把logo的文本转换为轮廓。轮廓非常适合用于保留某些用于标题的字体，so good。

缺点

文本在转换成轮廓之后，就不再是真正的文本了：它只是一组组成文本轮廓的路径。因此，文本已经不再是文本，不可访问，不可搜索，也不可选中。

在脚本标题或者logo中使用了轮廓文本的情况，使用一个 alt 属性，或SVG的可访问性元素（ title 和 &> ），可以为屏幕阅读器提供可选择的文本。

我强烈建议阅读Léonie Watson的这两篇文章，关于如何使得SVG更具可访问性。

Tips for Creating Accessible SVG

Using ARIA to Enhance SVG Accessibility

把文本转换成轮廓会增加SVG文件的大小，根据使用的字体的复杂度来决定。下面的图片展示了SVG中文本转换为轮廓以及没有转换的两种情况的文件大小（转换为轮廓的在左，没转换的在右）。

路径并不好控制，而且也不像 <text> 元素（包括 <tspan> ）那样可以很方便地添加动画。后者有一组属性，可以给动画提供更多控制，而路径文本则被限制了。

简化路径

一条由一组点定义的路径，实际上也是由一组坐标定义的。

点的数量越少，路径数据也越少（ d 属性），还有，SVG文件也自然会变小。所以这对于获取较小的文件大小，以获取更好的性能，是非常有必要的一步。

这里有一个Adobe创建的教程，讲解了这个过程；如果你想看更多的视频，可以点击这里。

你还可以使用 Warp Tool 简化路径。我不是设计师，所以我通常使用AI的简化算法来简化路径，所以如果你是一位经验丰富的设计师，你应该比我更清楚变形工具。这里有一篇Smashing Magazine上的文章，讲解这个工具的，感兴趣的同学可以看看。

不要合并路径，除非你不想控制单独路径

很多设计师都喜欢合并路径，一般都是这样干的：