在前端开发中，常常需要对 SVG 图片进行优化，以减少文件大小及提高页面加载速度。而 svgo-brunch 这个 npm 包就是帮助开发者快速完成 SVG 的优化工作。本文将详细介绍如何使用 svgo-brunch。
1. 简介
svgo-brunch 是一个用于优化 SVG 文件的 Brunch 插件。它使用 svgo 库来执行 SVG 优化，并自动将结果写回到源文件。
2. 安装
首先，我们需要安装 svgo-brunch。可以通过 npm 进行安装。
npm install svgo-brunch --save-dev
安装完成后，在项目目录下会出现一个 node_modules 目录，其中包含了所有项目的依赖。同时，在 brunch 的 config.js 文件中添加 svgoBrunch 这一插件：
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
----------- -
-------- -
-- ---- ------- ------- ----
-
-
-
-3. 配置
在配置中，我们需要将 svgo 插件的配置传递给 svgoBrunch 插件。
-- -------------------- ---- -------
----------- -
-------- -
--------------- ------
---------------- ------
------------- ------
------------ ------
- ------------ - ------ ---------------------------- - --
- ------------------ ---- --
- ----------------- ---- --
- ------------------ ---- --
- ---------------- ---- --
- -------------- ----- --
- ------------------------ ---- --
- ----------- ---- --
- ----------- ---- --
- ------------------- ---- --
- ----------------- ---- --
- ----------------- ---- --
- -------------------- ---- --
- ------------------- ---- --
- --------------------- ---- --
- -------------------- ---- --
- ------------ ----- --
- ------------ - ------ --------------- - --
- ---------------------- ---- --
- --------------------------- ---- --
- -------------------- ---- --
- ---------- ---- --
- ----------------- ---- -
-
-在这个配置中，我们使用了一些非常流行的 svgo 插件，例如：
removeDoctype: 删除 DOCTYPE；removeComments: 删除注释；removeTitle: 删除 title 标签；removeDesc: 删除 desc 标签；removeAttrs: 删除指定的属性；removeUselessDefs: 删除无用的 defs；removeEmptyAttrs: 删除没有值的属性；removeHiddenElems: 删除隐藏的元素；removeEmptyText: 删除没有内容的文本；removeViewBox: 不删除 viewBox 属性；cleanupEnableBackground: 清理 enable-background 属性；cleanupIDs: 清理 ID 属性；mergePaths: 合并路径；convertShapeToPath: 将形状转换为路径；convertTransform: 转换变换；removeDimensions: 删除尺寸；convertStyleToAttrs: 转换样式；removeRasterImages: 删除光栅图像；cleanupNumericValues: 清理数字值；removeScriptElement: 删除 script 标签；removeXMLNS: 不删除 xmlns 属性；removeAttrs: 删除指定的属性；removeEmptyContainers: 删除没有内容的容器；removeUselessStrokeAndFill: 删除没有内容的描边和填充；cleanupListOfValues: 清理属性值列表；sortAttrs: 排序属性；removeEmptyLines: 删除空行。
当然，我们也可以使用其他 svgo 插件对 SVG 进行进一步优化。
4. 示例
最后，我们给出一个使用 svgo-brunch 优化 SVG 的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ------------ ------------ ------- ------ ---- ----------------- -------- --------- ------- ------------------------- ------- -------
其中，example.svg 是要优化的 SVG 文件。
然后，在 config.js 文件中添加如下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
----------- -
-------- -
--------------- ------
---------------- ------
------------- ------
------------ ------
------------- - ------ ---------------------------- - --
------------------- ------
------------------ ------
------------------- ------
----------------- ------
--------------- -------
------------------------- ------
------------ ------
------------ ------
-------------------- ------
------------------ ------
------------------ ------
--------------------- ------
-------------------- ------
---------------------- ------
--------------------- ------
------------- -------
------------- - ------ --------------- - --
----------------------- ------
---------------------------- ------
--------------------- ------
----------- ------
------------------ -----
-
-
-
-最后，使用命令：
brunch build
即可完成 SVG 的优化。
5. 结论
通过使用 svgo-brunch，我们可以方便地优化 SVG 文件。在实际开发中，除了 svgo-brunch 外，还有许多其他的 SVG 优化工具可以使用，例如 svgmin、gulp-svgmin 等。但是，无论使用何种工具，优化 SVG 文件都是前端开发的一个必须工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005517481e8991b448cebc9