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

我正在寻找一个网站使用SVG标志 - 使它在所有设备的响应式设计上看起来很棒。

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

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

在这里输入图像描述

我认为SVG Tiny的文件较小? 很多设备是否支持SVG Tiny? 什么是最重要的区别? (不必阅读这个W3怪物。)

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

在这里输入图像描述

或者,浏览器如何支持“嵌入”选项?

在这里输入图像描述

谢谢!

PS会有一个后备Alpha-PNG选项,但我希望尽可能最好地支持SVG。 (想想吧,像JPG这样的后备选项 - 在这种情况下可能是最好的选择,因为alpha-PNG本身需要针对较老IE的解决方案。)

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

在这里输入图像描述


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不支持的SVG,但如果您打算仅支持移动设备(通常运行webkit),那么这是一个不错的选择。

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

  • 子集

  • 无:这将否定以前的设置,并且不会嵌入任何字体,如果您不在意字体在用户计算机中回退到某种其他字体,请选择此字体。

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

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

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

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

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

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

    保留Illustrator编辑功能

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

    小数位

    默认的3是一个理智的设置,你几乎可以忘记它。

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

    编码

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

    针对Adobe SVG Viewer进行优化

    Adobe SVG Viewer是一个浏览器插件,在浏览器本身不支持SVG的时候。 我不知道它做了什么,但它是无关的, 不检查这一点

    包含切片数据

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

    包括XMP

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

    输出更少的<tspan>元素

    如果您没有文字,这将变成灰色。 SVG不支持字距表,因此,某些字符序列看起来会太空,即AVA 。 Illustrator通过添加tspan元素和调整字符位置来解决问题。 这增加了一点臃肿的文件不检查这一点,除非你更关心文件大小而不是文本外观

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

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


    总的来说,我建议你一般来看看SVG,你会发现它看起来很像HTML,它允许你调整在Illustrator中无法完成的事情。

    链接地址: http://www.djcxy.com/p/18317.html

    上一篇: Optimal settings for exporting SVGs for the web from Illustrator?

    下一篇: Display vector images in iOS (SVG or FXG)