SVGのpath dをCGPathRefに変換する

Last updated at 2014-12-20Posted at 2014-12-20

iPhoneの解像度が増えた影響で、アイコンなどにベクターデータを使うメリットが増してきています。
ただ、iOS標準フレームワークではこの辺りはちょっとばかしかゆいところに手が届かないところです。

今回は小さな対応策の１つとして、

SVGのpath d要素をCGPathに変換する、

というのをやろうと思います。

この方法には、

・svg全部パースするより遥かに簡単
・読み込んだCGPathRefは描画前に編集したり、描画方法を自由にカスタマイズできる

といったメリットがあります。

また、SVGKit( https://github.com/SVGKit/SVGKit )なんかもありますが、
ちょっとわりと大きなフレームワークなので、
一部だけSVG使いたいだけの時にはちょっとオーバースペックな気がします。

というわけでソースです。
コピペしてすぐ使い始めることができます。

https://github.com/Ushio/SVGPathD
※コア実装はSVGPathD.h, SVGPathD.mmで、あとはデモ用です。

path dの要素はとても単純で、
コマンド文字と、それに付随する数値データで構成されています。

NSScannerを使えばこのあたりの連続データは比較的簡単に読むことができました。
SVGのたくさんのタグをパースして適切に対応するのに比べたらずいぶんと軽いです。

また、今回は、Aコマンド（円弧を描くコマンド）は面倒だったのでサポートしていませんが、
Mm, Ll, Hh, Vv, Cc, Ss, Qq, Tt, Zz
のコマンドは読むことができます。

今回提案した手法は、全然万能な解決策ではありませんが、
結構ガチっとはまるケースだってあるような気がします。