SVGO の使い方
参考:
svg/svgo: Node.js tool for optimizing SVG files – GitHub
ドキュメント
参考:
svgo/en.md at master · svg/svgo – GitHub
使い方
Yarn を使ってグローバルにインストールする。
$ yarn global add svgo
package.json
に追加する。
$ yarn add svgo
SVGO でファイルを処理する。
$ svgo graphics.svg
yarn run
を使って実行する。
$ yarn svgo graphics.svg
ワイルドカードを使って SVG ファイルを処理する。(※直接ファイルが書き換えられるので注意!!)
$ svgo *.svg
参考:
Three Ways of Decreasing SVG File Size with SVGO | SitePoint
Optimise SVGs using SVGO CLI & bash function | Stuart Nelson
SVGO: SVG Optimizer | makandra dev
設定ファイル
--config=CONFIG
:設定ファイルを指定する。YAML 形式もしくは JSON 形式で指定できる。
$ svgo --config=.svgo.yaml graphics.svg
JSON 形式はコメントが使用できないので、YAML 形式の方が使い易い。
参考:
How can I change the default setting? · Issue #319 · svg/svgo – GitHub
プラグイン
参考:
What it can do – svg/svgo: Node.js tool for optimizing SVG files – GitHub
removeViewBox
viewBox
アトリビュートを取り除く。
removeAttrs
参考:
svgo removes <g class=”…”> which can impact in visual ouput · Issue #288 · svg/svgo – GitHub
svgo removeAttrs how to specify attrs to remove – Stack Overflow
removeHiddenElems
非表示の要素を取り除く。
取り除かれる要素の例:
visibility: hidden
display: none
opacity: 0
- サイズが
0
の図形 d
アトリビュートが空のpath
要素
各プロパティごとに有効・無効が設定可能。
convertTransform
複数の transform
アトリビュートを一つのアトリビュートにまとめる。
moveGroupAttrsToElems
g
要素のアトリビュートを子要素に移す。
collapseGroups
不要な g
要素を取り除く。g
要素のアトリビュートは子要素に移される。
cleanupIDs
使われていない ID を取り除く。使われている ID はアルファベット1文字の ID に置き換えられる。
preserve
:処理の対象から除く ID。preservePrefixes
:指定されたプレフィックスで始まる ID を処理の対象から除く。prefix
:短縮された ID に付けるプレフィックス。
prefixIds
ID にプレフィックスを付ける。
prefix
:付けるプレフィックスを指定する。null
(デフォルト) の時は、ファイルのパス名が存在すればそれが識別子として使用される。
ソース
config.js
設定を読み込んで、プラグインを初期化する。
参考:
svgo/config.js at v1.2.0 · svg/svgo – GitHub
.svgo.yaml
lib/svgo/config.js
:デフォルトで読み込まれるプラグイン一覧。
デフォルトでの有効・無効は、各プラグインの active
が true
か false
かで決まる。
config
が指定されたとき、full: false
の場合は設定がマージされ、full: true
の場合は設定が完全に置き換えられる。
参考:
svgo/.svgo.yml at v1.2.0 · svg/svgo – GitHub
SVGO config file – GitHub Gist
coa.js
コマンドラインからオプションや引数を受け取って、処理を実行する。
参考:
svgo/coa.js at v1.2.0 · svg/svgo – GitHub
_collections.js
タグ名やアトリビュート名が種類ごとに列挙されている。
参考:
svgo/_collections.js at v1.2.0 · svg/svgo – GitHub
cleanupIDs.js
不要な ID を削除する。使われている ID は残して短縮する。
※ animate
タグの end
アトリビュートが未対応で処理されない。(v1.2.0 現在)
参考:
svgo/cleanupIDs.js at v1.2.0 · svg/svgo – GitHub
prefixIds.js
全ての ID の先頭に prefix
で与えたプレフィックスを付ける。prefix
が null
の場合は、ファイルのパスがあれば、それが識別子として使われる。
デフォルトで無効。
HTML に SVG タグを直接埋め込む場合は、プレフィックスを付けることで HTML 内での ID の重複 (衝突) を避ける。
参考: