从 Illustrator 为 Web 导出 SVG 的最佳设置？

https://i.stack.imgur.com/ETM0o.png

SVG 配置文件

SVG 1.0：所有现代桌面和移动浏览器都支持 SVG 1.1，所以永远不要选择这个选项。

SVG 1.1：你几乎总是想要这个。

SVG Tiny/Basic：这是用于移动设备的 SVG 子集。只有少数设备支持 SVG Tiny，而不是完整的规范，所以选择 SVG 1.1。

注意：SVG Tiny 不会减小文件大小，它只是 SVG 的一个子集，足以满足低处理能力设备的需求。它将丢弃渐变、不透明度、嵌入字体和过滤器。

Erik Dahlström 说：

所有 SVG 1.1 完整查看器都应该能够显示所有 SVG 1.1 Tiny/Basic 内容（根据规范），可能还有 Illustrator 生成的所有 SVG 1.2 Tiny 内容。

字体注意：如果您的图像中没有任何文本，则此设置无关紧要。

Adobe CEF：如果您打算在浏览器中显示它，请不要使用此选项。这是 Adobe 在 SVG 文件中嵌入字体的方式，据我所知，这仅受 Adobe 的 SVG 查看器插件支持。

SVG：这会将字体嵌入为 SVG，Firefox 不支持该字体，但如果您打算仅支持移动设备（通常运行 webkit），这是一个不错的选择。

创建大纲：除非您有大量文本，否则您大部分时间都希望这样做。如果您有大量文本，您将希望使用 WOFF 嵌入字体，但您必须手动执行此操作。

子集：

无：这将否定先前的设置并且不会嵌入任何字体，如果您不关心字体回落到用户计算机中的其他字体，请选择此选项。

仅使用字形：如果您选择嵌入字体，您大部分时间都需要这个。它仅嵌入使用的字符，因此不会增加文件大小。

[其余子集]：这很清楚，您可以选择包括整个字体或它的子集。仅当您的 SVG 是动态的并且文本可能会根据用户输入而更改时，它才有用。

图像：这仅在您包含位图图像时才重要

嵌入：这通常是您想要的，它将图像编码为数据 uri，因此您只需上传一个文件而不是 svg 文件及其伴随的位图图像。

链接：仅当您有多个引用一个位图文件的 svg 文件时才使用此选项（因此每次渲染 svg 文件时都不会下载它）。

请注意，如果通过 <img> 标记显示 SVG，则不会显示链接的位图图像，因为 img 不允许加载外部资源。此外：webkit 有一个错误，即使您嵌入了 svg 文件中的位图图像也不显示。简而言之：如果您打算嵌入或链接位图图像，请使用普通的 <svg> 标签，不要使用 <img>。

保留 Illustrator 编辑功能

我更喜欢将 .ai 文件保存为我的源图像，并将 SVG 文件视为 Export for web 功能。这样您就可以专注于减小文件大小并拥有具有所有编辑功能的矢量文件的原始副本。所以不要选这个。

小数位

默认 3 是一个合理的设置，您几乎可以忘记它。

但是，如果您的路径非常复杂，并且包含许多点，则将此设置降低到 1 甚至 0 将大大减小文件大小。但是您必须小心，因为贝塞尔线段对此设置非常敏感，并且它们可能看起来有点失真。因此，如果您降低此设置，请始终确保它在浏览器中看起来可以接受。

编码

字符编码背后的解释是相当技术性的，它只涉及带有文本的 svg 文件。您最可能需要的编码是 UTF-8，除非您知道自己在做什么，否则不要更改它。

包括切片数据

这会将元数据膨胀添加到 SVG 文件中，除非您打算稍后在 Illustrator 中打开 SVG 文件并找到切片（如果有切片），否则不要检查此选项

包括 XMP

关于文件的更多元数据，您可以read on XMP here。 不要检查这个

响应式

请注意，此设置将消除 svg 根节点的 height 和 width 属性，假设您将通过 css 缩放包含的图形。然而，在某些情况下，您希望单个图形声明它的大小。确保在这些情况下取消选中此设置。

输出更少的 <tspan> 个元素

如果您没有文本，这将显示为灰色。 SVG 不支持字距调整表，因此，某些字符序列会显得间隔过大，即 AVA。 Illustrator 通过添加 tspan 元素和稍微调整字符位置来解决问题。这会增加文件的臃肿性除非您更关心文件大小而不是文本外观，否则不要检查此内容。

对路径上的文本使用 <textpath> 元素

如果路径上没有文本，这将显示为灰色。浏览器在将文本放置在路径上时往往会发生很大变化，因此 Illustrator 尝试通过将旋转和位置应用于角色而不是将工作留给浏览器来提供帮助。除非您更关心文件大小而不是文本外观，否则不要检查此项。

一般来说，我建议你看一下 SVG，你会发现它看起来很像 HTML，它允许你调整 Illustrator 中无法完成的事情。

---

更新到 @methodofaction 的出色解释。

当前版本的 Illustrator 中的导出选项发生了一些变化。

Adobe SVG Viewer 不再是一个东西。但更重要的是，我相信默认情况下会检查一个新设置“响应式”。请注意，此设置将消除 svg 根节点的 height 和 width 属性，假设您将通过 css 缩放包含的图形。然而，在某些情况下，您希望单个图形声明它的大小。确保在这些情况下取消选中此设置。

---