为什么 99% 前端都不知道这款 SVGO 神器？

支支C

3天前发布

010

大家好，很高兴又见面了，我是”高级前端‬进阶‬”，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1. 什么是 SVGO

SVG 文件，尤其是从矢量编辑器导出的文件，一般包含大量冗余信息。这些信息包括编辑器元数据、注释、隐藏元素、默认值或次优值，以及其他可以安全移除或转换而不会影响渲染的内容。

SVGO 是 SVG Optimizer 的缩写，是一个用于优化 SVG 文件的 Node.js 库和命令行应用程序，典型特征包括：

易于使用：SVGO 可通过命令行界面和 JavaScript API 使用，并同时提供两种方式的协助页面和文档
支持深度集成：许多库、框架或工具已捆绑或集成了 SVGO，例如： Docusaurus、PostCSS 和 webpack
完全开源：开发者可以随时在 GitHub 上提交错误报告、功能请求或提交拉取请求

目前 SVGO 在 Github 通过 MIT 协议开源，有超过 22k 的 star、1.4k 的 fork、16917 的项目依赖量，妥妥的前端顶级开源项目。

2. 命令行使用

开发者可以通过 npm、yarn 或 pnpm 全局安装 SVGO，或者也可以删除全局标志 (global/-g) 以便在 Node.js 项目中使用：

# npm
npm install -g svgo
# yarn
yarn global add svgo
# pnpm
pnpm add -g svgo

开发者也可以使用命令行用法处理文件：

svgo one.svg two.svg -o one.min.svg two.min.svg
// 处理单个文件
svgo -rf path/to/directory_with_svgs -o path/to/output_directory
// 使用 -r/--recursive 和 -f/--folder 递归处理文件目录

3. 在 Node.js 场景使用

要在 Node.js 中使用 SVGO，可以导入 optimize 函数：

import {optimize} from 'svgo';

const svg = `
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 100 100">
  <text x="50" y="50" text-anchor="middle">•ᴗ•</text>
</svg>
`;
const {data} = optimize(svg);
console.log(data);
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50" y="50" text-anchor="middle">•ᴗ•</text></svg>

4. 在浏览器场景使用 SVGO

当开发者想要从客户端获取 SVGO 浏览器包的时候，例如：使用 Handlebars 等模板引擎、Jekyll 等 SSG 或纯 HTML 构建静态网站时。

此时需要以某种方式提供 svgo.browser.js 的副本，例如：

从 GitHub 版本库下载最新版本的 svgo.browser.js，并将其放在项目目录中以自行提供服务
使用公共 CDN，例如：unpkg 或 jsDelivr

下面是一个简单示例：

<!doctype html>
<html lang="en">
  <head>
    <title>SVGO Browser Example</title>
    <script type="module">
      import {VERSION} from '/svgo.browser.js';
      // You could also do:
      // import {VERSION} from 'https://unpkg.com/svgo/dist/svgo.browser.js';

      document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('version').innerHTML = VERSION;
      });
    </script>
  </head>

  <body>
    <span id="version"></span>
  </body>
</html>

5. SVGO 丰富的插件机制

SVGO 执行的所有优化都是通过各种插件实现的，这些插件要么是内置的，要么是 SVGO 配置中提供的。

内置插件主要侧重于优化或兼容性，不过 SVGO 的插件架构超级灵活，因此可以有效地执行任何操作。

SVGO 从 svgo.config.mjs 或 –config path/to/config.mjs 命令行选项读取配置，其他参数也可以通过命令行选项配置。

export default {
  multipass: false, // boolean
  datauri: 'base64', // 'base64'|'enc'|'unenc'
  js2svg: {
    indent: 4, // number
    pretty: false, // boolean
  },
  plugins: [
    'preset-default', 
    // built-in plugins enabled by default
    'prefixIds', 
    // enable built-in plugins by name
    // enable built-in plugins with an object to configure plugins
    {
      name: 'prefixIds',
      params: {
        prefix: 'uwu',
      },
    },
  ],
};