SVG精简压缩工具svgo

请输入图片描述

svgo简介

项目地址：https://github.com/svg/svgo

?> 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> (默认禁用)

如何使用？

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


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