25: 在 Illustrator 中手动优化 SVG

此视频没有,但这里有一些关于在 Adobe Illustrator 中手动优化 SVG 的有用信息,超出了应用程序自动执行的操作。

有时你想要使用的 SVG 在 Illustrator 中看起来完美无缺,但它并不完全符合你在网络上想要使用它的方式。

我们在这个视频中查看的一件事是一个简单的形状,它看起来像一个单一的形状,但实际上是四个形状叠加在一起。为了简化它,我们只需选择所有形状,然后使用 Illustrator 中的路径查找器工具将它们组合成一个单一的形状。我们可以在代码中立即看到它的反映。有时,在 Illustrator 和代码编辑器中同时打开 SVG 文件很有趣,这样当你保存它时,就可以看到它对代码做了什么。

路径查找器非常适合手动优化形状 - 值得了解这些按钮的作用 - 以及按住 Option 键时它们的作用。

SVG 文件的大小在很大程度上取决于形状中存在的点数。还有其他因素,但这是最重要的。我们在这个视频中查看的另一件事是使用 Illustrator 的简化路径功能来减少一些纹理状形状上的点数,从而大大降低文件大小。

另一件需要注意的事情:复合路径可能很有用。两个完全独立的形状仍然可以是一个路径。就像,真正的一个。语法允许基本上“拿起笔,将其移动到其他地方,绘制新内容”。因此,当你创建复合路径在 Illustrator 中(例如多个独立的形状,对象 > 复合路径 > 创建)这就是它的输出方式。可以导致简化的/优化的 SVG 输出。