什么是 @jdists/svgo
@jdists/svgo 是一个利用 SVG 优化器来对 SVG 文件进行优化的 npm 包。它可以帮助前端开发人员提高 SVG 文件的性能与质量。
如何安装 @jdists/svgo
你可以使用 npm 来安装 @jdists/svgo：
npm install -g @jdists/svgo
如何使用 @jdists/svgo
你可以使用 @jdists/svgo 的命令行界面来快速对 SVG 文件进行优化。
对单个 SVG 文件进行优化
jdists-svgo input.svg output.svg
上述代码中，input.svg 是需要进行优化的 SVG 文件路径，output.svg 是输出优化后 SVG 文件的路径。
对多个 SVG 文件进行优化
你也可以对目录下所有的 SVG 文件进行批量优化，生成的文件名将自动加上 .min 后缀：
jdists-svgo ./dir
对 SVG 模板进行优化
你可以将 @jdists/svgo 作为一个插件来使用，对 SVG 模板中的各种属性进行优化。
-- -------------------- ---- -------
----- ---------- - ------------------------
----- ---- - ------------
-------- -
------------- ------
----------------- -------
------------------- ------
------------ ------
-
---
----- ------------ - ---------------------------------------- -------- -
-------------------------
---优化示例
下面是一个示例代码，我们将使用 @jdists/svgo 对一个 SVG 图标文件进行优化。
原始 SVG 文件：
<svg width="100" height="100" viewBox="0 0 100 100"> <title>SVG icon</title> <circle cx="50" cy="50" r="50" fill="#ff0000"/> </svg>
使用 @jdists/svgo 优化后的 SVG 文件：
<svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50"/> </svg>
使用 @jdists/svgo，我们成功将 SVG 文件的大小减小了 57%。
结论
@jdists/svgo 是一个快速优化 SVG 文件的工具，对于需要使用大量 SVG 图像的网站和应用程序来说，使用它是非常必要的。在进行 SVG 文件优化时，不要忘记备份原始文件以便进行比较和还原。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671181e8991b448e3572