SVG 是一种使用 XML 格式的矢量图形语言，被广泛地应用于 Web 开发中。但是，SVG 图片的体积并不小，而且很难压缩。为了解决这个问题，我们可以使用 npm 包 svg-optimizer 来对 SVG 文件进行优化，从而减小文件体积，提高页面加载速度。
安装 svg-optimizer
首先，我们需要安装 svg-optimizer。可以在终端中输入以下命令进行安装：
npm install svg-optimizer --save-dev
使用 svg-optimizer
安装完 svg-optimizer 之后，我们就可以开始使用它。svg-optimizer 提供了一个命令行工具和一个 Node.js API。下面，我们分别介绍如何使用这两种方式。
命令行工具
svg-optimizer 的命令行工具可以用来对单个 SVG 文件或一个目录下的所有 SVG 文件进行优化。可以在终端中输入以下命令来使用：
svg-optimizer <input> [options]
其中，input 表示待优化的 SVG 文件或目录，options 表示可选参数。常用的参数有：
-o, --output指定输出目录，默认为当前目录。-q, --quiet静默模式，不输出日志信息。-s, --plugins指定要使用的优化插件，多个插件用逗号分隔。-c, --config指定配置文件的路径。
以下是一些使用示例：
对单个 SVG 文件进行优化：
svg-optimizer image.svg
对一个目录下的所有 SVG 文件进行优化：
svg-optimizer images/
将优化后的文件输出到指定目录，使用静默模式：
svg-optimizer images/ -o output/ -q
使用指定的插件：
svg-optimizer images/ -s svgo,svgo-plugins
Node.js API
如果你需要在代码中使用 svg-optimizer，可以通过以下方式来调用它：
-- -------------------- ---- -------
----- ---- - --- ------
-------- - -- ----
- ------------ ---- --
- ----------------- ---- --
--
---
------------------------------------ -- -
------------------------- -- ---- --- ----
---上面的代码中，我们首先创建了一个 SVGO 实例，并指定了两个优化插件（removeTitle 和 removeDimensions）。然后，我们调用了 SVGO 的 optimize 方法，将待优化的 SVG 文件内容作为参数传递进去。
优化后，optimize 方法将返回一个 Promise 对象，通过 then 方法获取到优化后的 SVG 文件内容。在以上示例中，我们将其输出到控制台。
使用优化后的 SVG 文件
得到优化后的 SVG 文件之后，我们就可以把它用在网页中了。在 HTML 代码中，我们可以使用<img>标签或者<svg>标签来引入这个 SVG 文件。
使用<img>标签：
<img src="image.svg" alt="" />
使用<svg>标签：
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <use xlink:href="image.svg#svg"></use> </svg>
在使用 SVG 文件时，我们需要注意它的体积大小和加载速度。优化后的 SVG 文件可以减小文件体积，并且可以在保持图像质量的前提下加快加载速度。
总结
通过使用 npm 包 svg-optimizer，我们可以优化 SVG 文件，缩小文件体积，提高页面加载速度。svg-optimizer 提供了命令行工具和 Node.js API 两种使用方式，可以根据具体需求进行选择。在使用 SVG 文件时，我们还需要注意文件大小和加载速度，以便达到最佳优化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562da81e8991b448e03d7