FORMAT COMPARISON
AI vs SVG
AIとSVGはいずれもベクター図版を扱えますが、AIはAdobe Illustratorで制作を続けるための作業ファイル、SVGはWebや幅広い環境で配布・表示するためのオープンなベクター形式です。制作工程と公開先を分けて選びます。
AIとSVG、どちらを選ぶ？
Illustratorでレイヤーや編集内容を保ちながら制作を続けるならAIを、Webサイト・UI・アイコンとして配信するならSVGを選びます。AIをそのままWeb公開用の画像として渡すのではなく、必要に応じてSVGへ書き出します。
AI向き
Illustratorでの編集・ベクター制作の作業ファイル
- Illustratorの編集元保存
- ベクター図版の制作工程
SVG向き
ロゴ・図形・アイコン
- 拡大縮小が必要な図版
- UIアイコン
基本情報を比較
AIとSVGの主な違いを確認できます。
| 項目 | AI | SVG |
|---|---|---|
| 拡張子 | .ai | .svg |
| MIME Type | application/postscript | image/svg+xml |
| 主な用途 | Illustratorでの編集・ベクター制作の作業ファイル | ロゴ・図形・アイコン |
| ベクター | 対応 | 対応 |
| 開く方法 | Adobe Illustratorまたは対応ソフトで開きます。重要な表現は対象ソフトで確認します。 | ブラウザ、ベクター編集ソフト、対応ビューアで開けます。 |
| 書き出し・変換 | Webや配布用にはSVG、PDF、PNGなどへ書き出し、AIの編集元は別に保管します。 | PNGなどのラスター画像へ書き出せます。 |
用途別の選び方
作りたいものや使う場面から選べます。
Illustratorの編集元保存
Illustratorでの編集・ベクター制作の作業ファイル
AI向きベクター図版の制作工程
Illustratorでの編集・ベクター制作の作業ファイル
AI向き拡大縮小が必要な図版
ロゴ・図形・アイコン
SVG向きUIアイコン
ロゴ・図形・アイコン
SVG向き確認ポイント 1
AIはIllustratorの編集元として使い、編集可能な制作データを保持する
使い分け確認ポイント 2
SVGはW3C標準のベクター画像で、ブラウザでの表示やWeb配信に適する
使い分け選ぶ理由を詳しく
- AIからSVGへ書き出す際は、Illustrator固有の効果や編集情報が同じ形で維持されるとは限らない