134

我希望在网站上使用 SVG 徽标——让它在所有设备的响应式设计上看起来都很棒。

但既然有问题,我想支持尽可能多的设备和浏览器。加载速度也是一个重要的考虑因素。Adobe Illustrator 中的导出设置如何适应这一切?

在 Illustrator 中,有多个 SVG 导出选项。首先,哪种 SVG 配置文件最好?

在此处输入图像描述

我假设 SVG Tiny 的文件大小较小?许多设备都支持 SVG Tiny 吗?最重要的区别是什么?(无需阅读这个 W3 怪物。)

其次,我认为图像位置的最佳选择是“链接”?(见感叹号后的说明。)

在此处输入图像描述

或者,浏览器如何支持“嵌入”选项?

在此处输入图像描述

谢谢!

PS 会有一个备用 alpha-PNG 选项,但我希望尽可能地支持 SVG。(想一想,在这种情况下,备用选项(如 JPG)可能是最好的选择,因为 alpha-PNG 本身需要针对旧版 IE 的解决方案。)

更新:还有更多可以配置的选项。我不使用文本,所以我看到的唯一相关的是小数位。对于徽标,最大显示为 200x200 像素(因此在 Retina 显示器上为 400x400 像素),“3”是最佳设置吗?或“2”以最小化文件大小?

在此处输入图像描述

4

2 回答 2

223

在此处输入图像描述

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:如果您打算在浏览器中显示它,请不要使用此选项。这是 Adob​​e 在 SVG 文件中嵌入字体的方式,据我所知,这仅受 Adob​​e 的 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

有关该文件的更多元数据,您可以在此处阅读 XMP不要检查这个

响应式

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

输出更少的<tspan>元素

如果您没有文本,这将显示为灰色。SVG 不支持字距调整表,因此,某些字符序列看起来间隔太大,即AVA. Illustrator 通过添加tspan元素和稍微调整角色位置来解决问题。这会给文件增加一点膨胀,除非您更关心文件大小而不是文本外观,否则不要检查这一点

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

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


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

于 2012-11-05T18:59:44.040 回答
1

更新到 @methodofaction 的出色解释。

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

  1. Adobe SVG Viewer 不再是一个东西。

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

于 2020-09-23T18:53:20.110 回答