SVG生产的Adobe Illustrator工作流程

Previously I explored manually optimizing an SVG file by tweaking settings and cleaning up code by hand. While that’s a good thing to know – and very often a final necessary step – it’s more likely that most designers and developers will be building and exporting their SVG work from a vector illustration tool such as Adobe Illustrator.

以前，我探索了通过调整设置和手动清理代码来手动优化SVG文件的方法。 尽管知道这是一件好事，而且通常是最后一个必要步骤，但大多数设计人员和开发人员很有可能会通过Adobe Illustrator等矢量插图工具来构建和导出其SVG工作。

In this article, I’ll look at setting up and working with Illustrator with the goal of producing useful, editable and highly compressed SVG graphics. In a follow-up piece, I’ll detail the best export options, including some that are exclusive to the latest version of Creative Cloud.

在本文中，我将介绍设置和使用Illustrator的目的，以生成有用，可编辑和高度压缩的SVG图形 。 在后续文章中，我将详细介绍最佳的导出选项，包括一些最新版本的Creative Cloud独有的选项。

Set Up Preferences & Artboard 设置首选项和画板

choose the right reference system for your work. While vector shapes are indifferent to size and scale, it’s logical to use measurements that mirror the purpose of the SVG file. In most cases, that will mean pixels, especially if you will be integrating bitmap graphics into your SVG . 选择适合您工作的参考系统 。 尽管矢量形状对大小和比例无所谓，但使用反映SVG文件目的的度量是合乎逻辑的。 在大多数情况下，这将意味着像素，尤其是在将位图图形集成到SVG中的情况下。

For work that also has a print component, or when making a precise illustration of a real-life object, you might choose inches, centimeters or millimeters. Set your choices in Illustrator’s Units preferences panel.

If the SVG will be used responsively, the dimensions ultimately don’t matter, but it’s important to understand that whatever size you choose for your artboard will become the area of the SVG viewBox by default. Making your SVG “canvas” too large will leave a tremendous amount of whitespace when the file is displayed, no matter what measurement system you’re using.

如果将SVG以响应方式使用 ，则尺寸最终将无关紧要，但重要的是要了解， 为画板选择的任何尺寸默认都会成为SVG viewBox的区域 。 无论您使用哪种测量系统，显示文件时将SVG“画布”设置得太大都会留下大量空白。

Your decision at this point is reversible: see “just before export” at the bottom of this article if you need to make any changes to your artboard.

As the SVG will usually be shown on screen, and CSS doesn’t yet support CMYK, it makes sense to select RGB mode for color. Since we are dealing with XML elements, it also makes sense to identify objects by their ID.

由于SVG通常会显示在屏幕上，而CSS尚不支持CMYK，因此选择RGB模式作为颜色是有道理的。 由于我们正在处理XML元素，因此通过对象ID标识对象也很有意义。

Use naming conventions 使用命名约定

data数据 CSS, CSS ， JavaScript, or some other means, you will need a way of identifying the objects you create. For that reason, it’s important that you remember to JavaScript或其他方法来处理这些数据，则需要一种识别所创建对象的方法。 因此，记住在创建每个相关对象时要为它 name each relevant object as you make it. That name – lowercase, without any spaces – will become the element’s ID when the illustration is saved as SVG. If you don’t name the objects now, you can do so later, but it’s usually much easier to create these references during visual editing. 命名是很重要的。 当插图另存为SVG时，该名称-小写字母，没有任何空格-将成为元素的ID。 如果您现在不命名对象，则可以稍后再命名，但是在可视化编辑过程中创建这些引用通常要容易得多。

Simplify 简化

fewest possible number of points to create a shape最少可能数目来创建形状 Smooth and 平滑和 Simplify tools ( 简化”工具(“ Object / Path / Simplify) as you work, reducing the number of points and keeping things manageable. 对象/路径/简化” )是一个好主意，可减少点的数量并使事物易于管理。

Avoid filters, as Adobe Illustrator doesn’t yet translate them well into SVG. Similarly, blending modes aren’t yet supported; don’t use Multiply, Dissolve, etc. Given time you will be able to add blend modes and filters via CSS to SVG, but at the moment Adobe Illustrator doesn’t export the code to do so.

避免使用过滤器 ，因为Adobe Illustrator尚未将它们很好地转换为SVG。 同样，尚不支持混合模式。 不要使用Multiply，Dissolve等。给定的时间，您将可以通过CSS将混合模式和过滤器添加到SVG，但是目前Adobe Illustrator不会导出代码来这样做。

Don’t stroke elements or text if you don’t have to: a stroke (even one that merges with its background) takes twice as long to draw, due to the fact has two edges. Again, it’s possible to fix this later if you’ve forgotten to do so. (See “Merge Shapes”, below).

如果不需要，不要描边元素或文本 ：描边(即使是与背景合并的描边)由于需要两条边，因此绘制时间要长两倍。 同样，如果您忘记这样做，则可以稍后进行修复。 (请参见下面的“合并形状”)。

Try to keep polygons and circles as geometrical objects, and avoid breaking them into paths. A polygon takes up less file space, and will render faster.

尝试将多边形和圆形保持为几何对象 ，并避免将其分成路径。 多边形占用较少的文件空间，并且渲染速度更快。

Create a background, if necessary 必要时创建背景

SVG drawings are transparent: they don’t have a root “body” element that you can fill with color. If you want to create the appearance of a background color in a SVG document, you have three choices:

SVG图纸是透明的：它们没有可以填充颜色的根“ body ”元素。 如果要在SVG文档中创建背景色的外观，则有以下三种选择：

1. If the SVG is used as an image on a web page, provide a background-color for the image in CSS.

   如果将SVG用作网页上的图像，请在CSS中为该图像提供background-color 。

2. Draw a rectangular shape that takes up the entire Illustrator artboard and fill it with color. Send the layer to the back of the Illustrator document, making the background part of the SVG itself.
   绘制一个占据整个Illustrator画板的矩形，并用颜色填充它。 将图层发送到Illustrator文档的背面，使背景成为SVG本身的一部分。

3. If using SVG code directly on an HTML page, you can style the <svg> root element like anything else. For example, in this neat lightbuld SVG by Oliver Knoblich:

   如果直接在HTML页面上使用SVG代码，则可以像其他样式一样设置<svg>根元素的样式。 例如，在Oliver Knoblich的这个整洁的灯泡SVG中：

svg { border-radius: 50%; background: #999; }

Merge shapes 合并形状

merging elements into a single shape is a very good idea. 将元素合并为单个形状就是一个很好的主意 。

To do so, select all the shapes you wish to join, and choose Object / Expand… from the menu. Expand both fills and strokes. With the shapes still selected, bring up the Pathfinder tool (Window / Pathfinder) and choose Unite. This will marge the selected elements into a single shape with a shared color and no stroke.

为此，请选择您要连接的所有形状，然后从菜单中选择“ 对象/扩展 ”。 展开填充和描边。 在仍然选择形状的情况下，调出“路径查找器”工具(“ 窗口/路径查找器”)并选择“ 合并” 。 这会将选定的元素变形为具有共享颜色且没有笔触的单个形状。

Decide how you’re going to treat your text. 确定如何处理文本。

If you value precision over editability – for example, in a logo – select your text and choose Type / Convert to Outline, breaking it into pure vector shapes. You’ll also have the option of converting type when you export the SVG file.

如果您重视精度而不是可编辑性 (例如在徽标中)，请选择文本，然后选择“ Type / Convert to Outline ，将其分成纯矢量形状。 导出SVG文件时，您还可以选择转换类型。

Crop The Artboard 裁剪画板

1. Select everything that should be included in your SVG.
   选择应包含在SVG中的所有内容。

2. Select Object / Artboards / Fit to Selected Art from the menu bar.

   从菜单栏中选择“ 对象/画板/适合选定的艺术品 ”。

Alternatively, use the Artboard tool to adjust the size.

或者，使用画板工具调整大小。

Following these guidelines will produce the best results in your SVG files, and enable decent compression settings when you export from Illustrator, which we will look at next.

遵循这些准则将在SVG文件中产生最佳效果，并在从Illustrator导出时启用适当的压缩设置，我们将在下面进行介绍。

翻译自: https://thenewcode.com/821/Adobe-Illustrator-Workflow-For-SVG-Production