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

Question

我希望在网站上使用SVG徽标 - 使其在所有设备的响应式设计上看起来很棒.

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

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

我认为SVG Tiny的文件较小？许多设备支持SVG Tiny吗？最重要的区别是什么？(无需阅读这个W3怪物.)

其次,我认为图像定位的最佳选择是"链接"？(见感叹号后的说明.)

或者,浏览器如何支持"嵌入"选项？

谢谢!

PS将有一个后备alpha-PNG选项,但我希望尽可能支持SVG.(想想看,一个后备选项 - 就像JPG一样 - 在这种情况下可能是最好的服务,因为alpha-PNG本身需要一个旧IE的解决方案.)

更新:还可以配置更多选项.我不使用文本,所以我看到的唯一相关的是小数位.对于徽标,显示为最大200x200px(在Retina显示屏上为400x400px)的东西,"3"是最佳设置吗？或"2"以最小化文件大小？

Answer 1

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

• 创建大纲:除非您有大量文本,否则您将希望大部分时间都这样做.如果您有大量文本,则需要使用WOFF嵌入字体,但您必须手动执行此操作.

子集:

• 无:这将取消先前的设置,并且不会嵌入任何字体,如果您不关心字体是否回退到用户计算机中的其他字体选择此项.

• 仅使用雕文:如果您选择嵌入字体,则大多数时候都会想要这个.它只嵌入使用的字符,因此不会夸大文件大小.

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

图像:这仅在您包含位图图像时才有意义

• 嵌入:这通常是你想要的,它将图像编码为数据uri,这样你只需上传一个文件而不是svg文件和它的伴随位图图像.

• 链接:仅当您有几个引用一个位图文件的svg文件时才使用它(因此每次呈现svg文件时都不会下载它).

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

保留Illustrator编辑功能

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

小数位

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

However, if you have a really complicated paths with many points lowering this setting to 1 or even 0 will reduce the file size substantially. But you must be careful because bezier segments are very sensitive to this setting and they might seem a little distorted. So if you lower this setting always make sure it looks acceptable in a browser.

Encoding

The explanation behind character encoding is rather technical, and it only concerns svg files with text. The most likely encoding you need is UTF-8, do not change this unless you know what you're doing.

Optimize for Adobe SVG Viewer

Adobe SVG Viewer is a browser plugin from times when browsers did not support SVG natively. I don't know what it does, but it is irrelevant, do not check this.

Include slicing data

This adds metadata bloat to your SVG file, unless you plan on opening your SVG file later in Illustrator and finding your slices (if you have them), do not check this

Include XMP

More metadata regarding the file, you can read on XMP here. do not check this

Output fewer <tspan> elements

This will be grayed out if you don't have text. SVG does not support kerning tables, so, certain character sequences will seem too spaced out, i.e. AVA. Illustrator works around by adding tspan elements and tweaking character positions a bit. This adds a bit of bloat to the file do not check this unless you care more about file size than text appearance.

Use <textpath> element for text on a path

如果路径上没有文本,则会显示为灰色.在将文本放置在路径上时,浏览器往往变化很大,因此Illustrator尝试通过将旋转和位置应用于角色而不是将作业留给浏览器来提供帮助.不要检查这个,除非你更关心文件大小而不是文本外观.

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