前言
在前端开发中，我们经常需要处理图片，而优化图片是一项重要的工作。svgo 是一个基于 Node.js 的开源 svg 优化工具，能够优化 SVG 文件，减小文件大小。本文将介绍如何使用 svgo 并讲解其基础以及进阶用法。
安装 svgo
安装 svgo 可以使用 npm 包管理器，打开命令行界面输入以下命令：
npm install -g svgo
基础用法
svgo 的基础用法非常简单，只需要在命令行中输入以下命令，即可对指定的 SVG 文件进行优化：
svgo my.svg -o my.min.svg
其中，“my.svg”是原始的 SVG 文件，而“my.min.svg”则是优化后的文件。
svgo 默认的优化级别是 2，可以通过 -p 参数来指定优化级别。例如，以下命令将优化级别等级设为 3：
svgo my.svg -o my.min.svg -p 3
进阶用法
除了基础用法外，svgo 还支持以下进阶用法。
配置文件
svgo 支持使用配置文件进行高级优化控制。配置文件是一个具有 JSON 格式的文件，在该文件中，我们可以指定任何在命令行中提供的选项。
首先，创建一个名为 .svgo.yml 的配置文件：
# 指定优化级别
plugins:
- name: 'preset-default'
params:
overrides:
removeViewBox: false # 不删除 viewbox 属性
cleanupIDs: false # 不删除未使用的和重复的 IDs将作为参数提供的选项放入这个 yaml 文件中即可。在这个例子中，我们取消了两个默认的优化行为：删除 viewbox 属性和删除未使用的和重复的 IDs，从而提高优化的质量。
接下来在终端中，运行以下指令：
svgo my.svg --config=.svgo.yml -o my.min.svg
这将使用 .svgo.yml 文件中的选项来优化 SVG 文件。
API
svgo 也提供了 API，因此可以从代码中访问它。在 Node.js 中使用 svgo 及其 API 时，需要首先安装它作为项目的依赖项：
npm install svgo
接下来，在代码中引入它：
const SVGO = require('svgo');
const svgo = new SVGO({
// 配置选项
});
const optimizedSvg = await svgo.optimize(originalSvg);这是一个异步方法，等待它返回优化后的 SVG 即可。在使用它之前，我们创建了一个 svgo 实例，并将其传递给原始 SVG。这将返回优化后的 SVG。
gulp 插件
许多前端项目使用 Gulp 任务自动化。svgo 提供了一个名为 gulp-svgmin 的插件，可以将它与这些项目进行集成。
npm install gulp-svgmin --save-dev
安装完成之后，就可以开始使用该插件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -----------------------
------------------------- -- -- -
------ ---------------------------------
--------------
-- ----
---
----------------------------------
---该任务将查找当前项目中所有的 SVG，将它们带入用于优化 SVG 的配置，并将它们输出到 dest() 所指定的目录中。
结论
svgo 是一个强大的工具，可以通过其基础和进阶用法来优化任何 SVG 文件。本文旨在为前端开发者提供一个使用 svgo 的简单和清晰的指南。我们希望读者能够从这篇文章中学到一些东西，为我们的项目提供更快、更轻的 SVG 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40138