SVG ファイルを GUI ツールで最適化する

Sketch や各種ツールから出力する SVG には、表示には必要ないデータが含まれることがある。SVG を git などでバージョン管理することも多いと思うが、この時に不要なデータを含めたくない。

ツールとしては svgo という Node.js 製のツールがあり、これを使うことで不要なデータを取り除きつつ、整形や最小化処理を適用できる。

どのタイミングで最適化するのかという話があるが、それについてはワークフローにおける画像の最適化でも書いてある。今回は git のコミットフックではなく、GUI ツールで最適化することを考えてみる。

GUI ツールでやる必要性

は特にないが、とりあえず1ファイルだけ最適化したかったり、ターミナルではなくテキストエディタでやりたいなど、git のコミットフックを用意するまでもない場面の選択肢のひとつとして考えられる。

Sketch のプラグインをインストールしておけば、エクスポート時に最適化した状態で出力できるので、漏れがない。あとは SVG に限らないが、エクスポートする前に、アイコンであればアートボードのサイズを揃えたり、パスをアウトライン化しておいたり、アートボードの名前を意味のあるものにしておくと良い。これをやっておくと、ViewBox のサイズが統一され、不要な transform の情報がなくなり、 <title> 要素に意味のある名前が挿入される。

各種プラグイン

Figma については With Figma’s new SVG Exports, less = more を見るに、ツールがない様子である。他のツールについては、Sketch にはオフィシャルで用意されていた。

• BohemianCoding/svgo-compressor: Sketch のプラグインなので、手動でダウンロードする他、Sketchpacks などからインストールできる
• 1000ch/vscode-svgo: コマンドパレット (Cmd Shift P) で Install Extensions を実行し、svgo で検索する
• 1000ch/atom-svgo: apm install svgo または Install から svgo で検索する
• 1000ch/Sublime-svgo: コマンドパレット (Cmd Shift P) で Install Package を実行し、svgo で検索する

VSCode と Atom は Node.js を内蔵しているので、インストールするだけで使える。Sublime Text には Node.js が含まれていないので、インストールしている端末の PATH に node のパスが通っている必要がある。

Node.js のインストールについてはnodenv を使って Mac に Node.js の環境を構築するも参考に。