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

我正在寻找一个网站使用SVG标志 – 使其在所有设备的响应式devise上看起来不错。

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

在Illustrator中，SVG导出有几个选项。 首先， 哪个SVGconfiguration文件最好？

我认为SVG Tiny有一个较低的文件大小？ 很多设备是否支持SVG Tiny？ 最重要的区别是什么？ （不必读这个W3怪物 。）

其次，我认为图像位置的最佳select是“链接”？ （感叹号后请参阅说明。）

或者，浏览器如何支持“embedded”选项？

谢谢！

PS会有一个后备Alpha-PNG选项，但我希望SVG得到最好的支持。 （想想吧，像JPG这样的后备选项 – 在这种情况下可能是最好的select，因为alpha-PNG本身需要一个老版IE的解决scheme。）

更新：还有更多的选项可以configuration。 我不使用文本，所以我看到的唯一相关的是小数位。 对于标志，显示最大200x200px（在Retina显示器上为400x400px），是“3”最好的设置？ 或“2”以最小化文件大小？

Answer 1

SVGconfiguration文件

• SVG 1.0：所有现代桌面和移动浏览器都支持SVG 1.1，所以不要select这个选项。
• SVG 1.1：你几乎总是想要这个。
• SVG Tiny / Basic：这是用于移动设备的SVG的一个子集。 只有less数设备支持SVG Tiny，而不是完整的规范，所以去SVG 1.1。

注意：SVG Tiny不会减小文件大小，它只是SVG的一个子集，足以适用于低处理能力的设备。 它将放弃渐变，不透明度，embedded的字体和filter。 ErikDahlström表示：所有的SVG 1.1全面观众应该能够显示所有的SVG 1.1 Tiny / Basic内容（根据规格）以及Illustrator生产的所有SVG 1.2 Tiny内容。

字体注意：如果您的图像中没有任何文字，则此设置无关紧要。

• Adobe CEF：不要使用这个选项，你打算在浏览器中显示它。 这是Adobe在SVG文件中embedded字体的方式，据我所知，这只有Adobe的SVG查看器插件才支持。

• SVG：这种字体embeddedSVG，这是Firefox不支持的，但是如果你打算只支持移动设备（通常运行webkit），这是一个不错的select。

• 创build大纲：大部分时间您都会想要这样做 ，除非您有大量的文本。 如果你有大量的文本，你会想要embedded字体与WOFF，但你将不得不手动这样做。

子集 ：

• 无：这将否定以前的设置，并且不会embedded任何字体，如果您不在意字体在用户计算机中回退到其他字体，请select此选项。

• 只使用字形：如果您selectembedded字体，则大多数情况下都需要这样做。 它只embedded使用的字符，所以它不会膨胀你的文件大小。

• [其余子集]：这是相当清楚的，你可以select包括整个字体或其子集。 只有当SVG是dynamic的，文本可能会根据用户input而改变时才有用。

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

• embedded：这通常是你想要的 ，它将图像编码为数据URI，这样你只需要上传一个文件，而不是svg文件和它的伴随位图图像。

• 链接：只有当你有几个引用一个位图文件的svg文件时才使用它（所以每次渲染svg文件时都不会下载它）。

请注意，如果通过<img>标签显示SVG，链接的位图图像将不会显示，因为img不允许加载外部资源。 此外：webkit有一个错误，即使您embeddedsvg文件中也不显示位图图像。 简而言之：如果要embedded或链接位图图像，请使用简单的<svg>标记，请勿使用<img> 。

保留Illustrator编辑function

我更喜欢将.ai文件保存为我的源图像，并将SVG文件视为Export for webfunction。 这样你就可以专注于减小文件大小，并且拥有所有编辑function的vector文件的原始副本。 所以不要select这个。

小数位数

默认的3是一个理智的设置，你可以主要忘记它。

但是，如果你有一个非常复杂的path，将这个设置降低到1或者甚至0，将会大大减小文件的大小。 但是你必须小心，因为贝塞尔细分对这个设置非常敏感，而且看起来有点扭曲。 所以如果你降低这个设置，一定要确保它在浏览器中可以接受。

编码

字符编码背后的解释是相当技术性的，它只涉及带有文本的svg文件。 你需要的最可能的编码是UTF-8 ，除非你知道你在做什么，否则不要改变它。

优化Adobe SVG查看器

Adobe SVG Viewer是浏览器本身不支持SVG的浏览器插件。 我不知道它是什么，但它是无关的， 不检查这一点 。

包括切片数据

这将元数据膨胀添加到您的SVG文件，除非您打算以后在Illustrator中打开SVG文件并find您的切片（如果您有）， 请不要检查

包括XMP

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

输出更less的<tspan>元素

如果您没有文字，这将变成灰色。 SVG不支持字距表，所以，某些字符序列看起来太多了，即AVA 。 Illustrator通过添加tspan元素和调整字符位置来解决问题。 这增加了一点膨胀的文件不检查这个，除非你更关心的文件大小比文字外观 。

对path上的文本使用<textpath>元素

如果path上没有文字，这将变成灰色。 在将文本放在path上时，浏览器往往会发生很大的变化，因此Illustrator会尝试通过将旋转和位置应用于字符而不是将作业留给浏览器来帮助。 除非你比文本外观更关心文件的大小，否则不要检查它 。

---

一般来说，我build议你一般来看看SVG，你会发现它看起来很像HTML，它允许你调整在Illustrator中不能完成的事情。