我使用Inkscape，一个免费的开源矢量图形编辑器来制作我的SVG。最初，我刚刚使用默认的Inkscape格式保存了我的SVG，这种格式称为Inkscape SVG。结果证明并不理想......

我们以圆的SVG为例：

这是一个简单图标的Inkscape SVG标记：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>image/svg+xml

这基本上有2 KB的大小。

最终(阅读：经过一段令人尴尬的长时间)，我发现Inkscape有一个优化的SVG输出格式。这更合理 - 使用Inkscape的默认设置，我优化的SVG标记是：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

尽管如此，这只是387个字节，只是为了绘制一个24x24的圆圈。当然这不是道路的终点，对吧......？

我们的圆圈SVG的最终演变是通过svgo传递的结果，svgo是一种专门用于优化SVG 的流行Node.js工具：

102个字节！那更像是它。

以下是渲染时所有3个版本的圆形SVG的外观：

它们都只是简单的黑色圆圈，但第三个占用的空间比第一个小20倍。缩小您的SVG！

我如何缩小SVG

当然，我可以在我想要使用的任何SVG上手动运行svgo，但我真正想要的是一种在构建时优化SVG的方法，因为：

• 谁想要记得手动优化每个SVG？！
• 我想继续使用Inkscape SVG格式，它保留了一些有用的元数据(例如，在下次打开文件时保留会话)。

更多更优质的资讯，请关注我，你的支持会鼓励我不断分享更多更好的优质文章。