引言
SVG（可缩放矢量图形）是一种基于 XML 的图形格式，由于其可无损缩放和高清晰度显示等优点，如今已成为 Web 设计中经常使用的一种图形格式。然而，SVG 文件大小较大，却又不能简单粗暴地对其进行压缩，这就给前端的页面性能带来了挑战。
不过，幸运的是有些工具可以帮助我们对 SVG 文件进行优化，例如 zolmeister/gulp-svgo 这个 npm 包。本文将介绍如何使用该包来优化你的 SVG 图片。
基本概念
gulp
gulp 是一个自动化构建工具，可以帮助我们建立前端工作流。
gulp 的核心思想是流（stream），即数据在一定程度上仍然组合在一起，类似于链式调用，而不是在内存中构建大量文件。通过将原来需要执行的一系列任务分解为单个任务和工具，然后通过将它们组合成工作流来简化和优化前端开发。
由于本文假定您对 gulp 有一定的了解，故不再对它进行深入讨论，如需深度学习可以参阅 gulp 官方文档。
svgo
svgo 是一款基于 Node.js 的 SVG 优化器，可以帮助我们清除这些 SVG 文件中的冗余信息，以便把它们转化为更小、更可靠的文件。更多关于 svgo 的信息可以参阅它的 官方 GitHub 仓库。
zolmeister/gulp-svgo
zolmeister/gulp-svgo 是 gulp 实现版 svgo 的一种可选实现，可以帮助我们通过 gulp 和 svgo 以编程方式优化 SVG。其特点包括：
- 容易为 gulp 创建任务。
- 可以用于优化 SVG 文件，支持所有 svgo 设置。
- 可以通过 gulp 的事件处理程序和日志记录改善工作流程。
更多关于 zolmeister/gulp-svgo 的使用请参考其 官方 GitHub 仓库。
安装
如果您还未安装 gulp 和 zolmeister/gulp-svgo，可以通过 npm 进行安装：
npm install --save-dev gulp npm install --save-dev zolmeister/gulp-svgo
注意这里的 --save-dev 参数。它表明 gulp 和 zolmeister/gulp-svgo 都是您开发的依赖关系，并且应该包含在 package.json 的 devDependencies 选项中。
使用
创建 gulp 任务
首先，您需要创建一个 gulp 任务，以在工作流程中整合 zolmeister/gulp-svgo 。以下是一个示例 gulp 任务：
-- -------------------- ---- -------
---- --------
----- ---- - ----------------
----- ---- - --------------------------------
----------------------- -- --
----------------------------
------------
-------- -
- -------------- ----- --
- -------------------------- - ----------- -- ------ ---------------------------- -- - --
- ----------------------- - ---------- ---------- - --
- ------------- ---- --
- ----------- ----- --
- -------------- ---- --
- --------------- ---- --
- --------------- ---- --
- ------------ ---- --
- ----------- ---- --
- ------------ ----- --
-
------------ -
------ -
--------
----------
-------
------------
---------
---------------
-----------------
------------------
--------------------
--
--
--
- ------------------ ---- --
- -------------------- ---- --
- ----------------- ---- -
-
---
----------------------------
--上述代码的意思是，创建了一个名为 svg-minify 的 gulp 任务，用于在 src/svg/ 目录下查找所有 SVG 文件，然后通过 zolmeister/gulp-svgo 插件来进行优化，最后将优化后的文件导出到 dist/svg/ 目录下。
配置 zolmeister/gulp-svgo 插件
在 gulp 任务中，您可以使用任何支持的 svgo 设置来优化 SVG 文件大小。例如，上面的示例中使用了各种设置，包括 removeViewBox、addAttributesToSVGElement、addClassesToSVGElement、cleanupAttrs 等等。
具体的 svgo 插件的使用可参阅 svgo 的文档。
优化 SVG 文件
最后，通过 gulp svg-minify 命令即可运行该 gulp 任务进行 SVG 文件优化。
结论
本文简要介绍了 zolmeister/gulp-svgo 插件用例和优化 SVG 文件流程的方式。使用该插件可以让我们更加方便地对 SVG 文件进行优化，从而减轻前端性能负担，提升 Web 页面性能。
除了 zolmeister/gulp-svgo 插件，还有很多其他的优化 SVG 文件的工具，如 svgo 和 SVGOMG 等等，以上仅供参考。
我希望本文能对您对 zolmeister/gulp-svgo 插件使用有所启发，帮助您更好地优化 SVG 文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60058ac481e8991b448ed3a5