2013-07-17

SVGO

SVGOはSVGに不要なホワイトスペースの削除に留まらない最適化を行ってくれるステキなソフトウェア。ちょっと前までなかなか挙動不審だったので、利用を避けていたんだけどv0.3.7では安定している感じなのでまた使い始めた。デフォルトでは入力ファイルを上書きしちゃうのでバックアップを取るように心がけたい。

SVGOは大体において本当に素晴らしい効果を発揮してくれる。Data URIを使ってCSSに埋め込む時のようにファイルサイズがダイレクトに響いてくるケースには積極的に利用すると良い。デフォルトではviewBox属性消えちゃうとか「アレッ？」と思うところもあるけど、気になるなら残すように設定もできる。ドラッグ・アンド・ドロップでまとめてSVGOに通してくれるSVGO GUIとかもあるのでそんなに使い方は難しくない。

$ svgo -i test.svg -o - --datauri=base64

CLIで使う場合もこれでSTDOUTにBase64なData URIで吐けて便利。URLエンコードでも吐けるので、少しでもサイズを減らしたい人は--datauri=encにすると良い。

普通はGruntタスクでもちろん良いんだけど、Vimで以下のようなコマンドと関数を.vimrcで定義すると、CSSとかに書いたSVGファイルへのパスにカーソルを載せて:SVGOするとData URIに置き換わる。

command! SVGO :call <SID>OptimizeSVG()

function! s:OptimizeSVG()
  let cfile = expand('<cfile>')
  let datauri = system('svgo -i ' . cfile . ' -o - --datauri=base64')
  let datauri = substitute(datauri, '\n$', '', '')
  call setreg('d', substitute(getline('.'), cfile, datauri, ''))
  normal! V"dp
endfunction

SVGOのSTDOUTに吐くオプションでは最後に\nが付くようになってるので消してる。レジスター使っちゃうのは許してくれ。

ちょっと前まで挙動不審だった……というのは時々SVGをぶっ壊してくれたという話。現在の最新版であるv0.3.7では今のところ壊れたりしたことがないし、開発も活発なのでバックアップ取るの忘れないようにしとけばもう大丈夫だと思う。SVGO GUIの配布バイナリではまだ古いバージョンを使っているようで、以下のデモのようにSVGを壊すことがあるので注意が必要。

Demo: Old Version of SVGO Breaks SVG

SVGO GUIで使われてるNode-WebKit楽しそうだなー。