从IlluStrator导出用于web的SVG的最佳设置?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (40)

我希望使用一个SVG标志的网站-使它看起来很好的一个反应的设计,为所有的设备。

AdobeIlluStrator中的导出设置如何适应所有这些?

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

我想SVGTINY有一个更低的文件大小?有很多设备支持SVG微型吗?最重要的区别是什么?

第二,我假设图像定位的最佳选择是“链接”?

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

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

最新情况:还可以配置更多选项。我没有处理文本,所以我看到的唯一相关的是十进制。对于徽标,要以最大200 x 200 px(在Retina显示器上为400 x400 px)显示的东西,“3”是最佳设置吗?或者“2”来最小化文件大小?

提问于
用户回答回答于

SVG剖面

  • SVG1.0:所有现代桌面和移动浏览器都支持SVG1.1,所以永远不要选择这个选项。
  • SVG1.1:几乎总是希望这样做。
  • SVG微缩/基本:这是SVG的子集,用于移动设备。只有少数设备支持SVGTINT,而不是完整的规范,所以请使用SVG1.1。

注意:SVGTINTEN并不会减少文件大小,它只是SVG的一个子集,适合低处理能力的设备。它将丢弃渐变,不透明度,嵌入字体和过滤器。Erik Dahlstr m说:所有SVG1.1的观众都应该能够显示所有SVG1.1微小/基本的内容(根据规范),而且很可能所有的SVG1.2微型内容也是IlluStrator生产的。

字体注意:如果你的图像中没有任何文本,这个设置并不重要。

  • AdobeCEF:永远不要使用此选项,打算在浏览器中显示它。这是Adobe在SVG文件中嵌入字体的方法,据我所知,这仅得到Adobe的SVG查看器插件的支持。
  • SVG:这将字体嵌入SVG,Firefox不支持这种字体,但是如果您打算只支持移动设备(通常运行webkit),这是一个很好的选择。
  • 创建大纲:大多数时候您都想这样做,除非你有大量的文本。如果您有大量的文本,您将希望嵌入字体与WOFF,但您将不得不这样做的手。

底座:

  • None:这将否定以前的设置,并且不会嵌入任何字体,如果您不关心字体是否回落到用户计算机中的其他字体,请选择此字体。
  • 只使用符号:大多数时候你会想要这样如果您选择嵌入字体。它只嵌入所使用的字符,这样就不会膨胀文件大小。
  • 其余部分这是相当清楚的,你可以选择包括它的整个字体或子集。只有当SVG是动态的,并且文本可能根据用户输入而改变时,它才会有用。

图像::只有当您包含位图图像时,这才重要。

  • 嵌入:这通常是你想要的,它将图像编码为数据uri,这样您就可以上传一个文件而不是SVG文件及其附带位图图像。
  • 链接:只有当你有几个SVG文件引用一个位图文件(所以它不是每次呈现SVG文件时都下载)时才使用这个链接。

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

保存插图编辑功能

我更喜欢将.ai文件保存为我的源映像,并将SVG文件视为Export for web特征。这样,您就可以集中精力缩小文件大小,并拥有一个原始的矢量文件副本,并具有所有编辑功能。所以别选这个。

十进制位

默认3是个理智的环境,你几乎可以忘记它。

但是,如果有一个非常复杂的路径,并且有许多点,将此设置降低到1甚至0将大大减少文件大小。但是您必须小心,因为Bezier段对此设置非常敏感,它们可能看起来有点失真。因此,如果降低了此设置,请始终确保它在浏览器中看起来是可接受的。

编码

字符编码背后的解释是相当技术性的,它只涉及SVG文件和文本。最需要的编码是UTF-8。,除非你知道自己在做什么,否则不要改变这一点。

AdobeSVG查看器的优化

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

包括切片数据

这会增加SVG文件的元数据膨胀,除非计划稍后在IlluStrator中打开SVG文件并找到切片(如果有它们),不要检查这个

包括XMP

输出较少<tspan>元素

如果你没有短信的话,这会变成灰色的。SVG不支持核化表,因此,某些字符序列看起来过于间隔,例如AVA。插画师通过添加tspan元素和调整字符位置一点。这给文件增加了一点膨胀。不要检查这一点,除非更关心文件大小而不是文本外观。

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

如果没有路径上的文本,这将是灰色的。浏览器在将文本放置在路径上时往往变化很大,因此IlluStrator试图通过将旋转和位置应用于字符而不是将作业留给浏览器来提供帮助。不要检查这一点,除非更关心文件大小而不是文本外观。

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

扫码关注云+社区