imagesetとは？
Xcodeのimagesetは、画像ファイルとContents.jsonの説明が入った、名前付きのリソースディレクトリです。Assets.xcassetsカタログの中に置きます。アプリはリソース名で画像を参照し、カタログには、どのファイルがどの倍率や表現を担当するかが書かれています。
iOS画像アセットの書き出しツールは、アップロードしたアートワークか、ロックを解除済みの結果から、このフォルダー構成を作ります。シンプルなベクターのSVGをそのままパッケージにすることも、透過のPNGのバリエーションを書き出すこともできます。写真をカタログに入れただけで、ベクターのパスになるわけではありません。
シンプルで拡大縮小したいアートワークにはベクターを
元の画像が、塗りつぶしのパスとシンプルな図形でできたSVGなら、「ベクターSVG・iOS 13以降」を選びます。書き出しツールは対応している形状を統合し、Preserve Vector Dataを有効にしたimagesetを書き出します。SVGの画像アセットにはiOS 13以降が必要です。
この変換では、あえて限られた範囲のベクター機能だけを使っています。テキストは先にアウトライン化してください。グラデーション、マスク、クリッピングなどの効果は、このツールではPNGでの出力が必要です。対応していない機能があるとエラーになるので、別の方法を選べます。スクリプトなど安全でないものは削除され、一覧で表示されます。ファイルを取り込む前に、警告があれば読んでください。
ベクターファイルは拡大縮小できる形状を保ちますが、デザインそのものがよくなるわけではありません。何千もの小さな図形でできた複雑すぎるトレースは、きれいなビットマップより使いにくいこともあります。特に細い線や小さな文字がある場合は、実際のUIで使うサイズで画像を確認してください。
サイズが決まった画像リソースにはPNGを
PNGのバリエーションは、SVG、PNG、JPEG、WebP、HEICから作れます。SVGはPNGに書き出され、PNG、JPEG、WebP、HEICはメタデータが削除されます。透過は保たれます。編集できる形状より、互換性のある描画効果のほうが大事な場合に便利です。
幅の設定は、最終的なピクセル数ではなくポイントで指定します。幅を64ポイントにすると、次のファイルが書き出されます。
| 倍率 | 幅（ピクセル） | ファイル名 |
|---|---|---|
| 1× | 64 | artwork@1x.png |
| 2× | 128 | artwork@2x.png |
| 3× | 192 | artwork@3x.png |
高さは元の縦横比に合わせて決まります。幅の2倍の高さがある画像なら、1×で64×128ピクセルになります。縦長の画像が書き出しの高さの上限を超える場合は、ポイントの幅を小さくしてください。幅の設定はベクターのimagesetには影響せず、ベクターは元のviewBoxを保ちます。
カタログを置き換えずに取り込む
ダウンロードしたファイルを解凍し、Assets.xcassets/artwork.imageset（または指定したリソース名のディレクトリ）を探します。そのimagesetを既存のカタログにドラッグしてください。カタログ全体を置き換えてはいけません。アプリがすでに使っている色、アイコン、その他のリソースが入っている場合があります。
SwiftUIでは、artworkという名前のリソースをImage("artwork")で参照できます。レイアウトや拡大縮小の動作は、アプリ側で必要に応じて設定してください。取り込んだアセットはXcodeと実機で確認し、明るい背景と暗い背景の両方で透明な輪郭も見ておきましょう。
imagesetはSF Symbolではなく、そのシンボル形式の作り方や動作は引き継ぎません。また、アプリのランチャーアイコンとも別物です。AppIconのアセットカタログが必要なときはAndroid・iOSアプリアイコン作成を、AndroidのUI用drawableにはAndroid VectorDrawableへの変換ツールを使ってください。