XcodeにSVGやPDF画像データを利用する方法

はじめに

Xcodeでデザイナーさんから3種類のサイズ(1x, 2x, 3x)を出力していただいたり、エンジニアがわざわざ３つの画像データを登録するのは面倒ですよね。
時々1x, 2x, 2xと誤って画像選択されていることもあり、できる限りHuman Errorは発生しない仕組みにした方が良いかと思います。

メリット

1. 基本的にVector画像データ（SVGやPDF）はPNGデータよりもサイズが小さくなります。
2. 1x, 2x, 3x... kx とサイズごとに異なる画像データを用意しなくて済みます。
3. 品質を落とさずに自動的にScaliingされます。

方法

1. 新規Image Setを作成します
2. 右側の「Preserve Vector Data」にチェックを入れます
3. 右側の Scalesを「Single Scale」に選択します
4. SVG or PDF画像をアップロードします

注意

• もし「Preserve Vector Data」にチェックを入れない場合、Xcodeは自動的にVectorデータを 1x,2x,3xのサイズ別データに変換してしまうため、自動的にスケールしなくなってしまいます。
• SVGデータはPDFデータよりもサイズが小さくて済み好ましいのですが、iOS13以上から利用可能なため、iOS12以下をサポートしている場合は、PDFデータのみ利用可能です