什么是 fis-optimizer-svgo
fis-optimizer-svgo 是一个基于 svgo 的图片压缩插件，可以用于压缩 SVG 图片。它能够将 SVG 图像文件中无用的元素和元素属性移除，并对图像进行优化压缩，从而减小 SVG 图片的文件大小，并提高 SVG 图像在浏览器中的加载速度。
安装
fis-optimizer-svgo 可以通过 npm 安装，命令如下：
npm install -g fis-optimizer-svgo
使用
在项目的配置文件中添加 fis-optimizer-svgo 的配置：
-- -------------------- ---- -------
--------------------------------------- --------
---------------------------------------- -
-------- -
-
----- ----------------
------- -----
--
-
----- ---------------
------- ----
-
-
---这段配置中，我们将 fis-optimizer-svgo 的配置文件关联到了 svg。
在 settings.optimizer.svg.plugins 中，我们设置了 svgo 的插件，它们都可以通过 npm 安装得到。
下面是一些常用的插件及其说明：
- removeEditorsNSData：移除与编辑器相关的元数据。可选值：true|false，默认为 true。
- removeOffCanvasPaths：移除离屏路径。可选值：true|false，默认为 true。
- cleanupIDs：删除没用的和重复的
id属性以及使用该id的引用。可选值：true|false，默认为 true。 - removeHiddenElems：删除所有的隐藏元素。可选值：true|false，默认为 true。
还有更多的插件可以在 svgo plugins 中找到。
示例代码
下面是一个使用 fis-optimizer-svgo 的示例。我们将一张 SVG 图片中的 id 属性以及 comments 属性进行清理：
-- -------------------- ---- -------
-- ----
--------------------------------------- --------
---------------------------------------- -
-------- -
-
----- -----------------
------- ----
--
-
----- -------------
------- ----
-
-
---
-- ----
----- ------ - -
---- ---------------------------------- ---------- - --- -----
------- ------- ------- ------ -------------
---- -------- ---
--------
----- ---- - --- -----------------------------------------------
--------------------------------- -- -
-------------------------
-------------- -- -
-------------------
--经过压缩后，上面的 SVG 图片将只剩下一个圆，且 id 属性已被清理，comments 属性也被删除了。
总结
fis-optimizer-svgo 是一个非常优秀的 SVG 压缩工具。它可以帮助我们优化 SVG 图像文件的大小，提高 SVG 图像在浏览器中的加载速度。通过本文的介绍，相信大家对于如何使用 fis-optimizer-svgo 的方法已经有了一定的了解，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea081e8991b448dbf4b