簡介
說明
本文介紹svg圖檔的壓縮工具：svgo。
我們很多網上下載下傳或者Sketch導出的svg會有很多備援無用的資訊，大大的增加了svg的尺寸，可以使用svgo對它進行優化。無用的資訊有：編輯器源資訊，注釋等。
官網網址
github位址：https://github.com/svg/svgo
線上壓縮
在幾秒鐘内免費壓縮你的SVG檔案！ //可壓縮多檔案，導出檔案名不變
SVG壓縮器-壓縮SVG線上 //可壓縮多檔案，導出檔案名加-min
SVG壓縮 – 線上壓縮SVG圖像 //可壓縮多檔案，導出檔案名加-min
svgo概述
svgo是SVG Optimizer的簡寫。這是一個基于Nodejs的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 -f ../path/to/folder/with/svg/files 或者：
svgo -f ../path/to/folder/with/svg/files -o ../path/to/folder/with/svg/output 單個檔案使用舉例
svgo test.svg 或者:
svgo test.svg test.min.svg 使用STDIN / STDOUT(标準輸入輸出)
cat test.svg | svgo -i - -o - > test.min.svg 使用字元串
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 vue-element-admin對svgo的使用
我是在看vue-element-admin時看到的svgo，于是寫了這篇部落格。本處介紹vue-element-admin對svgo的使用。
1. 在開發依賴中引入svgo
2. svgo配置檔案以及svg圖檔檔案夾
svg檔案夾：存放svg圖示檔案
svgo.yml：配置檔案。内容為：
# replace default config
# multipass: true
# full: true
plugins:
# - name
#
# or:
# - name: false
# - name: true
#
# or:
# - name:
# param1: 1
# param2: 2
- removeAttrs:
attrs:
- 'fill'
- 'fill-rule' 3. 将svgo添加到腳本
腳本為：
svgo -f src/icons/svg --config=src/icons/svgo.yml