使用Adobe Illustrator制作SVG的操作流程_jQuery之家-自由分享jQuery、html5、css3的插件库

网海拾贝网络猪 2015-05-04

展开全文

在这篇文章中，我们将讲解如何设置和使用Adobe Illustrator来快速高效的压缩优化SVG图像。

上一篇文章中，我们一起研究了手动优化SVG文件的方法。然而大部分的前端设计者和开发者都是通过矢量图软件（如Adobe Illustrator）来制作制作和导出它们的SVG文件的。

在这篇文章中，我们将讲解如何设置和使用Adobe Illustrator来快速高效的压缩优化SVG图像。

设置配置参数和画板

Illustrator单位配置面板

第一部是要为你的工作选择正确的配置参数。大多数时候，我们都使用像素为单位，尤其是你想将位图合成到SVG矢量图中的时候。

如果是为了制作打印内容或某种现实生活中的需要精准尺寸的东西，你可能需要英寸、厘米或毫米为单位。在Illustrator的单位参数配置面板中设置你需要的尺寸单位。

如果你要制作响应式的SVG图像，最终的图像尺寸并不重要，重要的是你要知道你为画布选择什么尺寸，那里将成为默认的SVG视图区。如果你的SVG画板设置的太大，在显示图像的时候将会留出很大的空白区域。

Illustrator新建面板

如果留出的空白区域太大也有解决的方法，这里在文章的最后给出解决的方法。

SVG图像通常是用于屏幕显示的，还有CSS不支持CMYK模式，所以在选择颜色模式时要选择RGB模式。由于我们是使用XML来处理元素，所以识别对象的ID也是有意义的。

使用命名规范

记住：你在制作SVG的时候不仅仅是在制作图像，而且还是在创建数据。如果你想在以后通过CSS或javascript来操作这些数据的话，你需要某种方法来标识好你创建的数据。异常，给每一个相关的对象取一个名字是非常重要的。名称要小写，没有任何的空白符，这个名称在导出SVG文件的时候将成为元素的ID。如果你现在不为对象取名字，你也可以在后面来做这个动作，但是在编辑图像的时候取好名称是最好最不容易出错的方法。

简化

最为一个规则，我们应该使用最少的点来创建矢量图像，这将产生最佳的矢量图。可以使用 Smooth 或 Simplify 工具（对象/路径/简化）来减少矢量图的点数。

应该避免使用 filters，Adobe Illustrator 目前还没有能很好的将它们转换为SVG。同样的blending（混合）模式也没有被很好的支持。在后期你可以通过CSS来为SVG添加blend（混合）模式和 filters，

非不得已不要为元素或文本使用描边效果。一个描边效果（即使是合并背景）会绘制两次，因为它有两条边。如果你这么做了，也有补救的方法。（往下看：合并图像）

尽量保持多边形和圆形为几何对象，不要将他们转换为路径。一个多边形占用较少的文件空间，使渲染速度加快。

创建背景图像

SVG绘制的都是透明图像，它们没有一个body元素可以让你来填充颜色。如果你想在SVG文件中创建一个背景图像，你可以有三个选择：

如果SVG图像是被用来作为页面中的一张图片，你可以在CSS中为它提供一个background-color。
画一个和画板一样大小的矩形，为它填充一个颜色。然后把这一层放置到Illustrator文档的最底层，用它来作为背景层。
如果实在HTML页面直接使用SVG代码，你可以给<svg>根元素添加样式。例如下面的代码：
1
svg { border-radius: 50%; background: #999; }