SVG圖片壓縮
這是個通過借助npm包的一種方式去壓縮svg的圖片，由於阿里的圖庫自己創建的圖標有大小的限制，當我們想要自己用自己的圖標的時候就可以使用這種方式去完成對svg的圖片壓縮。
1、下載node.js （地址：https://nodejs.org/zh-cn/）
即前提，必須本地部署好npm，否則就跑不起來。
2、下載svgo的包
下載node.js成功后，使用命令行安裝
npm install -g svgo
項目官方網址：
https://www.npmjs.com/package/svgo
安裝成功會有如下提示：（類似的提示語）
Nodejs-based tool for optimizeing SVG vector graphics files
Usage使用示例:
svgo [OPTIONS] [ARGS]
3、壓縮svg
在控制台輸入：
svgo E:\a.svg -o E:\b.svg
第一個路徑是需要壓縮文件路徑；
-o OUTPUT
第二個是壓縮后存放地址。
也可以是完整目錄形式，如：
svgo -f .\svgFrom_tm\
4、官方示例
$ svgo test.svg
or:
$ svgo *.svg
$ svgo test.svg -o test.min.svg
$ svgo test.svg other.svg third.svg
$ svgo test.svg other.svg third.svg -o test.min.svg -o other.min.svg -o third.min.svg
# with STDIN / STDOUT:
$ cat test.svg | svgo -i - -o - > test.min.svg
with folder
$ svgo -f ../path/to/folder/with/svg/files
or:
$ svgo -f ../path/to/folder/with/svg/files -o ../path/to/folder/with/svg/output
$ svgo *.svg -o ../path/to/folder/with/svg/output
with strings:
$ svgo -s '<svg version="1.1">test</svg>' -o test.min.svg
or even with Data URI base64:
$ svgo -s 'data:image/svg+xml;base64,...' -o test.min.svg
with SVGZ:
from .svgz to .svg:
$ gunzip -c test.svgz | svgo -i - -o test.min.svg
from .svg to .svgz:
$ svgo test.svg -o - | gzip -cfq9 > test.svgz
5、官方使用指引
Usage:
svgo [OPTIONS] [ARGS]
Options:
-h, --help : Help
-v, --version : Version
-i INPUT, --input=INPUT : Input file, "-" for STDIN
-s STRING, --string=STRING : Input SVG data string
-f FOLDER, --folder=FOLDER : Input folder, optimize and rewrite all *.svg files
-o OUTPUT, --output=OUTPUT : Output file or folder (by default the same as the input), "-" for STDOUT
-p PRECISION, --precision=PRECISION : Set number of digits in the fractional part, overrides plugins params
--config=CONFIG : Config file or JSON string to extend or replace default
--disable=PLUGIN : Disable plugin by name, "--disable=PLUGIN1,PLUGIN2" for multiple plugins
--enable=PLUGIN : Enable plugin by name, "--enable=PLUGIN3,PLUGIN4" for multiple plugins
--datauri=DATAURI : Output as Data URI string (base64, URI encoded or unencoded)
--multipass : Pass over SVGs multiple times to ensure all optimizations are applied
--pretty : Make SVG pretty printed
--indent=INDENT : Indent number when pretty printing SVGs
-r, --recursive : Use with '-f'. Optimizes *.svg files in folders recursively.
-q, --quiet : Only output error messages, not regular status messages
--show-plugins : Show available plugins and exit
Arguments:
INPUT : Alias to --input
6、最后附上基於svgo壓縮的圖標庫：zico
這是由Zoomla!逐浪CMS官方開發的中國自主圖標庫，擁有中國百強企業商標和特色圖庫，值重使用，網址：
http://ico.z01.com
引用方法很簡單，有三種方式：
- 1.基於css，如`
- 2.基於svg格式，標簽如上。
- 3.基於單圖svg引用
- 4.在設計軟件中使用，如photoshop、cordeldraw、word等一切軟件應用。
開箱即用，npm快速部署是：
npm i zico