Kotlin による簡易SVG parser の実装実験

Androidアプリに使用するちょっとしたアイコンをコードで直接生成することがある。

単に SVGコマンドを Android アプリ内で描画したいだけならば SVGコマンドを android.graphics.Path に変換 を参照のこと。

いままで、Path に対して、moveTo, lineTo などを使って描写コードをちまちまと書いていた。けれど、SVGコマンドからパスへ変換するパーサをかけばいいじゃないか、そうすれば、moveTo, lineTo などのコードは書く必要がない。ということで書いたてみたのが これ createImageFromSVG.kts。

SVGパーサといっても、 対応コマンドは MmLlHhVvZz のみ。 しかも、 L10 10 100 100 のようなコマンドは L10 10 L100 100 のように書き下す必要があるなど、いろいろ制限は多い。

ちょっと使ってみる

Kotlin が使える環境なら

kotlinc -script createImageFromSVG.kts

とすれば以下の r.png が生成される。

使えるコマンドが MmLlHhVvZz なので、直線的な表現しかできない。

この辺 にある SVGファイルで曲線が含まれていないアイコンをいくつか試してみる。

ic_view_module

M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z

こんなコマンドだが、このパーサで処理できるように、適切にスペース等を追加。

M4 11 h5 V5 H4 v6 z m0 7 h5 v-6 H4 v6 z m6 0 h5 v-6 h-5 v6 z m6 0 h5 v-6 h-5 v6 z m-6 -7 h5 V5 h-5 v6 z m6 -6 v6 h5 V5 h-5 z

PNGに変換してみる。

kotlinc -script createImageFromSVG.kts "M4 11 h5 V5 H4 v6 z m0 7 h5 v-6 H4 v6 z m6 0 h5 v-6 h-5 v6 z m6 0 h5 v-6 h-5 v6 z m-6 -7 h5 V5 h-5 v6 z m6 -6 v6 h5 V5 h-5 z"

結果

ic_fullscreen

kotlinc -script createImageFromSVG.kts "M7,14 H5 v5 h5 v-2 H7 v-3 z m-2,-4 h2 V7 h3 V5 H5 v5 z m12,7 h-3 v2 h5 v-5 h-2 v3 z M14,5 v2 h3 v3 h2 V5 h-5 z"

結果

まとめ

意外に便利。もし曲線コマンドにも対応できれば、かなり実用的な気がする。 Javaではコードが長くなってしまうところが Kotlin は短く書ける。