在 Illustrator 中绘图时的 SVG 优化实践

平面设计 adobe-illustrator svg 动画片 优化
2022-02-26 12:26:27

我注意到在将文件从 AI 导出到 SVG 时，会创建很多不必要的代码，然后我意识到这些代码当然可以优化。

发现了这个有趣的 SVG 优化器工具：

http://petercollingridge.appspot.com/svg_optimiser

我还发现以下做法可能会提高您最终动画的性能：

  • 在 SVG 中使用预定义的形状，例如圆形、椭圆形、正方形、矩形和多边形，而不是路径。

  • 使用路径时减少曲线和拐角的数量。

  • 将 AI 导出到 SVG 时，选择“表示属性”选项，以便样式位于 SVG 标记内，而不是将它们链接到外部 CSS 文件。

我现在的问题是：

在 Illustrator 中工作时必须考虑哪些其他方面才能提高 SVG 动画的最终性能？

谢谢。

2个回答

以下是您在 Illustrator 中可以执行的一些简单操作，以保持文件较小：

  • 将尽可能多的形状合并在一起。
  • 如果您必须使用路径而不是形状，则扩展路径。
  • 将小数位数减少到 1。将图像保存为 SVG 时，可以在 Illustrator 的高级选项中找到。
  • 也不保留 AI 编辑功能。
  • 避免使用任何类型的 Illustrator 或 Photoshop 效果。

我在 HandsomePhil 的回答中支持所有内容，并补充：

  • 如果您在使用 SVG 时不需要引用组，请取消组合项目。这将消除额外的<g>标签。
  • 限制颜色的数量。
  • 使画板适合艺术品边界（对象 > 画板 > 适合 CS5 中的艺术品边界）。
其它你可能感兴趣的问题
上一篇素描3 | 是否可以创建一个文本表？ 下一篇为客户提供品牌资产的最佳做法是什么？