デザイナーから受領したSVGをSVGKitでiOSアプリで使えるようにするまで
TL; TR
- SVGKitで表示できるかどうかをシンプルなプロジェクトであらかじめ調べる
- SVGOで最適化してみる
- SVGOMGはブラウザで利用できて便利
- SVGOMG - SVGO's Missing GUI
- inkspaceのパスの簡略化（simplify）でうまく表示できないパスを変換する
- 余裕があればパスをシェイプ（図形）に書き直すのもよい
SVGのメリット・デメリット
メリット
デメリット
SVGKitについて
SVGファイルをパースしてiOSのネイティブ機能（CoreGraphics CoreImageなど）で描画するライブラリです。
SVGKitの利用のしかた
iOSでSVGKitを使う方法は以下のページを参考にしました。
SVGKitでillustratorで書き出したSVGを表示みる
今回はillustratorで書き出した検索アイコンを表示してみようとしてみます。
以下のようにうまく表示できていません。
SVGKitでillustratorで書き出したSVGのプレビュー
SVGKitの表示
SVGOで最適化してみる
SVGOはSVGファイルを最適化するためのものですが、副次的な作用でパスデータを単純なものに書き直すため、表示できるようになることがあるようです。
SVGOMGはブラウザで利用できるので手軽です。
Show original のスイッチで元データと最適化データを見比べながらSVGファイルが変化していないかどうかをチェックしながら進められます。
各最適化オプションや Precision でどの程度最適化するかをコントロールできます。
inkspaceの単純なパスに変更する
inkspaceのパスの簡略化機能で単純なパスすることもできます。
大体はこれで対応できそうです。
inkscapeの使い方を覚える必要がありますが、うまく表示できなかったパスのみにフォーカスをあてて簡略化したり、シェイプ（図形）に置き換えたりする作業を手作業で行えば確実にSVGKitで表示できます。
検索アイコンはinkscapeでパスを修正し、SVGKitでも表示できるようになりました。
今回の検索アイコンの例だと、SVGKitのエラー出力を見る感じだと clippath の表示でうまく行かなかったようですが、inkscapeを利用してclippathを利用せずパスのみにしたり、circle （円のシェイプ）に変更したりするとSVGKitでも表示できるようになるようです。
SVG仕様について
今回、そもそものSVGの仕様を理解するために色々調べたのですが、mozillaが公開しているSVGのチュートリアルが分かりやすかったです。
illustratorはSVG書き出しディスられている、、
実際にSVGKitで表示できる形式にする作業をした所感
SVGKitでSVGが正しく表示されるかどうかチェックするためのプロジェクトを作成して、イメージ通りに表示されるかチェックする作業をしました。
実際に開発中のアプリをビルドして確認していくのはビルドに時間がかかるためです。
macを利用しているデザイナーさんであればアプリエンジニアが手助けしてあげればなんとか自前でビルドして確認するのは難しくなさそうです。
表示できないSVGの対応ですが、SVGOMGとinkscapeのパスの簡略化の2つで大体解決できたと思います。
inkscapeできれいなSVGファイル（xmlファイル的な観点で）を目指していくこともできますが、最終的な見た目はそんなに変わらないと思いますので、こだわりすぎずに進めていくのが作業時間の節約になりそうです。
