从Illustrator导出Web的SVG的最佳设置？ [英] Optimal settings for exporting SVGs for the web from Illustrator?

问题描述

我想为网站使用SVG徽标，以使其在所有设备的响应式设计上看起来不错。

但由于。）

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

src =

$ b https://i.stack.imgur.com/3znoL.pngalt =enter image description here>

谢谢！

PS将有一个后备alpha-PNG选项，但我想要的SVG到
被尽可能最好地支持。 （想一想，一个后退
选项 - 像一个JPG - 在这种情况下可能是最好的服务，因为alpha-PNG本身需要一个旧的IE的解决方案。）

更新：还有更多可以配置的选项。我不使用文本，所以我看到的唯一相关的是小数位。对于徽标，要显示为最大200x200px（因此在视网膜显示器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内容。

字体：如果您的图片中没有任何文字，此设置不重要。

• Adob​​e CEF：从不使用此选项，打算在浏览器中显示它。




• SVG：这是将字体嵌入到SVG文件中的一种方式SVG（Firefox不支持），但是如果您只打算支持移动设备（通常运行webkit），这是一个很好的选择。




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

子集：

• 无：这将取消以前的设置，




• 只使用字形：任何字体，如果你不关心字体回到用户计算机中的其他字体，如果您选择嵌入字体，您将会希望这是大多数时间。




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

：只有在包含位图图片时才会显示。

• 嵌入： ，它会将图片编码为数据uri，以便您只需使用随附的位图图片上传一个文件，而不是svg文件。




• 链接：

$

如果你有多个svg文件引用了一个位图文件（因此它不会在每次渲染svg文件时下载）注意，如果通过< img> 标签显示SVG，则链接的位图图像将不会显示，因为 img 不允许加载外部资源。此外：webkit有一个错误，不显示位图图像在svg文件中，即使你嵌入它们。简而言之：如果您要嵌入或链接位图图像，请使用平常的< svg> 标记，不要使用< img& code>。

保留Illustrator编辑功能

将.ai文件保存为源图像，并将SVG文件视为 Export for web 功能。这样，你专注于减少文件大小，并拥有所有编辑功能的矢量文件的原始副本。

默认值<$

c $ c> 3 是一个理智的设置，你可以大多忘记它。

但是，如果你有一个真正复杂的路径，有很多点降低这个设置为1或甚至0将大大减少文件大小。但是你必须小心，因为bezier段对这个设置非常敏感，他们可能看起来有点扭曲。所以如果你降低这个设置总是确保它在浏览器中可以接受。

编码

字符编码背后的解释相当技术性，关注svg文件与文本。 您最需要的编码是UTF-8 ，请勿更改此设置，除非您知道自己正在做什么。

$ b

优化Adobe SVG查看器

Adob​​e SVG查看器是一个浏览器插件次的浏览器不支持SVG本机。我不知道它的作用，但它是不相干的，不检查这。

包括切片数据

这会向您的SVG文件添加元数据膨胀，除非您打算稍后在Illustrator中打开SVG文件并查找切片（如果有）不检查此

更多元数据该文件，即可在XMP上阅读此处。 不检查此

输出少于< tspan> / strong>

如果您没有文字，这个项目会显示为灰色。 SVG不支持字距调整表，因此，某些字符序列看起来太隔开，即 AVA 。 Illustrator通过添加 tspan 元素并稍微调整字符位置。这会给文件增加一点膨胀，除非您更关心文件大小而非文本外观

。

< textpath> 路径上的文本元素

在路径上没有文本。浏览器在将文本放置在路径上时往往会有很大变化，因此Illustrator会尝试通过将旋转和位置应用于字符而不是将作业留给浏览器来帮助。 除非您更关心文件大小而非文字外观

，否则不要选中此项。

---

，我建议你一般来看看SVG，你会发现它看起来很像HTML，它允许你调整不能在Illustrator中做的事情。

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

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?

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

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

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

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?

解决方案

SVG profiles

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

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.

Fonts note: 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.

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 time if 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.

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

Note that linked bitmap images won't display if the SVG is displayed through the <img> tag, because img doesn'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>.

Preserve Illustrator Editing Capabilities

I prefer to save an .ai file as my source image, and to think of the SVG file as an Export for web feature. 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.

Decimal Places

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

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

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.

---

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.

这篇关于从Illustrator导出Web的SVG的最佳设置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！