Xcodeで扱う画像は、SVGの方がキレイで画面サイズ対応がシンプルなのでしょうか？

##よりキレイな画像を、画面サイズ対応しながら、且つ短期作業で実装するには
swiftでSNSアイコンを入れる実装の途中です。
いろいろなデバイスでサイズ対応できるように@2×などをつけてたくさん画像を用意していますが、
実際SVGやpdfの方がきれいに見えるのでしょうか？

すでに検討された事がある方、あるいはこれからXcodeでSVGも標準になるらしいから使うといいよなどご教授いただけましたら幸いです。

##pngで対応する場合
→デザイナーからはSVGでファイルをもらっているので@1×、@2×、@3×で変換書き出しをして、普通に画像で実装
・扱いやすくなるが、変換の手間、画像サイズの膨張、デバイスが増えたらゲジゲジになるかも

##svgで対応する場合
→デザイナーからもらったsvgファイルをそのままリソースディレクトリに入れて、
SVGKitというcocoapodsライブラリを入れて扱う
・きれいに見えやすくなる可能性があるが、試す手間があるのと、ライブラリ依存なのが懸念点

ぜひ経験ある方にお力添えいただけましたら幸いです！
よろしくお願いします！

行動規範の内容に同意します

回答1件

ベストアンサー

SVG とは Scalable Vector Graphics の略語であるように、ベクター方式と呼ばれる画像です。
これは画像を「点の集合体（ラスター画像）」とするもの（png 等）ではなく、「描画命令の組み合わせ」で表現しています。

例えば日本の国旗（日の丸）を表現することを考えた場合、SVG では

白で全域を描画
中央に半径〇〇で赤い円を描いて塗りつぶす

というようなことをします。

つまり、サイズ非依存なのです。座標系に対する描画命令なので、実際の描画は座標系を描画エリアに対して拡大・縮小して適用するだけです（半径100 となっているのを半径200に拡大するとか）。ですからきれいさでいえば SVG の方がよほどよいのです（ただし縮小したときに「デフォルメ」することはできません）。

※SVG では image としてラスター画像を入れることもできます。その場合はそちらについては拡大・縮小でジャギーが出ます

投稿2017/12/06 08:09