如何在Node.js中使用svgo减少(缩小)SVG文件大小

本文概述

• A.从CLI使用
• B.用作模块

如今, 有一种方法可以优化和减小从图像到文本文件的几乎所有内容的大小。 SVG格式也不例外, 并且可以通过多种方式进行优化, 此类文件通常包含大量冗余和无用的信息。这可以包括编辑器元数据, 注释, 隐藏元素, 默认值或非最佳值以及可以安全删除或转换而不会影响SVG渲染结果的其他内容。其中一种方法是使用Node.js编写的SVGO工具。 SVG Optimizer是基于Nodejs的工具, 用于优化SVG矢量图形文件。

在本文中, 我们将向你展示如何在计算机中安装Node.js SVGO模块来优化SVG文件。

A.从CLI使用

A.1)安装SVGO

svgo模块应该在你的计算机上全局安装, 因此请使用以下命令开始安装：

npm install -g svgo

有关此库/模块的更多信息, 请访问Github上的官方存储库。

A.2)CLI用法

svgo CLI实用程序的工作方式如下：该命令的第一个参数将是你要优化的原始SVG文件的路径,

svgo input_file.svg -o output_file.svg

如你所见, 最简单的svgo使用案例可优化我们的基本svg文件, 并显示文件总大小减少了近4％。

B.用作模块

A.1)安装SVGO

svgo模块应该安装在你的项目中, 以便在代码中被要求使用, 因此请确保将其安装为：

npm install svgo

有关此库/模块的更多信息, 请访问Github上的官方存储库。

A.2)脚本用法

svgo模块允许你使用代码轻松优化SVG文件。你唯一需要做的就是创建SVGO模块的实例, 并定义应使用哪些插件来优化文件：

// Require filesystem module
var FS = require('fs'), // Require the SVGO module
// it will need to be installed on the project (not globally if you are willing to use it from a script)
// npm install svgo
SVGO = require('svgo'), // Path of the svg file
filepath = 'test.svg', svgo = new SVGO({
        plugins: [{
          cleanupAttrs: true, }, {
          removeDoctype: true, }, {
          removeXMLProcInst: true, }, {
          removeComments: true, }, {
          removeMetadata: true, }, {
          removeTitle: true, }, {
          removeDesc: true, }, {
          removeUselessDefs: true, }, {
          removeEditorsNSData: true, }, {
          removeEmptyAttrs: true, }, {
          removeHiddenElems: true, }, {
          removeEmptyText: true, }, {
          removeEmptyContainers: true, }, {
          removeViewBox: false, }, {
          cleanupEnableBackground: true, }, {
          convertStyleToAttrs: true, }, {
          convertColors: true, }, {
          convertPathData: true, }, {
          convertTransform: true, }, {
          removeUnknownsAndDefaults: true, }, {
          removeNonInheritableGroupAttrs: true, }, {
          removeUselessStrokeAndFill: true, }, {
          removeUnusedNS: true, }, {
          cleanupIDs: true, }, {
          cleanupNumericValues: true, }, {
          moveElemsAttrsToGroup: true, }, {
          moveGroupAttrsToElems: true, }, {
          collapseGroups: true, }, {
          removeRasterImages: false, }, {
          mergePaths: true, }, {
          convertShapeToPath: true, }, {
          sortAttrs: true, }, {
          removeDimensions: true, }, {
          removeAttrs: {attrs: '(stroke|fill)'}, }]
      });

// Read the SVG file
FS.readFile(filepath, 'utf8', function(err, data) {

    if (err) {
        throw err;
    }

    svgo.optimize(data, {path: filepath}).then(function(result) {

        console.log(result);

        // {
        //     // optimized SVG data string
        //     data: '<svg width="10" height="20">test</svg>'
        //     // additional info such as width/height
        //     info: {
        //         width: '10', //         height: '20'
        //     }
        // }

    });
});

编码愉快！