从 Adobe Illustrator 获取 SVG 的不同方法

假设您在 Adobe Illustrator 中创建了一个精美的矢量插图。或者您已使用 Illustrator 来微调一些现有的图形。或者出于任何原因，您在 Adobe Illustrator 中打开了一个文件，您最终希望将其用作 Web 上的 SVG。

从 Illustrator 获取 SVG 有几种不同的方法，每种方法都略有不同。让我们来看看。

TL;DR：导出，如 文件 > 导出 > 导出为… SVG，然后进行优化是您在 Web 上的最佳选择。

“另存为…”方法

Illustrator 支持 SVG 作为一流的文件格式。您可以 文件 > 另存为… 并选择“SVG”作为选项，作为默认的 `.ai` 文件格式的替代方案。

在弹出的“保存 SVG 选项”中甚至还有一个名为“SVG 代码…”的按钮，您可以单击它让 Illustrator 在保存之前显示代码，大概是为了复制和粘贴。

如果您在网络上搜索一些关于从 Illustrator 中以不同格式保存的区别的信息，您会发现很多通用信息告诉您 SVG 用于万维网，因此，如果您打算在此处使用此图形，则应以该格式保存。

请谨慎操作。从 Illustrator 保存为 SVG 很好，但该文件绝对不适用于 Web 上的直接使用。当您从 Illustrator 以 SVG “另存为…”时，Illustrator 的主要关注点是您可以像离开时一样再次在 Illustrator 中打开该文件。

例如，Illustrator 具有不属于 SVG 的专有功能。一个简单的例子：参考线。您不会以这种方式保存为 SVG 时丢失参考线，它们可以很好地保留。但是参考线在 Web 上的 SVG 中毫无意义，因此，如果您将以这种方式保存的 SVG 直接用于 Web，您将发送无用的数据。

“另存为…”保存的 Illustrator SVG 的文件大小可能比真正适合 Web 的版本大几个数量级。看看 CSS-Tricks 徽标“另存为…”和一个为 Web 导出的版本。

我们不太清楚为什么以 SVG “另存为…”是一个好主意。您可能只想将文件保留为 `.ai`，直到您想要实际导出到 Web 为止。或者，如果您确实保存为 SVG，您不妨使用“保留 Illustrator 编辑功能”复选框并使用一个命名约定，明确表明这是一个“原始”文件，而不是一个适合 Web 的文件。

等等，“导出版本”？让我们接下来看看。

“导出为”方法

文件 > 导出 > 导出为… 完全不同。您正在“导出”，这意味着生成的文件不再是 Illustrator 友好且可编辑的文件，而是一个专门用于其他目的的新文件。

例如，JPG 就是其中一个选项。您不会期望在将矢量图形导出为 JPG 后能够对其进行编辑。

SVG 也是这里的一个选项。输出与“另存为…”大不相同。导出的 SVG 实际上非常接近于 Web 就绪状态。没有奇怪的文档类型、大量元数据或专有的 Illustrator 内容。导出的 SVG 可能无法以与原始文件完全相同的方式在 Illustrator 中打开。

您将获得一个最小的导出选项屏幕，如下所示

那里显示的选项是良好的默认值。快速概述

• 样式：“表示属性”表示诸如 fill: red; 之类的内容，而不是“内联样式”，这意味着 style=”fill: red;”。表示属性更容易在 CSS 中覆盖。内联样式提供了更强的样式弹性。还有一个选项可以在 SVG 内的 <style> 块中导出样式，这对于具有大量类似元素的 SVG 来说可能很有效。
• 字体：“SVG”表示使用元素（及其朋友），这非常有效，前提是您使用的字体在您打算使用的网站上可用。“转换为轮廓”将在导出时将文本转换为矢量形状，确保其外观完全正确，但会失去效率、可访问性、可搜索性和可复制性。
• 图像：“链接”表示如果 SVG 中碰巧存在光栅图形，它将链接到它们，而不是将它们嵌入到 SVG 中，而不是“嵌入”它们。
• 对象 ID：“唯一”确保每个 ID 都是唯一的（对 Web 有益），但您也可以选择使它们非常短（“最小”）或基于图层名称。
• 小数：2 可能没问题。如果您知道自己正在处理非常小的 viewBox 并需要很高的精度，或者如果您正在处理巨大的 viewBox，则只需增加即可。
• 最小化：我们正在为 Web 导出，所以，是的。
• 响应式：“开启”表示“不要放置 width 和 height 属性”。“关闭”表示要放置。实际上，将其关闭可能很明智（请参阅此处）。

以这种方式导出绝对有利于 Web。尽管 SVGO 仍然可以从中获得一点效率，当然，具体取决于图形。

“导出到屏幕”方法

从 CC 2017 版本开始，Illustrator 具有一个 文件 > 导出 > 导出到屏幕… 方法，专门用于为数字设备导出。我想说“Web”，但它具有导出到 iOS 和 Android 的功能，因此，正如他们所说的，“屏幕”是合适的。

这将弹出一个选项对话框，允许我们以不同的方式选择我们的作品，并以我们想要的方式导出我们想要的部分。

这真是一个方便的用户界面！我们可以不仅以 SVG 格式，还可以以其他格式导出插图的某些部分，同时进行。想象一下一个图标系统。在一个文档中使用 20 个画板，并且只需一个命令即可将它们全部导出为 SVG 和多个分辨率的 PNG。非常好。

在后台，它似乎使用了与“导出”相同的系统，因此您将获得针对 Web 优化的输出。

画板是将作品分成单独导出的一种方式。还有一个资产导出面板，允许您拖放要单独输出的作品部分。

“直接从画板复制”方法

说到选择旨在用作 SVG 的单个作品部分，有一种不太为人知的方法可以提取部分，那就是简单地 编辑 > 复制。

复制后，您的剪贴板将包含可粘贴为文本的内联 SVG 代码。

您获得的代码与我们迄今为止查看的任何方法略有不同。它最接近“另存为…”格式，因为您获得了 XML 文档类型等。它不是我们从导出获得的针对 Web 优化的格式。它确实有自己的 viewBox，裁剪到元素的边缘。

如果您使用此方法将 SVG 直接放入 HTML 中，请计划进行一些手动代码清理。

现在您有了 SVG…

…接下来呢？

• 也许您正在收集用于 SVG 图标系统 的单个 SVG 图标文件。例如，使用构建工具将它们处理成一个包含 <symbol> 到 <use> 的单个文件。
• 也许您需要 `.svg` 用作 <img>。
• 也许您需要 `.svg` 用作 CSS 中的 background-image。
• 也许您要将 SVG 代码直接放入 HTML 中作为内联 SVG。

有很多方法可以 使用 SVG，但这始终始于首先获取 SVG 以进行处理。