SVG 配置文件
- SVG 1.0:所有现代桌面和移动浏览器都支持 SVG 1.1,因此切勿选择此选项。
- SVG 1.1:您几乎总是想要这个。
- SVG Tiny/Basic:这是用于移动设备的 SVG 子集。只有少数设备支持 SVG Tiny,而不是完整规范,所以选择 SVG 1.1。
注意:SVG Tiny 不会减小文件大小,它只是 SVG 的一个子集,足以满足低处理能力设备的需求。它将丢弃渐变、不透明度、嵌入字体和过滤器。
埃里克·达尔斯特罗姆说:
所有 SVG 1.1 完整查看器都应该能够显示所有 SVG 1.1
Tiny/Basic 内容(根据规范),可能所有的 SVG
1.2 Illustrator 也制作的微小内容。
字体注意:如果您的图片中没有任何文字,则此设置无关紧要。
-
Adobe CEF:永远不要使用此选项,因为您打算在浏览器中显示它。这是 Adobe 在 SVG 文件中嵌入字体的方式,据我所知,只有 Adobe 的 SVG 查看器插件支持。
-
SVG:这会将字体嵌入为 SVG,Firefox 不支持,但如果您打算仅支持移动设备(通常运行 webkit),这是一个不错的选择。
-
创建大纲:您大部分时间都希望这样做,除非您有大量文本。如果您有大量文本,您将希望使用 WOFF 嵌入字体,但您必须手动执行此操作。
子集:
-
无:这将否定先前的设置,并且不会嵌入任何字体,如果您不关心字体回落到用户计算机中的其他字体,请选择此项。
-
仅使用字形:如果您选择嵌入字体,您大部分时间都需要这个。它只嵌入使用的字符,因此不会增加文件大小。
-
[rest of subsetting]:这很清楚,您可以选择包含整个字体或它的子集。只有当您的 SVG 是动态的并且文本可能会根据用户输入发生变化时,它才有用。
图像:这仅在您包含位图图像时才重要
请注意,如果 SVG 通过<img> 标签显示,则链接的位图图像将不会显示,因为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 中无法完成的事情。