优化自己的svg

Z时代
2024-01-10
分类：综合

一、svgo简介

项目地址：https://github.com/svg/svgo, 目前4000+星星~ 随着SVG的高歌猛进，以后一定会平稳增加。

svgo是SVG Optimizer的简写，不过，我似乎更喜欢理解为SVG, go! 这是一个基于Nodejs的SVG文件优化工具。

二、为什么需要？

因为SVG文件，尤其从各种变假期导出的SVG，通常包含大量的无用信息，例如编辑器源信息，注释，因此元素，默认或者非最优值，以及其他一些不会影响渲染结果的可以移除或转换的内容。

能做什么？

SVGO基于插件模式构建，基本上所有的优化都是一个分离的插件。

目前有：

[ cleanupAttrs ] 清除换行，结束符以及重复空格

[ removeDoctype ] 删除文档声明

[ removeXMLProcInst ] 删除XML处理指令

[ removeComments ] 删除注释

[ removeMetadata ] 删除<metadata>源信息

[ removeTitle ] 删除<title>标题(默认禁用)

[ removeDesc ] 删除<desc>描述 (默认只有desc元素无意义的时候)

[ removeUselessDefs ] 删除<defs>元素如果没有id

[ removeEditorsNSData ] 删除编辑器的命名空间，元素和属性

[ removeEmptyAttrs ] 删除空属性

[ removeHiddenElems ] 删除隐藏元素

[ removeEmptyText ] 删除隐藏文本元素

[ removeEmptyContainers ] 删除空的容器元素

[ removeViewBox ]如果可以，删除viewBox属性(默认进行)

[ cleanUpEnableBackground ] 如果可以，删除enable-background属性

[ minifyStyles ] 使用CSSO最小化元素的<style>内容

[ convertStyleToAttrs ] 转换样式为属性值

[ convertColors ] 转换颜色(从rgb()到#rrggbb, 从 #rrggbb到#rgb)

[ convertPathData ] 将路径数据转换为的相对路径和绝对路径中简短的那一个，过滤无用的分隔符，智能四舍五入以及其他很多处理

[ convertTransform ] 合并多个transforms为一个, 转换矩阵为短命名，以及其他很多处理

[ removeUnknownsAndDefaults ] 删除未知的元素内容和属性，删除值为默认值的属性/li>

[ removeNonInheritableGroupAttrs ] 删除不可基础组的”presentation”属性

[ removeUselessStrokeAndFill ] 删除无用的stroke和fill属性

[ removeUnusedNS ] 删除没有使用的命名空间声明

[ cleanupIDs ] 删除没有使用或者压缩使用的IDs

[ cleanupNumericValues ] 数值四舍五入提高精度, 删除默认的’px’单位

[ moveElemsAttrsToGroup ] 移动元素属性们到外面包裹的组元素上

[ moveGroupAttrsToElems ] 移动一些组属性到内容元素上

[ collapseGroups ] 合并无用的组

[ removeRasterImages ] 删除点阵图像(默认禁用)

[ mergePaths ] 合并多个路径为一个

[ convertShapeToPath ] 转换一些基本图形为路径

[ sortAttrs ] 元素属性排序使其像诗歌一样易读(默认禁用)

[ transformsWithOnePath ] 通过里面一条路径实现transforms, 真实宽度剪裁, 垂直居中对齐以及SVG缩放拉伸(默认禁用)

[ removeDimensions ] 如果viewBox就是当下尺寸限定，删除width/height属性(默认禁用)

[ removeAttrs ] 通过正则删除属性 (默认禁用)

[ addClassesToSVGElement ] 添加类名给外面的<svg>元素 (默认禁用)

[ removeStyleElement ] 删除元素的<style> (默认禁用)

如何使用？

首先是安装，连我都驾轻就熟了，如下：

$ [sudo] npm install -g svgo

使用：

svgo [OPTIONS] [ARGS]

Options:

-h, --help : Help 帮助

-v, --version : Version版本

-i INPUT, --input=INPUT : 输入的文件, "-" 为标准输入

-s STRING, --string=STRING : 输入SVG数据字符串

-f FOLDER, --folder=FOLDER : 输入的文件夹，会优化与重写所有的*.svg文件

-o OUTPUT, --output=OUTPUT : 输入的文件或文件夹 (默认同输入), "-" 标准输出

-p PRECISION, --precision=PRECISION : 设置数字的小数部分，重写插件参数

--config=CONFIG : 配置文件扩展或替换默认设置

--disable=DISABLE : 根据名字禁用插件

--enable=ENABLE : 根据名字开启插件

--datauri=DATAURI : 输入文件以Data URI字符串形式(base64, URI encoded or unencoded)

-q, --quiet : 仅输出错误信息，不包括正常状态消息

--pretty : 让SVG漂亮的打印

--show-plugins : 显示可用和存在的插件

Arguments:

INPUT : 别名 --input

OUTPUT : 别名 --output

单个文件使用举例：

$ svgo test.svg

或者:

$ svgo test.svg test.min.svg

使用STDIN / STDOUT(标准输入输出):

$ cat test.svg | svgo -i - -o - > test.min.svg

文件夹举例：

$ svgo -f ../path/to/folder/with/svg/files

或者：

$ svgo -f ../path/to/folder/with/svg/files -o ../path/to/folder/with/svg/output

使用字符串：

$ svgo -s "<svg version="1.1">test</svg>" -o test.min.svg

或者甚至是Data URI base64:

$ svgo -s "data:image/svg+xml;base64,…" -o test.min.svg

SVGZ使用:

从.svgz到.svg:

$ gunzip -c test.svgz | svgo -i - -o test.min.svg

从.svg到.svgz:

$ svgo test.svg -o - | gzip -cfq9 > test.svgz

带操作界面的GUI – svgo-gui

作为web app – SVGOMG

作为Nodejs模块 – examples

作为Grunt任务 – grunt-svgmin

作为Gulp任务 – gulp-svgmin

作为Mimosa模块 – mimosa-minify-svg

作为OSX文件夹Action – svgo-osx-folder-action

作为webpack loader – image-webpack-loader

这里出现了一个svgz格式的文件，这是什么鬼呢？实际上是SVG的gzip压缩文件，Illustrator是可以直接导出的，如下示意：

根据我的测试，Chrome浏览器是可以直接打开的，FireFox浏览器不行（FireFox 44），直接下载，而IE11浏览器是个大白板，一看控制台，报错了：

虽然svgz的压缩比很厉害，是真正意义上的压缩，但是，实际上，应用价值并不大，因为类似JS, CSS字符集类型文本文件，可以通过服务器开启gzip实现传输，SVG也在其中，SO, …

三、svgo初体验

看上去很厉害，我就先自己试用下，看看是不是用来解决自己的需求的。如下代码截图：

就是所有SVG精简到另外一个平级的名为output的文件夹，于是乎，得到：

从精简效率来看，很惊人，有50%~60%的精简率。

拿其中一个SVG代码（就是svgz示意的钩钩）前后对比下吧：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<path fill="#FFFFFF" d="M147.566,67.575c-3.979-3.24-4.355-3.337-8.9-5.64c-2.043-1.043-5.057,1.646-6.529,3.636L92,117.73
    L65.85,83.972c-1.478-1.988-4.205-2.72-6.25-1.782c-4.658,2.408-4.19,2.327-8.168,5.467c-1.817,1.466-1.932,4.082-0.456,6.065
    c0,0,28.183,36.5,31.592,40.896c5,6.274,14.09,5.965,18.864,0c3.521-4.498,46.59-61.078,46.59-61.078
    C149.499,71.55,149.385,68.937,147.566,67.575z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path fill="#FFF" d="M147.566 67.575c-3.98-3.24-4.355-3.337-8.9-5.64-2.043-1.043-5.057 1.646-6.53 3.636L92 117.73 65.85 83.972c-1.478-1.988-4.205-2.72-6.25-1.782-4.658 2.408-4.19 2.327-8.168 5.467-1.817 1.466-1.932 4.082-.456 6.065 0 0 28.183 36.5 31.592 40.896 5 6.274 14.09 5.965 18.864 0 3.52-4.498 46.59-61.078 46.59-61.078 1.477-1.99 1.363-4.603-.456-5.965z"/></svg>

恩，有种胖妞变靓妹的即视感：

喔噢，很酷啊，正是自己想要的，而且貌似还可以通过设置让值保留2位小数，又可以进一步精简大小，不过现在这样已经足够了！

好的，不错，这就加入项目的豪华午餐阵营！

恭喜你，svgo, 你得到了评委的一致认可！