AI创建和导出SVG的技巧
创建和导出SVG的技巧
我们在响应式⽹页设计的⼯作中经常⽤到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上作的演讲
下⾯开始吧。
使⽤简单的图形元素创建简单的图形，尽量避免⽤
这是SVG有这么多可以创建的基础图形的原因，基本形状（戳这⾥学习）。虽然我们⽤⼀个元素就可以创建出所有形状了，但是也不要这么任性嘛~
简单的图形元素（, , , , 和）存在是有它的原因的，其中⼀个原因就是图形元素的可读性更强，可维护性更好，也⽐更易于编辑！
基础图形还⾃带神器——各种各样的属性，允许你控制图形的特性，如位置（x, y, cx, cy），尺⼨（width和height），path就没有这些属性啦。
例如，下⾯的⽚段展⽰的是将⼀个圆导出为⼀个简单的图形，第⼀种⽅法是⽤circle，第⼆种⽅法是path：
stroke="#000"
cx="28.1"
cy="28.1"
r="27.6"/>
stroke="#000"
d="M55.7,28.1
c0,15.2-12.4,27.6-27.6,27.6
S0.5,43.3,0.5,28.1
S12.9,0.5,28.1,0.5
S55.7,12.9,55.7,28.1z"/>
如果你想要给图形添加动画，也就是说，移动圆的位置或者让它变⼤，你可以通过x 和y坐标和半径r来操作。但是如果你的圆是⽤path⽣成的，你就必须⽤CSS/SVG变换（即平移和缩放）来完成。然后假设你想要给path添加动画，你可能还需要进⼀步应⽤变换？最后可能会变得⾮常混乱。svg图形
使⽤简单图形的另⼀个优点是，在⼤多数情况下，使⽤简单图形元素创建图形的代码量，要⽐使⽤元素的代码量少很多啊（上⾯的那个代码⽚段就很明显了）！！所以使⽤简单的图形会使得最后的⽂件⼩⼀些，这样会⽐较好。
将⽂本转换为轮廓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中⽂本转换为轮廓以及没有转换的两种情况的⽂件⼤⼩（转换为轮廓的在左，没转换的在右）。
路径并不好控制，⽽且也不像元素（包括）那样可以很⽅便地添加动画。后者有⼀组属性，可以给动画提供更多控制，⽽路径⽂本则被限制了。
简化路径
⼀条由⼀组点定义的路径，实际上也是由⼀组坐标定义的。
点的数量越少，路径数据也越少（d属性），还有，SVG⽂件也⾃然会变⼩。所以这对于获取较⼩的⽂件⼤⼩，以获取更好的性能，是⾮常有必要的⼀步。
选择路径
选择对象（Object）→路径（Path）→简化（Simplify）
调整点的数量。记得打开预览（Preview），实时查看修改动态。调整点的数量将其减到最⼩，并尽量保持路径变形不会太⼤。
这⾥有⼀个Adobe创建的教程，讲解了这个过程；如果你想看更多的视频，可以点击这⾥。
你还可以使⽤Warp Tool简化路径。我不是设计师，所以我通常使⽤AI的简化算法来简化路径，所以如果你是⼀位经验丰富的设计师，你应该⽐我更清楚变形⼯具。这⾥有⼀篇Smashing Magazine上的⽂章，讲解这个⼯具的，感兴趣的同学可以看看。
不要合并路径，除⾮你不想控制单独路径
很多设计师都喜欢合并路径，⼀般都是这样⼲的：
选中你想要合并的路径
选择窗⼝（Window）→路径查器（Pathfinder）
点击合并（Merge）选项，在第⼆⾏中（左边开始第三个图标，如截图所⽰）。
合并路径有很多好处，但是当你或者开发者想要控制路径的某⼀部分添加动画的时候，⿇烦就来了。有些动画是只添加给多元素动画的某部分，或者有时候你只是想要给路径添加不同的填充颜⾊。如果你把路径合并了，那就⿇烦了。
你需要确认开发者的需求（或者你⾃⼰的需求，如果开发阶段的⼯作是你⾃⼰完成的话），然后再决定是否合并路径。这可以节省很多时间，还可以避免冲突。
使⽤SVG滤镜，⽽不是Photoshop效果
如果你选择了效果（Effect）选项下的（Photoshop效果）Photoshop Effects中的任何效果，Illustrator会导出你创建的效果导出成栅格图⽚。例如，如果你使⽤（模糊）Blur效果来创建投影，那个投影会变成⼀个栅格图像，嵌⼊在SVG中，⽆论是内联还是外部使⽤，使⽤标签。你肯定不希望在你的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⽂件中添加样式的⽅式：演⽰⽂稿属性、内联样式，还是放在

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。