読者です 読者をやめる 読者になる 読者になる

デザイナーから受領したSVGをSVGKitでiOSアプリで使えるようにするまで

ios swift svg svgkit

TL; TR

  • SVGKitで表示できるかどうかをシンプルなプロジェクトであらかじめ調べる
  • SVGOで最適化してみる
  • inkspaceのパスの簡略化(simplify)でうまく表示できないパスを変換する
    • 余裕があればパスをシェイプ(図形)に書き直すのもよい

SVGのメリット・デメリット

メリット

  • SVGファイルはベクターデータなので、どんな解像度でも滑らかに表示することができます。
  • サイズ別、解像度別に書き出す必要がなくなるので、容量の削減になります。

デメリット

  • 書き出したSVGiOSでイメージ通りに表示するには一手間かかる場合があります。
    • 単純なパスや図形に置き換えてSVGを表示するライブラリで表示できるように修正するなど。

SVGKitについて

SVGファイルをパースしてiOSのネイティブ機能(CoreGraphics CoreImageなど)で描画するライブラリです。

github.com

SVGKitの利用のしかた

iOSでSVGKitを使う方法は以下のページを参考にしました。

dev.classmethod.jp

SVGKitでillustratorで書き出したSVGを表示みる

今回はillustratorで書き出した検索アイコンを表示してみようとしてみます。

以下のようにうまく表示できていません。

SVGKitでillustratorで書き出したSVGのプレビュー

f:id:fly1tkg:20170305002825p:plain

SVGKitの表示

f:id:fly1tkg:20170305002836p:plain

SVGOで最適化してみる

SVGOはSVGファイルを最適化するためのものですが、副次的な作用でパスデータを単純なものに書き直すため、表示できるようになることがあるようです。

github.com

SVGOMGはブラウザで利用できるので手軽です。

SVGOMG - SVGO's Missing GUI

Show original のスイッチで元データと最適化データを見比べながらSVGファイルが変化していないかどうかをチェックしながら進められます。

各最適化オプションや Precision でどの程度最適化するかをコントロールできます。

f:id:fly1tkg:20170305004140g:plain

inkspaceの単純なパスに変更する

inkspaceのパスの簡略化機能で単純なパスすることもできます。

f:id:fly1tkg:20170305005526g:plain

大体はこれで対応できそうです。

inkscapeの使い方を覚える必要がありますが、うまく表示できなかったパスのみにフォーカスをあてて簡略化したり、シェイプ(図形)に置き換えたりする作業を手作業で行えば確実にSVGKitで表示できます。

検索アイコンはinkscapeでパスを修正し、SVGKitでも表示できるようになりました。

f:id:fly1tkg:20170305005950p:plain

今回の検索アイコンの例だと、SVGKitのエラー出力を見る感じだと clippath の表示でうまく行かなかったようですが、inkscapeを利用してclippathを利用せずパスのみにしたり、circle (円のシェイプ)に変更したりするとSVGKitでも表示できるようになるようです。

SVG仕様について

今回、そもそものSVGの仕様を理解するために色々調べたのですが、mozillaが公開しているSVGチュートリアルが分かりやすかったです。

developer.mozilla.org

illustratorSVG書き出しディスられている、、

developer.mozilla.org

実際にSVGKitで表示できる形式にする作業をした所感

SVGKitでSVGが正しく表示されるかどうかチェックするためのプロジェクトを作成して、イメージ通りに表示されるかチェックする作業をしました。

実際に開発中のアプリをビルドして確認していくのはビルドに時間がかかるためです。

macを利用しているデザイナーさんであればアプリエンジニアが手助けしてあげればなんとか自前でビルドして確認するのは難しくなさそうです。

表示できないSVGの対応ですが、SVGOMGとinkscapeのパスの簡略化の2つで大体解決できたと思います。

inkscapeできれいなSVGファイル(xmlファイル的な観点で)を目指していくこともできますが、最終的な見た目はそんなに変わらないと思いますので、こだわりすぎずに進めていくのが作業時間の節約になりそうです。