【问题标题】:Optimal settings for exporting SVGs for the web from Illustrator?从 Illustrator 为 Web 导出 SVG 的最佳设置?
【发布时间】:2012-10-25 12:57:49
【问题描述】:

我希望为网站使用 SVG 徽标 — 使其在适用于所有设备的响应式设计中看起来很棒。

但是自从there are issues之后,我想支持尽可能多的设备和浏览器。加载速度也是一个重要的考虑因素。 Adobe Illustrator 中的导出设置如何适应这一切?

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

我认为 SVG Tiny 的文件大小较小?许多设备都支持 SVG Tiny 吗?最重要的区别是什么? (无需阅读this W3 monster。)

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

另外,浏览器如何支持“嵌入”选项?

谢谢!

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

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

【问题讨论】:

标签: html css image svg adobe-illustrator


【解决方案1】:

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:永远不要使用此选项,因为您打算在浏览器中显示它。这是 Adob​​e 在 SVG 文件中嵌入字体的方式,据我所知,只有 Adob​​e 的 SVG 查看器插件支持。

  • SVG:这会将字体嵌入为 SVG,Firefox 不支持,但如果您打算仅支持移动设备(通常运行 webkit),这是一个不错的选择。

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

子集

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

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

  • [rest of subsetting]:这很清楚,您可以选择包含整个字体或它的子集。只有当您的 SVG 是动态的并且文本可能会根据用户输入发生变化时,它才有用。

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

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

  • 链接:仅当您有多个引用一个位图文件的 svg 文件时才使用此选项(因此每次渲染 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 中无法完成的事情。

【讨论】:

  • 谢谢! 多么详细的回复!我假设 SVG Tiny 的文件大小较小?当你说,“只有少数设备支持 SVG Tiny,而不是完整的规范”,你的意思是 没有多少设备支持 SVG Tiny? 我猜是什么我真的在问,最重要的区别是什么?(无需阅读this W3 monster。)再次感谢! 更新:如果您有兴趣,我在原始问题中添加了一个额外的关于小数位的部分。我在文本编辑器中打开了 SVG — 要了解 要取出哪个 XML?
  • SVG Tiny 不会减小文件大小,它只是 SVG 的一个子集,足以满足低处理能力设备的需求。它将丢弃渐变、不透明度、嵌入字体和过滤器。我不确定是否每个支持 SVG 的浏览器也支持 SVG Tiny,但我认为这是真的。我建议您忘记 SVG Tiny,因为您只会获得旧 BlackBerry 手机的覆盖范围。我还更新了答案以涵盖您关于小数位的问题。
  • 再次感谢。不要说“你只会获得旧黑莓手机的覆盖范围”之类的话——不管它多么过时,我都想调查一下:P
  • 对“高级选项”部分有什么建议吗?
  • @Duopixel 您能否使用“高级选项”更新您的答案? CSS 属性、小数位数(已在答案中)、编码、针对 Adob​​e SVG 查看器进行优化、包含切片数据、包含 XMP、输出较少的 元素,最后将 元素用于路径上的文本。
【解决方案2】:

更新@methodofaction 的精彩解释。

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

  1. Adobe SVG Viewer 不再是东西。

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

【讨论】:

  • 欢迎来到 SO!我建议您通过编辑更新您所指的答案。这通常是在这里完成的(如果您要添加或更新某些内容)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-10-23
  • 1970-01-01
  • 2018-02-08
  • 1970-01-01
  • 2019-07-02
  • 2015-05-04
  • 2015-09-04
相关资源
最近更新 更多