Adobe Illustrator 导出选项

这与其说是代码片段，不如说是对我经常查找内容的提醒。在 Adobe Illustrator 中创建 SVG 文件时，有两种不同的导出文件的方法。这两种方法都包含一些选项，其中一些我完全忘记了它们的含义以及应该选择哪些。

方法 1：另存为...

你可能不会使用这种方法来保存用于网页的 SVG。这主要用于保存主文档。事实上，你可能只想直接保存为 Illustrator 格式。你会使用其他一些导出选项来导出到网页。

在 Adobe Illustrator 中将文件保存为 SVG 的最常见方法是选择主菜单中的文件 > 另存为... 选项。

Illustrator 会弹出一个对话框，询问你为文件命名以及保存位置。更重要的是，它还会询问要保存为哪种类型的文件，在这种情况下是 SVG。而不是 SVG 压缩 (svgz)。仅仅是 SVG。

单击“保存”按钮，就会出现另一组选项。这通常是我记忆力下降的地方，我不得不浏览网页寻找答案。以下是在 Adobe Illustrator 中保存 SVG 文件的最佳方式的截图。

• **SVG 配置文件**：这会在打开的<svg> 标记上设置 XML 文档类型。SVG 1.1 是最新版本，涵盖最广泛的支持范围，可能是最合适的选项。其他所有版本要么是旧版本，要么是 SVG 1.1 的子集，在选择它时，我还没有遇到过任何问题。
• **字体 > 类型**：选择“转换为轮廓”将确保文件中任何键入的文本都作为矢量路径而不是字形导出。字形有可能无法渲染，但矢量路径总是更好的选择。
• **选项 > 图片位置**：如果文件中使用了光栅图像（即 JPG、PNG、GIF），那么我们想要选择“链接”选项。否则，光栅图像将被嵌入到文件中，这会降低 SVG 的性能优势，因为它会增加文件大小来包含这些额外的资源。最好将它们作为链接进行引用，并确保将这些源文件包含在与 SVG 文件相同的目录中。
• **选项 > 图片位置 > 保留 Illustrator 编辑功能**：这个选项对 SVG 文件的输出有很大影响。由于你可能在这里保存的是一个“主”副本，而不是用于网页的副本，所以你会保持选中状态。这将保留 Illustrator 的专有内容（如参考线），以便你下次打开文件时可以使用它们。未选中表示参考线等内容会被删除并丢失。
• **高级选项 > CSS 属性**：我为这个选项选择“表现属性”，因为它将属性（如填充、描边等）放置在最低的特殊性级别。例如<path stroke="black" stroke-width="2" ... />。这会为元素设置样式，但很容易在 CSS 中覆盖。
• **高级选项 > 小数位数**：如果你浏览过<path> 的代码，就会知道指定这些形状的值可以非常精确。然而，很多时候这些值过于精确，增加了 SVG 文件的总大小。由于你可能在这里保存的是主文件，所以你可以将此值设置得较高，因为文件大小并不重要。
• **高级选项 > 编码**：我不太了解 UTF 编码，但将其保留为“Unicode UTF-8”确实可以确保向后兼容性。此外，UTF-8 文件的大小往往比 UTF-16 小，因此这是一个优点。
• **高级选项 > 响应式**：未选中此选项会为 SVG 设置固定的height 和width 属性。我选中此选项，因为它允许我在代码或 CSS 中设置这些属性。

方法 2：导出为

从 Adobe Illustrator 获取 SVG 的另一种方法是选择主菜单中的文件 > 导出 > 导出为... 选项。但是，使用 Illustrator 工作区中的“操作”面板，可以找到第二种方法。

如果你知道要直接在网页上使用此文件，并且以后不会修改设计，那么此选项非常理想。它提供的设置更少，还提供了一些选项，可以进一步优化文件，以提高性能。事实上，最佳实践是在文件副本上执行此操作，而不是在主文件本身执行，这样就可以有一个版本可以在 Illustrator 中打开和编辑，另一个版本更适合在生产网站上使用。

• **样式**：我们在方法 1 的设置中已经介绍过这个选项，但在这里我选择“表现属性”，因为它是一种在最高级别的属性上组织属性的方法。这会为标记添加顺序，使我们能够灵活地使用 CSS 为后续属性设置样式，并且通常会导致更小的文件大小。
• **字体**：我们上面已经介绍过这个选项，但选择“转换为轮廓”会将字形替换为字符的矢量路径，从而确保文本正确渲染。
• **图像**：我们上面已经介绍过这个选项，但选择“链接”会阻止嵌入的光栅图像被打包到 SVG 中，这会导致文件变得更大。
• **对象 ID**：此设置会为 Illustrator 提供有关如何在标记中命名 ID 的指令。你可以指示它根据文件中图层的命名方式来命名 ID。
• **小数位数**：代码中的小数位数越少，文件大小就越小。将此设置为1 是理想的，在许多情况下也是可以接受的，并且不会对设计造成明显的影响，但2 通常是安全的。无论哪种方式，都值得检查 SVG 是如何渲染的。
• **缩小**：是的，请！这会压缩代码，以减少空格并提高网页性能，就像缩小 CSS 一样。
• **响应式**：与第一种方法完全一样，选中此选项非常理想，因为否则会在 SVG 上设置固定的height 和width 属性。