从Illustrator导出Web的SVG的最佳设置?


128

我希望在网站上使用SVG徽标,以使其在所有设备的自适应设计中看起来都很棒。

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

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

在此处输入图片说明

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

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

在此处输入图片说明

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

在此处输入图片说明

谢谢!

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

更新:还有更多可以配置的选项。我不是在处理文本,所以我看到的唯一相关的是小数位。对于徽标,某些东西最大显示为200x200px(在Retina显示屏上为400x400px),“ 3”是最佳设置吗?还是“ 2”以最小化文件大小?

在此处输入图片说明


4
这个问题的答案和答案都非常好-堡盟和双像素的道具。
13年

Answers:


215

SVG配置文件

  • SVG 1.0:所有现代台式机和移动浏览器都支持SVG 1.1,因此请不要选择此选项。
  • SVG 1.1:您几乎总是会想要这个。
  • SVG Tiny / Basic:这是用于移动设备的SVG的子集。只有少数设备支持SVG Tiny,而不支持完整规格,因此请使用SVG 1.1。

注意:SVG Tiny不会减小文件大小,它只是SVG的一个子集,足以满足低处理能力的设备。它将丢弃渐变,不透明度,嵌入的字体和过滤器。ErikDahlströ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,除非您知道自己在做什么,否则不要更改它。

针对Adobe SVG Viewer进行优化

从浏览器本身不支持SVG开始,Adobe SVG Viewer便是一个浏览器插件。我不知道它的作用,但这无关紧要,请不要检查

包括切片数据

这会将元数据膨胀添加到您的SVG文件中,除非您打算稍后在Illustrator中打开SVG文件并找到您的切片(如果有),请不要选中此选项

包括XMP

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

输出更少的<tspan>元素

如果您没有文字,则将显示为灰色。SVG不支持字距调整表,因此,某些字符序列似乎间隔太远,即AVA。Illustrator通过添加tspan元素和微调字符位置来解决该问题。这增添了几分膨胀到文件,除非你更关心的不是文字的外观文件大小不查这个

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

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


通常,我建议您总体上研究SVG,您会发现它看起来很像HTML,并且可以调整在Illustrator中无法完成的工作。


谢谢!多么详细的回应!我认为SVG Tiny的文件大小较小吗?当您说“只有少数设备支持SVG Tiny而不是完整规格”时,您的意思是说没有多少设备支持SVG Tiny?我想我真正要问的是,最重要的区别是什么?(无需阅读此W3怪物。)再次感谢!更新:如果您感兴趣,我会在原始问题中添加有关小数位的其他部分。我在文本编辑器中打开了SVG,需要阅读什么才能知道要取出哪种XML?
堡盟

3
SVG Tiny不会减小文件大小,它只是SVG的一个子集,适用于低处理能力的设备。它将丢弃渐变,不透明度,嵌入的字体和过滤器。我不确定每个支持SVG的浏览器是否也支持SVG Tiny,但是我认为这是对的。我建议您不要忘记SVG Tiny,因为您只会获得旧BlackBerry手机的报道。我还更新了答案,以涵盖您有关小数位的问题。
methodofaction 2012年

再次感谢。不要说“您只会得到旧的BlackBerry手机的报道”之类的东西-不管多么过时,我都希望对其进行研究:P
Baumr

4
对“高级选项”部分有什么建议吗?
RZKY 2015年

1
@Duopixel您可以使用“高级选项”更新您的答案吗?CSS属性,小数位数(已经在答案中),编码,针对Adobe SVG Viewer进行优化,包括切片数据,包括XMP,输出更少的<tspan>元素,最后对路径上的文本使用<textPath>元素。
PussInBoots
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.