2012-11-05 76 views
121

我正在为网站使用SVG徽标 - 使其在所有设备的响应式设计中看起来都很棒。从Illustrator中为Web导出SVG的最佳设置?

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

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

enter image description here

我认为SVG微型具有较低的文件的大小?很多设备是否支持SVG Tiny?什么是最重要的区别? (无需阅读this W3 monster。)

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

enter image description here

另外,怎么是“嵌入”选项的浏览器支持?

enter image description here

谢谢!

P.S.将会有一个后备Alpha-PNG选项,但我希望尽可能支持SVG到 。 (来想想吧,一个后备 选项 - 如JPG - 很可能是最好的在这种情况下担任因为字母PNG本身需要为老年人IE的解决方案。)

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

enter image description here

+4

这个问题和答案都非常好 - 支持Baumr和Duopixel。 – aendrew

+0

@aendrew,谢谢! – Baumr

+1

非常有用的指导:http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/ –

回答

206

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内容。

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

  • Adob​​e CEF:从不使用此选项,您打算在浏览器中显示它。据我了解,这只是Adobe的SVG查看器插件所支持的,它是Adobe将字体嵌入SVG文件的方式。

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

  • 创建轮廓:除非您有大量的文本,否则大多数时候您都会想要这样做。如果你有大量的文本,你会想要嵌入字体与WOFF,但你将不得不手动这样做。

子集

  • 无:这将否定以前的设定,不会嵌入任何字体,如果你不在乎,字体回落到在一些其他字体用户的电脑选择这个。

  • 只有使用的字形:如果您选择嵌入字体,大多数情况下都会需要这个字体。它只嵌入使用的字符,所以不会夸大文件大小。

  • [其余子集]:这很清楚,你可以选择包含整个字体或其子集。只有当SVG是动态的,并且文本可能会根据用户输入而改变时才有用。

图片:此的事项,如果要包括位图图像

  • 嵌入:这通常是你想要什么,它的图像编码为数据的URI,这样你只上传一个文件,而不是svg文件与它的伴侣位图图像。

  • 链接:只有当您有几个引用一个位图文件的svg文件时才使用它(所以每次渲染svg文件时都不会下载它)。如果通过<img>标签显示的SVG

注意,链接位图图像无法显示,因为img不允许加载外部资源。此外:webkit有一个错误,即使您嵌入它们,也不会在svg文件中显示位图图像。简而言之:如果您打算嵌入或链接位图图像,请使用普通<svg>标记,请勿使用<img>

保留Illustrator编辑功能

我宁愿保存。爱文件作为我的源图像,并认为SVG文件作为Export for web功能。这样你就可以专注于缩小文件大小,并且拥有所有编辑功能的矢量文件的原始副本。所以不要选择这个。

小数位数

默认3是一个健全的设置,可大多是忘掉它。

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

编码

后面的字符编码的解释是相当的技术,并且只关注文本的SVG文件。 你需要的最可能的编码是UTF-8,除非你知道你在做什么,否则不要改变它。

优化为Adobe SVG浏览器

的Adobe SVG浏览器是时候,浏览器不支持SVG原生浏览器插件。我不知道它是干什么的,但它是无关紧要的,不检查这个

包括切片数据

这增加了元数据膨胀到您的SVG文件,除非你打算在Illustrator后打开您的SVG文件并找到您的切片(如果有的话),不检查这个

包括有关文件,可以read on XMP here XMP

更多的元数据。 不选中此

输出较少的<tspan>元素

这将显示为灰色,如果你没有文字。 SVG不支持字距表,因此,某些字符序列看起来间隔太多,即AVA。 Illustrator通过添加tspan元素和调整字符位置来解决问题。这增加了一点膨胀到文件不检查这一点,除非你更关心文件大小比文本出现更多。

使用路径

这对<textpath>元素的文字会显示为灰色,如果你没有一个路径上的文本。在将文本放在路径上时,浏览器往往会有很大差异,所以Illustrator会尝试通过将旋转和位置应用于角色而不是将作业留给浏览器来帮助。 不检查此内容,除非您关心的文件大小多于文本外观


一般情况下,我建议你寻找到SVG在一般情况下,你会发现,它看起来很像HTML,它允许您调整的事情,不能在Illustrator中完成。

+0

**谢谢!**详细的回复!我认为SVG Tiny的文件较小?当你说,“只有少数设备支持SVG Tiny而不是完整规范”,你的意思是说,没有多少设备支持SVG Tiny?**我想我真正想问什么**最重要的区别是什么?**(不必阅读[这个W3怪物](http://www.w3.org/TR/SVGMobile/)。)再次感谢! **更新:**如果您有兴趣,我在原始问题中增加了一个关于小数位**的额外**部分。我在文本编辑器中打开了SVG - 任何需要了解的内容**要取出哪个XML ** – Baumr

+3

SVG Tiny不会减小文件大小,它只是SVG的一个子集,足以适用于低处理能力的设备。它会放弃渐变,不透明度,嵌入字体和过滤器。我不确定每个支持SVG的浏览器是否也支持SVG Tiny,但我认为这是事实。我建议你只是忘记SVG Tiny,因为你只能获得老黑莓手机的覆盖范围。我还更新了答案,以涵盖有关小数位的问题。 – Duopixel

+0

再次感谢。不要说“你只能获得老黑莓手机的覆盖范围” - 这让我想看看它,不管它有多么过时:P – Baumr