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

Optimal settings for exporting SVGs for the web from Illustrator?

提问by Baumr

I'm looking to use an SVG logo for a website — to make it look great on a responsive design for all devices.

我希望为网站使用 SVG 徽标 - 使其在适用于所有设备的响应式设计中看起来很棒。

But since there are issues, I want to support as many devices and browsers as possible. Load speed is also an important consideration. How do export settings in Adobe Illustrator fit into all this?

但既然有问题，我想支持尽可能多的设备和浏览器。加载速度也是一个重要的考虑因素。Adobe Illustrator 中的导出设置如何适应所有这些？

In Illustrator, there are several options for SVG export. Firstly, which SVG profile is best?

在 Illustrator 中，有多种 SVG 导出选项。首先，哪种 SVG 配置文件最好？

I assume SVG Tiny has a lower file size? Do many devices support SVG Tiny? What are the most important differences? (Without having to read this W3 monster.)

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

Secondly, I assume that the best option for image location is "link"? (See description after exclamation mark.)

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

Alternatively, how is browser support for the "embed" option?

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

Thank you!

谢谢！

P.S. There will be a fallback alpha-PNG option, but I want the SVG to be supported as best as possible. (Come to think of it, a fallback option — like a JPG — would probably be the best served in this case since alpha-PNG itself needs a solution for older IE.)

PS 会有一个后备 alpha-PNG 选项，但我希望尽可能支持 SVG。（想想看，在这种情况下，回退选项（例如 JPG）可能是最好的选择，因为 alpha-PNG 本身需要针对旧版 IE 的解决方案。）

Update:There are also more options that can be configured. I am not working with text, so the only relevant one I see is the decimal places. For logos, something to be displayed as maximum 200x200px (so 400x400px on Retina displays), is "3" the best setting? Or "2" to minimize file size?

更新：还有更多可以配置的选项。我没有处理文本，所以我看到的唯一相关的是小数位。对于徽标，要显示为最大 200x200 像素（因此在 Retina 显示器上为 400x400 像素），“3”是最佳设置吗？或“2”以最小化文件大小？

回答by methodofaction

SVG profiles

SVG 配置文件

• SVG 1.0: all modern desktop and mobile browsers support SVG 1.1, so never choose this option.
• SVG 1.1: You will almost always want this.
• SVG Tiny/Basic: this is a subset of SVG intended for mobile devices. Only a handful of devices support SVG Tiny and not the full spec, so go for SVG 1.1.

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

Note: SVG Tiny does not reduce the file size, it's just a subset of SVG that is adequate for low processing power devices. It will discard gradients, opacity, embedded fonts and filters. Erik Dahlstr?m says: All SVG 1.1 full viewers should be able to display all of the SVG 1.1 Tiny/Basic content (according to spec), and probably all of the SVG 1.2 Tiny content that Illustrator produces too.

注意：SVG Tiny 不会减小文件大小，它只是 SVG 的一个子集，足以满足低处理能力设备的需求。它将丢弃渐变、不透明度、嵌入字体和过滤器。Erik Dahlstr?m 说： 所有 SVG 1.1 完整查看器都应该能够显示所有 SVG 1.1 Tiny/Basic 内容（根据规范），可能还有 Illustrator 生成的所有 SVG 1.2 Tiny 内容。

Fontsnote: if you don't have any text in your image this setting doesn't matter.

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

• Adobe CEF: never use this option of you intend to display it in browsers. It's Adobe's way of embedding fonts in SVG files, as far as I know this is only supported by Adobe's SVG viewer plugin.

• SVG: this embeds the font as SVG, which is not supported by Firefox, but is a good option if you intend to support only mobile devices (which usually run webkit).

• Create outlines: you will want to do this most of the time, unless you have a large amount of text. If you have a large amount of text you will want to embed the font with WOFF but you will have to do this by hand.

• Adobe CEF：如果您打算在浏览器中显示它，请不要使用此选项。这是 Adob​​e 在 SVG 文件中嵌入字体的方式，据我所知，这仅受 Adob​​e 的 SVG 查看器插件支持。

• SVG：这会将字体嵌入为 SVG，Firefox 不支持它，但如果您打算仅支持移动设备（通常运行 webkit），这是一个不错的选择。

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

Subsetting:

子集：

• None: this will negate the previous setting and will not embed any font, if you don't care that the font falls back to some other font in the user's computer choose this.

• Only Glyphs used: you will want this most of the timeif you choose to embed the font. It only embeds the characters used so it doesn't inflate your file size.

• [rest of subsetting]: this is fairly clear, you can choose to include the entire font or subsets of it. It is only useful if your SVG is dynamic and the text might change based on user input.

• 无：这将否定之前的设置，并且不会嵌入任何字体，如果您不关心字体回退到用户计算机中的其他字体，请选择此项。

• 仅使用 Glyphs：如果您选择嵌入字体，大多数情况下您会想要这个。它只嵌入使用的字符，因此它不会增加您的文件大小。

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

Images: this only matters if you are including bitmap images

图像：这仅在您包含位图图像时才重要

• Embed: this is usually what you want, it encodes the image as a data uri so that you just upload one file instead of the svg file with it's companion bitmap images.

• Link: use this only if you have several svg files that reference one bitmap file (so it's not downloaded every time it renders the svg file).

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

• 链接：仅当您有多个引用一个位图文件的 svg 文件时才使用它（因此它不会在每次渲染 svg 文件时下载）。

Note that linked bitmap images won't display if the SVG is displayed through the <img>tag, because imgdoesn't allow loading external resources. Furthermore: webkit has a bug that does not display bitmap images within svg files even if you embed them. In short: use a plain <svg>tag if you intend to embed or link bitmap images, don't use <img>.

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

Preserve Illustrator Editing Capabilities

保留 Illustrator 编辑功能

I prefer to save an .ai file as my source image, and to think of the SVG file as an Export for webfeature. That way you focus on reducing file size and have a pristine copy of your vector file with all the editing capabilities. So don't choose this.

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

Decimal Places

小数位

The default 3is a sane setting and you can mostly forget about it.

默认设置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.

然而，如果你有一个非常复杂的路径，有很多点，将这个设置降低到 1 甚至 0 将大大减少文件大小。但是你必须小心，因为贝塞尔曲线段对这个设置非常敏感，它们可能看起来有点扭曲。因此，如果您降低此设置，请始终确保它在浏览器中看起来可以接受。

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.

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

Optimize for Adobe SVG Viewer

针对 Adob​​e SVG 查看器进行优化

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.

Adobe SVG Viewer 是浏​​览器本身不支持 SVG 时的浏览器插件。我不知道它是做什么的，但它无关紧要，不要检查这个。

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

这会为您的 SVG 文件增加元数据膨胀，除非您打算稍后在 Illustrator 中打开您的 SVG 文件并找到您的切片（如果您有切片），请不要选中此项

Include XMP

包括 XMP

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

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

Output fewer <tspan>elements

输出更少的<tspan>元素

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 tspanelements 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.

如果您没有文本，这将显示为灰色。SVG 不支持字距调整表，因此，某些字符序列看起来间距太大，即AVA. Illustrator 通过添加tspan元素和稍微调整字符位置来解决。这给文件增加了一些膨胀，除非您更关心文件大小而不是文本外观，否则不要检查此项。

Use <textpath>element for text on a path

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

This will be grayed out if you don't have text on a path. Browsers tend to vary a lot when it comes to placing text on a path, so Illustrator tries to be helpful by applying the rotation and position to the character instead of leaving the job to the browser. do not check this unless you care more about file size than text appearance.

如果路径上没有文本，这将显示为灰色。在将文本放置在路径上时，浏览器往往会有很大差异，因此 Illustrator 试图通过将旋转和位置应用于角色而不是将工作留给浏览器来提供帮助。除非您更关心文件大小而不是文本外观，否则不要检查此项。

---

---

In general, I'd recommend you to look into SVG in general, you will find that it looks a lot like HTML and it allows you to tweak things that cannot be done within Illustrator.

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