35: 使用工具优化 SVG

我们已经讨论过手动优化 SVG。手动选择细节以及可以组合或删除的内容。在本屏幕录像中，我们将了解如何使用工具优化 SVG。这些工具可以在不（希望）改变其外观的情况下减小 SVG 的文件大小。非常适合自动化的事情。例如

• 移除空白
• 降低数字精度
• 移除元数据冗余

最流行的工具是 SVGO，这是一个基于 node 的命令行工具，用于以这种方式优化 SVG。它有一个 GUI 版本，因此您也可以像使用 ImageOptim 一样进行拖放。（在视频中，我们需要 这个 来解压它。）

我们还查看了 Peter Collingridge 的 SVG 优化工具，这些工具很不错，因为您可以选择要应用的规则，然后查看结果和文件大小。

在某些情况下，手动优化可能没问题，比如您处理的文件数量很少并且偶尔进行优化。但是，如果您经常使用 SVG，例如您正在 构建图标系统，那么最好将工具集成到构建系统中。

我们之前 在这里 看过 Grunt，所以让我们想象一个这样的系统

1. 在项目中添加或更改 SVG 文件时优化 SVG
2. 然后将它们全部构建到一个 defs.svg 块中

您需要先进行优化，然后构建一个包含这些优化的文件夹（以便在需要时可以逐个检查它们），然后将它们组合在一起。以下是使用 grunt-svgmin 和 grunt-svgstore 的 Gruntfile 示例。

module.exports = function(grunt) {

  grunt.initConfig({

    svgmin: {
      options: {
        plugins: [
          {
            removeViewBox: true
          }, {
            removeUselessStrokeAndFill: false
          }
        ]
      },
      dist: {
        files: [{
          expand: true,
          cwd: "svg/",
          src: ['*.svg'],
          dest: 'svgo/'
        }]
      }
    },

    svgstore: {
      options: {
        formatting : {
          indent_size : 2
        }
      },
        default: {
          files: {
          'includes/defs.svg': ['svgo/*.svg'],
        }
      }
    }

  });

  grunt.loadNpmTasks('grunt-svgstore');
  grunt.loadNpmTasks('grunt-svgmin');

  grunt.registerTask('default', ['svgmin', 'svgstore']);

};

我会提供我们使用的 SVG 图片（来自 Freepik）和 Grunt 项目的压缩包作为下载。