基于 Illustrator 优化导出 SVG

原文出处 Optimizing and Exporting SVG in Adobe Illustrator

SVG

深入理解如何创建,导出和优化 SVG 文件对于我们使用 SVG 非常有帮助。

本文开始之前,你需要先清除一件事情完整的 SVG 优化涉及到从创建到导出整个过程。像任何 HTML 网页一样,在完成之后很难修复一个糟糕的 SVG 文件。

当然,您可以在导出后使用优化工具,但这种自动化的方法可能会以各种意想不到的方式破坏您的文件。拥有良好的手动SVG优化概念的扎实的工作知识将使您从一开始就保持良好的状态。

这正是你今天要学习的。

在Illustrator中创建SVG

当您在Illustrator中创建一个用于SVG导出的图形时,您需要执行一些步骤和注意事项,以便为Web正确优化最终的输出。我们现在来探讨一下。

设置正确的色彩空间

Illustrator(作为大多数矢量插图软件)最初是为打印制作而设计的,因此其默认颜色空间设置为CMYK。RGB更适合于网页和屏幕使用,并且具有比CMYK更广泛的色域(颜色范围)。所以,当您创建新文档时,请确保颜色模式设置为RGB - 如下图所示。

合理命名图层

SVG文件不像常规的位图图像由一组像素点构成。这是一个具有特定结构的文本文档。

像HTML文档一样,您可以分别选择和操作各个元素。要做到这一点,你需要使用他们的名字作为yin'yong。我发现在Illustrator中进行可视化编辑时创建这些标签总是容易得多,而不是在以后。

出于这个原因,为每个图形元素提供一个有意义的名称是非常重要的。以下是在Illustrator中创建图形时需要了解的信息:

  • Illustrator图层图层组名称用作SVG组的ID

  • Illustrator符号名称用作SVG符号的ID

  • Illustrator图形样式名称用作CSS类

在下面的图片中,您可以看到Illustrator文件中的名称如何反映到导出的SVG中。

layers and stylesWeb Elements

尽可能简化你的形状

SVG图形中的形状用坐标点描述。绘图越多,文件越大,编辑和维护越困难。创建小而高效的文件可以让你的生活更轻松。

要解决这个问题,您需要使用尽可能少的点数来创建所需的形状。这可以通过几种方式来实现。

尽可能使用主SVG形状而不是SVG路径

使用 linerectcircle 等简单元素具有一些显著的优点。

首先,简单的形状对于人类来说更具可读性 - 当路径可以是任何东西时,我们可以看到一个圆圈是一个圆圈。

其次,简单的形状几乎总是产生更小的文件大小和更少的代码,这使得维护和编辑更容易。您还可以使用它们的直接属性(如x,y,cx,cy)更轻松地控制它们,而不是像路径一样使用点坐标。

要了解我的意思,在下面的图像中,您可以看到一个简单的圆形形状,一次被定义为SVG圆形元素,一次被定义为SVG路径。尽管它们的渲染效果是一样的,但使用SVG形状描述让 SVG 文件更小,更通用。请注意,一些图形编辑器 - 例如Fireworks的SVG导出扩展 - 在导出时会将SVG形状转换为路径。

Shapes vs. Paths

简化路径

路径只是一个坐标点数组。简化路径意味着删除一些点,这将导致更少的路径数据和更小的文件大小。要做到这一点,你可以使用对象>路径>简化...命令或变形工具。在这两种情况下,重点是最大限度地减少路径的点,而不失去视觉效果的质量。

在下面的图片中,您可以看到Illustrator的简化过程如何将路径点数从32减少到23(大约是25%),以及这如何反映到代码中。路径数据减少,而视觉质量仍然保持在良好水平。

simplifybefore and after

决定是否将文本转换为路径

在SVG图形中,文本是一个独立的元素,因此它是可搜索的,可访问的,并且易于重新编辑。这对于文本来说是有价值的。但是,如果要保证文本的外观与您在任何地方设计的方式完全相同的话,则需要用户安装正确的字体。这意味着你需要选择一个大家都安装的字体,或者提供一个网页字体 - 这限制了你的创造力。

如果精确的文本渲染比可编辑性更重要 - 例如在 LOGO 中 - 您可以使用“类型”>“创建大纲”命令将其转换为路径,或者在导出面板中设置此选项,稍后将会看到。

请记住,将大量文本转换为路径,文件大小会急剧增加 - 所以在转换前仔细考虑。

text to paths

使用“SVG过滤器”而不是Illustrator或Photoshop滤镜效果

Illustrator提供了一组在浏览器中实时应用的SVG滤镜(“效果”> “SVG滤镜”)。Illustrator或Photoshop 滤镜效果会将效果叠加后生成的光栅图嵌入到 SVG 中,而 SVG 滤镜可以随时更改或删除。

您还可以创建可重复使用的过滤器并/或通过应用SVG过滤器对话框进行编辑。

Filters

为画布设置合适的大小

如果你希望你的SVG能够如期望地显示出来,那么总是把你的画板修剪到绘图区域是个好习惯。画布尺寸是导出的SVG视口的尺寸,画布中的任何空白都将作为视口内的空白空间生成。

根据具体情况,可以使用“对象”>“画板”>“适合艺术作品边界”或“对象”>“画板”>“适合选定的艺术”命令。

在下面的图片中,左边的星星将会与周围的白色空间一起导出,而右边的星星则会以适当的尺寸导出。

Fit to Artboard

  • 广告 -

在Illustrator中导出SVG

自2015.2版以来,Illustrator CC随附了一个为网页优化的SVG文件创建的新导出面板。在本节中,我们将看到如何使用它。

注意:对于那些使用旧版本Illustrator的人来说,这是一个合适的教程

当您的图形准备好生产时,选择 “文件”> “导出”> “导出为” ...命令,然后选择SVG作为文件类型的选项并点击导出按钮。您应该看到以下面板:

Export dialog

让我们来看看更详细的选项。

Styling

有三种方法可以设置SVG的样式,并将其显示在第一个下拉列表中。

  1. 首先是使用内部CSS(例如一个 <style> 块),一般认为这是“分离关注”原则之后的最佳选择。

  2. 第二种方法是使用内联CSS样式。

  3. 第三种方法是使用SVG表示属性。

在下面的图片中,您可以看到这三个选项之间的区别。

enter image description here

Font

如果要将文本转换为轮廓,可以在此处指示Illustrator执行此操作。如果要保留文本可编辑性,请选择SVG选项。轮廓文本为您提供了对印刷术的完全视觉控制,但花费巨大 - 文件大小被压缩,文本丢失了可编辑性和可搜索性。

注意:SVG字体将从SVG 2中删除,并被视为已过时的功能,支持从浏览器中删除。

Images

在这里,您可以选择如何处理SVG中的任何光栅图像。您可以选择将它们保存为外部文件,或者将其作为DataURI嵌入到SVG中。通常外链(Link)是一个有用的选择,因为它使父SVG文件显着缩小,因此,在您的代码编辑器更易于管理。

然而,嵌入(Embed)选项有一个伟大的重要优势:嵌入图像永远不会与其“父SVG”断开/分离。使用外链资源的SVG将在第一次下载,上传或移动没有“子图像”时显示丢失的图像图标。

如果你的 SVG 文件想要移植性更高你需要牢记这点。

一般来说,如果您可以避免在SVG中使用基于像素的图形,则可以避免将来的许多麻烦。

enter image description here

Object IDs

一般来说,最好的选择是选择 Layer Names(图层名称),因为这会给你个别的SVG元素有意义的名字。Minimal(最小)使用随机字母数字,而唯一(Unique)使用大量随机字符组合。

Object IDs

Decimal

此选项定义您的坐标在小数点后填充的小数位数。更高的数字意味着更精确的路径,而最小的数字产生更少的冗长的代码和小的文件大小。

从下图中可以看到,如果路径有5位小数,体积远大于1个小数点的相同路径,但在视觉上是相同的。

请记住,我们正在讨论像素的百分之一和千分之一。只有在图形非常小或精度要求高时才需要更高的值。在大多数情况下,固定1位小数 - 将是最好的选择。

Decimal Places

Minify

仅当您导出图形的最终版本进行生产时才能检查此选项,并且确定该文件不会再被编辑。

Responsive

从理论上讲,这个选项从SVG文档中删除widthheight属性 - 使其更具响应性。但是,在大多数情况下,这不足以使您的SVG真正地响应所有浏览器,尤其是IE浏览器。我们将在后续教程中探讨解决这个问题的方法。

提示:保留原始.ai文件作为源代码总是一个好主意,然后使用该父文件的不同设置导出SVG副本。

当您选择“导出为...”命令时,在出现的导出对话框中,您可能已经注意到一个名为“使用画板”的附加选项。当您使用多个画板时(例如,当您创建一组图标),并且希望将每个画板作为单独的SVG文件导出时,它将变得非常有用。

正如您在上面看到的,在SVG的创建和导出过程中会发生很多优化。但是,您可能需要使用某些专用工具(如SVGO或其Web GUI GUI版本SVGOMG)进一步优化文件。

SVGO Optimizer

请注意,在使用这些工具时您需要小心。他们可以轻松地破坏您的文档功能。我的建议是尽可能使用手动优化,只有在必要和谨慎的情况下才使用自动优化工具。

###更多来自这位作者

结论

很多人都认为SVG是Web矢量图形的未来。很难看到SVG不会继续获得更多特性。如果你还不熟悉,那么现在就开始学习,这将是一个好的和明智的投资。

SVG 2发布有一段时间了,为我们带来了许多强大的新功能。真是激动人心的时刻。