SVG导出设置为Adobe Illustrator

If you’ve created an illustration that follows the guidelines in my article on how to master Adobe Illustrator workflow for SVG production, you should now have a well-organized vector image ready for export.

如果您已经创建了一个遵循我如何掌握SVG生产的Adobe Illustrator工作流程的文章中的指导的插图 ，则现在应该准备好组织良好的矢量图像以进行导出。

Illustrator has long had strong support for SVG; last week Adobe added some new options to Illustrator CC, which I’ll include here. Whichever version you are using, there are three simple steps to exporting an SVG file from Illustrator:

Illustrator长期以来一直对SVG具有强大的支持； 上周Adobe在Illustrator CC中添加了一些新选项，我将在此处包括这些选项。 无论使用哪种版本，都可以通过三个简单的步骤从Illustrator中导出SVG文件：

步骤1：建立备份 (Step 1: Create A Backup)

Save a copy of your document in .ai format. While Illustrator does a good job of importing and exporting SVG files, the vector format does not yet have all the features of a native Adobe Illustrator document. If you don’t want to lose those details, save the illustration as an .ai file before proceeding.

以.ai格式保存文档的副本。 虽然Illustrator在导入和导出SVG文件方面做得很好，但矢量格式尚未具有Adobe Illustrator本机文档的所有功能。 如果您不想丢失这些细节，请在继续操作之前将插图另存为.ai文件。

步骤2：选择选项 (Step 2: Select Options)

Choose

File / Save As and choose the SVG format. (Don’t worry about .svgz, which I will address later in this series). Somewhat oddly, you have to click on Save before Illustrator will let you choose options for the file.

文件” /“另存为”，然后选择SVG格式。 (不必担心.svgz ，我将在本系列的后面部分介绍)。 有点奇怪， 在 Illustrator允许您选择文件选项之前 ，您必须单击“ 保存 ”。

Basic export options remain consistent across all Illustrator versions. As a general rule, so should your settings:

在所有Illustrator版本中，基本导出选项均保持一致。 通常，您的设置也应如此：

• SVG 1.1 Profile
  SVG 1.1配置文件
• SVG Font type
  SVG字体类型
• No subsetting
  无子集
• Linked images
  链接图片

These settings assume that you will treat the SVG much as you would an HTML document: images and fonts will be referenced as external files, rather than encoded and embedded in the document itself. While the other options have their uses, these settings also have the advantage of producing the smallest possible file size.

这些设置假定您将像对待HTML文档一样对待SVG：图像和字体将作为外部文件引用，而不是编码和嵌入到文档本身中。 在使用其他选项的同时，这些设置还具有产生尽可能小的文件大小的优点。

If you’re using Illustrator CS6 or earlier, you’ll see an option for Decimal Places. If the Illustrator artboard is measured in pixels, set the value to 1. (In CC, the value is already 1, and hidden elsewhere). If measured in inches or other units, you’ll want a decimal accuracy of 3.

如果您使用的是Illustrator CS6或更早版本，则将看到小数位数选项。 如果Illustrator画板以像素为单位进行测量，则将该值设置为1 。 (在CC中，该值已经为1，并隐藏在其他位置)。 如果以英寸或其他单位度量，则十进制精度应为3。

Aside from the ability to see the generated SVG code in an editor (click SVG Code… at the bottom of the dialog window), this is as far as you can go using CS6 or earlier, and you should skip ahead to Step 3. If you’re using Illustrator CC, read on…

除了可以在编辑器中查看生成的SVG代码(单击对话框窗口底部的SVG代码… )之外，还可以使用CS6或更早版本，并且应该跳至步骤3。您正在使用Illustrator CC，请继续阅读...

步骤2a：Illustrator CC选项 (Step 2a: Illustrator CC Options)

Last week Illustrator CC added a few new options for SVG export. If you’ve upgraded, you can see them by clicking

More Options in the bottom left corner of the Save As SVG dialog window.

另存为SVG”对话框窗口左下角的“ 更多选项”来查看它们。

It’s not often appreciated that presentational attributes can be referenced as styles in SVG. This makes the elements easier to modify and animate, while also reducing repetition and file size. Illustrator CC provides this encoding after selecting Style Elements for the CSS Properties value. As a rule I’d choose this setting but leave other options alone, unless you wanted to add metadata to the file (the Include XMP option).

在SVG中可以将表示属性引用为样式的做法并不常见。 这使元素更易于修改和制作动画，同时还减少了重复和文件大小。 在为CSS属性值选择样式元素之后，Illustrator CC提供此编码。 通常，我会选择此设置，但不要理会其他选项，除非您想向文件添加元数据(“ 包括XMP”选项)。

Illustrator CC also added an option to make the SVG file “responsive”. This is slightly misleading: all the option does is remove the width and height attributes from the SVG root element. The result will be responsive only if you decide to include the file in the context of an HTML <img> tag or CSS background-image property: it will not be responsive if you embed the SVG code directly into your page. (That can happen, but requires a little more work).

Illustrator CC还添加了使SVG文件“响应”的选项。 这有点误导：所有选项所做的就是从SVG根元素中删除width和height属性。 仅当您决定将文件包含在HTML <img>标记或CSS background-image属性的上下文中时，结果才会响应：如果将SVG代码直接嵌入到页面中，则结果将不会响应。 (这可能发生，但是需要更多的工作 )。

步骤3：保存文件 (Step 3: Save The File)

When you’re done, save the SVG file in a site folder (assets/svg, for example), together with any linked assets. Just like bitmap images, there are further optimization steps we could take after this point: either by hand, if it was a small file, or via one of the tools I will introduce in next week’s article.

完成后，将SVG文件以及所有链接的资产一起保存在站点文件夹(例如， asset / svg )中。 就像位图图像一样，此后我们还可以采取进一步的优化步骤： 通过手工操作(如果它是一个小文件) ，或者通过我将在下周的文章中介绍的一种工具。

更多资源 (Further Resources)

Val Head has an excellent 11-minute video on YouTube on exporting SVG from Illustrator, with a focus on exporting for animation.

Val Head 在YouTube上有一段11分钟的精彩视频，内容涉及从Illustrator导出SVG的过程 ，重点是导出动画。

翻译自: https://thenewcode.com/823/SVG-Export-Settings-For-Adobe-Illustrator