从Illustrator导出SVG文件用于网页的最佳设置是什么?

134

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

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

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

enter image description here

我假设SVG Tiny的文件大小更小?许多设备支持SVG Tiny吗?最重要的区别是什么?(无需阅读this W3 monster。)
其次,我假设图像位置的最佳选项是“链接”?(在感叹号后面看描述。)

enter image description here

另外,浏览器对于“embed”选项的支持如何?

enter image description here

谢谢!

附加说明:将提供alpha-PNG备选方案,但我希望SVG能够得到最好的支持。(想起来了,像JPG这样的备选方案在这种情况下可能是最好的选择,因为alpha-PNG本身需要解决旧版IE的问题。)

更新:还有更多可以配置的选项。由于我不处理文本,所以唯一相关的选项是小数位数。对于Logo,如果要显示为最大200x200px(在Retina显示器上为400x400px),是“3”最佳设置?还是“2”以减小文件大小?

enter image description here


4
这个问题和答案都非常好--向Baumr和Duopixel两位致敬。 - aendra
1
非常有用的指南:http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/ - Chuck Le Butt
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:如果您打算在浏览器中显示图像,则永远不要使用此选项。这是Adobe在SVG文件中嵌入字体的方式,据我所知,只有Adobe的SVG查看器插件支持。

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

  • 创建轮廓:大多数情况下,您都需要这样做,除非您有大量文本。如果您有大量文本,则需要手动使用WOFF嵌入字体。

子集化

  • 无:这将取消先前的设置,如果您不关心字体在用户计算机上回退到其他字体,则选择此选项时将不嵌入任何字体。

  • 仅使用的字形:大多数情况下,如果选择嵌入字体,则需要此选项。它只嵌入使用的字符,因此不会增加文件大小。

  • [其余的子集]:这很清楚,您可以选择包括整个字体或其子集。它仅在您的SVG是动态的并且基于用户输入可能更改文本时才有用。

图像:只有在包含位图图像时才重要

  • 嵌入:通常情况下,这是您想要的,它将图像编码为数据URI,因此您只需上传一个文件,而不是带有伴随位图图像的SVG文件。

  • 链接:仅当有几个SVG文件引用一个位图文件(因此每次呈现SVG文件时它不会被下载)时使用此选项。

请注意,如果通过<img>标记显示SVG,则链接的位图图像不会显示,因为img不允许加载外部资源。此外:Webkit存在一个错误,即使您将它们嵌入,也不会在SVG文件内显示位图图像。简而言之:如果您打算嵌入或链接位图图像,请使用普通的<svg>标记,而不要使用<img>

保留Illustrator编辑功能

我更喜欢将.ai文件保存为我的源图像,并将SVG文件视为“导出为Web”功能。这样,您可以专注于减小文件大小,并拥有一个具有所有编辑功能的原始矢量文件的原始副本。因此,请不要选择此选项。

小数位数

默认值3是一个合理的设置,您大多数情况下都可以忽略它。

然而,如果您有很多点的复杂路径,将此设置降低到1甚至0将大大减小文件大小。但是您必须小心,因为贝塞尔段对此设置非常敏感,它们可能看起来有点扭曲。因此,如果您降低此设置,请始终确保在浏览器中显示时看起来可接受。

编码

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

包括切片数据

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

包括XMP

有关该文件的更多元数据,您可以阅读此处的XMP请勿选中此选项

响应式

请注意,此设置将从您的SVG根节点中删除高度和宽度属性,假定您将通过CSS缩放包含的图形。但是在某些情况下,您希望单个图形声明其大小。在这些实例中,请确保取消选中此设置。

输出较少的<tspan>元素

如果没有文本,此选项将变为灰色。SVG不支持字距表,因此某些字符序列将看起来过于间隔,例如AVA。Illustrator通过添加tspan元素并微调字符位置来解决问题。这会使文件膨胀一些。除非您更关注文件大小而不是文本外观,请勿选中此选项

使用

如果您没有路径上的文本,该文字将被淡化显示。在放置文本于路径上时,浏览器的表现往往不尽相同,因此Illustrator试图通过对字符应用旋转和位置来协助而非让浏览器来处理它。除非您更关注文件大小而非文本外观,否则不要勾选此项
总的来说,我建议您全面了解SVG,您会发现它看起来很像HTML并且能够使您调整那些Illustrator无法完成的东西。

谢谢!回答得非常详细!我觉得SVG Tiny的文件大小更小?当你说,“只有少数设备支持SVG Tiny而不是完整规范”时,你的意思是“不多的设备支持SVG Tiny”吗?我想知道的是,“最重要的区别是什么?”(无需阅读这个W3 monster。)再次感谢!更新:如果您感兴趣,我在原始问题中添加了一个关于小数位的额外部分。我在文本编辑器中打开了SVG - 任何可以阅读以知道应该删除哪个XML吗? - Baumr
3
SVG Tiny并不会减小文件大小,它只是SVG的一个子集,适用于处理能力较低的设备。它会丢弃渐变、不透明度、嵌入字体和滤镜。我不确定是否每个支持SVG的浏览器也支持SVG Tiny,但我认为这是正确的。我建议您忘记SVG Tiny,因为它只会为旧款黑莓手机提供覆盖率。我还更新了答案,以回答您关于小数位数的问题。 - methodofaction
CSS属性应该包含在答案中,第一个设置将值打包到相应的属性键中,第二个设置为style属性。顺便说一句:对于专注于HTML的开发人员来说,长度单位在SVG属性中是允许的,而在HTML中从未被允许,这一点一再具有误导性,特别是因为SVG早期就允许包含CSS。 - Volker E.
4
“高级选项”部分有什么建议? - RZKY
1
@Duopixel,你能否更新你的答案并加入“高级选项”?包括CSS属性、小数位数(已在答案中)、编码、优化Adobe SVG Viewer、包括切片数据、包括XMP、输出更少的<tspan>元素,最后使用<textPath>元素来实现路径文本。 - PussInBoots
显示剩余7条评论

1

更新@methodofaction的优秀解释。

在当前版本的Illustrator中,导出选项有些变化。

  1. Adobe SVG Viewer已不再存在。

  2. 但更重要的是,现在有一个新的“响应式”设置,默认情况下已经被勾选。请注意,此设置将从您的SVG根节点中删除高度和宽度属性,假定您将通过CSS缩放包含的图形。然而,在某些情况下,您希望单独的图形声明其大小。在这些情况下,请确保取消选择此设置。


欢迎来到SO!我建议您使用编辑更新您所引用的答案。如果您正在添加或更新内容,通常就是这样做的。 - Baumr

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接