AI から SVG への変換

AI から SVG への変換とは

AI から SVG への変換とは、Adobe Illustrator で作成されたベクター原稿を、すべての最新ブラウザがサポートするオープンな Scalable Vector Graphics 形式に変換することです。変換時には、原稿の中身 (ベクターパス、アンカーポイント、テキストブロック、塗り、線、グラデーション、不透明度、マスク、グループ) がベクターの性質を保ったまま SVG に移され、HTML への直接埋め込み、CSS での利用、任意のブラウザでの表示、テキストエディタやグラフィックエディタでの編集が可能になります。

AI は Adobe Illustrator 専用のフォーマットで、プロ向けベクターグラフィックエディタの代表格です。AI には原稿のベクターデータに加えて、レイヤー、効果、シンボル、ブラシ、カラーサンプル、アートボード、出力設定などが格納されます。最大の特徴は、ネイティブで AI を扱うには Adobe Creative Cloud のライセンスや対応バージョンの Illustrator が必要になることです。ファイル構造は Illustrator 自身のワークフロー向けに最適化されており、Illustrator を持たない人にとって AI ファイルは事実上開けない素材になります。さらに Web やアプリにはまったく不向きで、ブラウザや OS が AI を直接表示することはありません。

SVG は W3C が策定したオープンなベクターグラフィック標準で、すべての最新ブラウザが追加プラグインなしでサポートしています。SVG は画像を数学的に記述します。各図形はパス、塗り、線、属性の集合として保存されます。ファイル自体は XML 形式のテキストなので、SVG はどんなサイズにもロスレスに拡大でき、シンプルな図形なら非常に小さなサイズに収まり、グラフィックエディタでもテキストエディタでも編集できます。SVG は検索エンジンにインデックスされ、アニメーション、インタラクティブ機能、ARIA によるアクセシビリティにも対応します。

AI から SVG への変換は、閉じた編集用ソースを Web やアプリ向けの汎用ベクター素材に変えます。変換後はロゴ、アイコン、イラストがスマートフォン、タブレット、モニター、Retina 画面で同じ鮮明さで表示され、拡大しても品質を失わず、ページ、メール、プレゼンテーション、UI に簡単に組み込めます。

AI と SVG のフォーマット比較

最大の違いは利用シーンです。AI はデザイナーの作業用ドキュメントで、原稿の作成、調整、最終版への仕上げを行うものです。SVG は、ブラウザ、Web サイト、モバイルアプリ、あらゆる UI で結果を表示するための汎用ベクター素材です。AI を SVG に変換するということは、閉じたソースから、公開とスケールに耐えるオープンな素材に切り替えることです。AI は作者のもとにマスターファイルとして残り、SVG は本番環境 (Web サイト、デザインシステム、アプリ、メール、モバイルゲーム、印刷テンプレート) に渡されます。

AI ではなく SVG を使う場面

Web サイト上のロゴとブランドマーク

企業ロゴは SVG 形式と非常に相性が良いものです。ラスター画像と異なり、SVG ロゴはスマートフォンの Retina ディスプレイ、通常の解像度のモニター、テレビの大画面でも同じ鮮明さで表示されます。ロゴが AI で保管されている場合、そのまま Web サイトに掲載することはできず、ブラウザが理解できる形式に変換する必要があります。SVG ならこの課題をきれいに解決します。1 つのファイルですべての端末に対応でき、ピクセル密度ごとに別バージョンを用意する必要がなく、サイズも最小限で、ラスター素材より速く読み込めます。ロゴの色は CSS 1 行で変更でき、Illustrator で原稿を作り直すことなくダークテーマや季節バリエーションに対応できます。

UI のアイコン

最新の Web アプリやモバイルアプリは、アイコンに SVG を積極的に活用しています。1 つの SVG セットがあらゆる画面サイズに対応します。ヘッダー内の 16 × 16 のアイコンとしても、機能説明ページの大きなアイコンとしても鮮明に表示できます。SVG 形式のアイコンは色や線の太さ、ホバー時の挙動をプログラムから制御できるため、静的な画像ではなく、生きた UI 要素になります。Illustrator で組まれたアイコンセットを AI から SVG に変換すれば、デザインシステム、フロントエンドコンポーネント、UI キット向けの完成したアセットになります。

Web ページ向けのイラスト

デザイナーは記事、ランディングページ、トップページ、製品紹介ブロックなどのイラストを Illustrator で描くことが多いものです。これらは SVG として公開すると便利です。コンテナ幅に合わせて拡縮しても鮮明さを保ち、コンパクトなテキスト表現のおかげで読み込みも速くなります。トップ用の大きなヒーローイラストも、ラスターの高解像度版より SVG のほうがサイズが小さく、デスクトップでもスマートフォンでも同等に美しく見えます。

モバイルアプリとゲーム

アプリ開発者は、ナビゲーションアイコン、ボタン、装飾用背景、起動画面の要素、ちょっとしたアニメーションなど、UI のスケーラブルな要素に SVG を好みます。SVG は特定の解像度に依存しないため、コンパクトなスマートフォンからタブレットまで同じ素材で対応できます。モバイルゲームでは UI 要素、アイテムアイコン、進捗インジケータなどに SVG が使われます。AI から SVG への変換は、デザイナーの原稿を開発者向けの完成された素材に変えてくれます。

メールマガジンとテンプレート

メール内のラスターグラフィックは、最新ディスプレイではぼやけて見えがちで、大きな高解像度画像は読み込みも遅くなります。SVG のメール対応は徐々に広がっており、現在の主要メールクライアントでは正しく表示されます。ニュースレターのソーシャルアイコン、区切り線、装飾要素を SVG にすれば、サイズを抑えつつどの画面でも鮮明さを保てます。ブランドの一貫性や視覚的な美しさを大事にするメールでは、SVG はラスター形式に代わる現実的な選択肢になります。

プレゼンテーション、ドキュメント、インフォグラフィック

最新のオフィススイートやプレゼンソフトは、SVG を通常の画像と同じように貼り付けられます。ラスターより優位な点は明らかで、プロジェクターや大画面でも、どんなスケールでもベクターグラフィックは鮮明さを保ちます。インフォグラフィック、図解、フローチャート、技術図面を SVG にすれば、小さなプレビューでも会場の全画面表示でも美しく見えます。後で大判印刷する可能性のあるドキュメントでも、SVG ソースのほうがラスターより有利です。

あらゆるサイズでの印刷

SVG は AI のベクターの性質をオープンな標準に持ち込みます。鉛筆に貼るシールから建物に掲げる横断幕まで、あらゆるサイズの印刷に向きます。デザイナーは SVG をそのまま印刷会社、広告代理店、ノベルティ製造業者に渡せます。受け手は Adobe Illustrator がなくても、自分のベクターエディタでファイルを開けます。これは、別々のソフトを使う分散したチームや外部パートナーとの協業に役立ちます。

アニメーションとインタラクティブ

SVG は CSS によるアニメーションとスクリプトによるインタラクティブ動作をブラウザ内で直接実現できます。ホバー時にアイコンの色を変える、ページ読み込み時にロゴを滑らかに表示する、クリックでインフォグラフィックの要素を展開するといった演出が可能です。これらは速く、滑らかに動作し、重いライブラリも不要です。AI から SVG への変換は、ベクター素材なしには形を動かせない以上、アニメーション化への第一歩になります。

変換の技術的なポイント

AI を SVG に変換するときに行われること

処理は複数の段階に分かれます。まず AI 原稿の構造をアートボード、レイヤー、オブジェクト、テキストブロック、塗り、線、効果、マスク、グループに分解します。次に、各要素を SVG の言語で記述します。ベクターパスは path コマンドに変換され、塗りや線は属性として転記され、テキストは設定に応じてテキスト要素のままにするか曲線に変換されます。レイヤー構造は意味のある識別子を持つグループに置き換えられ、後から CSS やスクリプトで個別パーツを扱いやすくなります。AI 内のアートボード数に応じて、1 つまたは複数の SVG が出力されます。

ベクターの性質の保持

SVG のラスター形式に対する最大の利点は、ベクターオブジェクトがベクターのまま残ることです。ロゴ、アイコン、イラストは拡大しても鮮明さを失わず、お気に入りの小さなアイコンとしても、巨大な横断幕としてもピクセル化やぼやけなく表示できます。ベクターオブジェクトとして保存された文字はどの解像度でもシャープで、テキスト要素として残された文字は検索エンジンにインデックスされ、画面読み上げソフトで読み上げられます。

アートボードと複数ファイル出力

Adobe Illustrator は 1 つの AI ファイル内に複数のアートボードを持てます。アイコンセット、ロゴシリーズ、ニュースレター用のイラストセットなど、関連する原稿群を扱うのに便利です。一方 SVG は 1 つのルートドキュメントを前提とした形式です。そのため、複数アートボードのファイルを変換すると、アートボードごとに 1 つずつ、複数の SVG が生成されます。Web 開発の現場では、各アイコンが個別の SVG になり、デザインシステムでの利用やスプライトへの組み込みが容易です。

カラースペース

AI は原稿の元のカラースペース (CMYK、RGB、Pantone、Lab) を保持します。SVG は Web 形式として、主に RGB と CSS の名前付き色を使用します。変換時には色値が RGB に変換されるため、Web、画面、モバイルアプリでの利用に向いています。原稿が印刷向けに CMYK で作られていた場合、SVG での色再現は視覚的には近いものの、数学的には異なります。これはオンライン用途では正常な挙動で、UI、アイコン、バナー、Web 用イラストでは問題になりません。Pantone やスポットカラーも近い RGB 値に変換されます。

レイヤーとグループの保持

AI のレイヤー構造は SVG では意味のある識別子を持つグループ (g タグ) として表現されます。これは開発者やデザイナーにとって便利です。イラストの個別パーツを CSS やスクリプトで指定し、独立にスタイルを当てたりアニメーションさせたりできます。マスク、クリッピングパス、描画モード、不透明度は SVG がサポートする構文として転送されます。SVG の標準機能では表現しきれない複雑な効果は単純化されることがあり、その場合は重要なページで結果を目視確認するのが安心です。

SVG 内のフォント

SVG 内のテキストは、テキスト要素のままにするか、曲線に変換できます。テキスト要素は編集、選択、コピー、検索エンジンのインデックスを保てますが、受け手側に該当フォントがないとブラウザが既定フォントに置き換えてしまいます。曲線への変換はどの受け手でも見た目が同じになる保証がありますが、テキストが図形になり、検索もコピーもできなくなります。用途次第で、ロゴや見出しは曲線、説明文や長い本文は Web フォントを読み込んだテキスト要素にすることが多いです。

変換に向くファイル

理想的な候補:

• Web サイトやデザインシステムに掲載するロゴやブランドマーク
• Web アプリやモバイル UI 向けのアイコンセット
• 記事、ブログ、トップページ、ランディングページのイラスト
• 技術図、ダイアグラム、インフォグラフィック、フローチャート
• ページの装飾要素 (フレーム、区切り、パターン)
• メールマガジン、バナー、広告枠向けのグラフィック
• 後で Web 上でアニメーション化やインタラクティブ化するためのテンプレート

条件付きで向くもの:

• 細部や効果が非常に多い複雑なイラスト。すべて転送はされますが SVG のサイズが大きくなる場合があるため、自分の用途で本当に必要か確認してください
• 特殊なフォントを多用したファイル。Web フォントを使うか、テキストを曲線に変換するかを事前に決めてください
• 印刷向けに CMYK で作成された原稿。SVG への変換で色は RGB になります。オンライン用途では問題ありませんが、印刷向けには別途対応形式へ書き出すのがおすすめです
• 重い描画モードを多用した多レイヤー原稿。複雑な組み合わせは単純化されることがあるため、重要なブロックは目視で比較してください

変換する意味が薄いもの:

• 何度も編集する予定の未完成のドラフト
• ラスター画像を多く貼り込んだ原稿。SVG 内に埋め込まれるだけで、ベクター形式の利点が得られません
• 高解像度かつ厳密な色再現が必要な印刷向け原稿。元の形式のままにするか、専用の印刷形式に書き出すほうが向いています

SVG 形式の利点

SVG は AI やラスター形式に対して、いくつかの独自の利点があります。

ブラウザでの普遍的なサポート。 SVG はすべての最新ブラウザが拡張機能なしでネイティブに開けます。HTML ページに組み込んだり、画像として配置したり、CSS の背景に使ったりしても、サイト訪問者の環境で同じように正しく表示されます。

オープンな国際標準。 SVG は W3C の標準として文書化されており、特定企業の運命に依存しません。これは長寿命を保証します。1 社が対応をやめてもフォーマット自体は消えません。今日作成したファイルが数十年後にも読めます。

ロスレスな拡縮。 SVG のベクター内容は、どんなサイズに拡大してもピクセル化が起きません。同じファイルが、小さなアイコン、中サイズのイラスト、トップページの大きなバナーすべてに使えます。

シンプルな図形での小さなサイズ。 ロゴ、アイコン、図解は SVG なら同等のラスター画像より大幅に小さくなります。これがページの読み込みを速くし、モバイルユーザーの通信量を節約します。

どの編集ソフトでも編集可能。 SVG は XML テキストなので、各種グラフィックエディタ、ブラウザの開発者ツール、さらには通常のテキストエディタでも開いて編集できます。色、サイズ、形は簡単な書き換えで変更できます。

CSS によるスタイリング。 色、線の太さ、不透明度、SVG 要素の挙動は CSS ルールで指定できます。これによりダークテーマ、季節装飾、アダプティブなバリエーションなどを、原稿を作り直さずに簡単に追加できます。

アニメーションとインタラクティブ。 SVG は CSS とスクリプトによるアニメーションをサポートします。滑らかなトランジション、ホバーへの反応、スクロール時の表示、インタラクティブなチャートやインフォグラフィックなどが実現できます。

アクセシビリティ。 SVG は ARIA 属性や title、desc タグによる画像説明をサポートします。スクリーンリーダー利用者にとって重要であり、Web アクセシビリティ基準への準拠にも役立ちます。

検索エンジンによるインデックス。 SVG 内のテキストは検索エンジンに読み取られ、ファイル自体に意味のあるグループ名やレイヤー名を含めることができます。これは、グラフィックの多いページの SEO 改善に寄与します。

制限と推奨事項

最大の制限は、SVG が写真や数百万色の階調を持つ画像を想定していない点です。原稿に埋め込まれたラスター写真があれば、SVG 内でもラスターのまま残り、その部分にはベクター形式の利点はありません。写真コンテンツには適切なラスター形式を使い、SVG はベクターグラフィック向けに使い分けるのが無難です。

次の制限はカラースペースです。SVG は Web 形式として RGB を基本にしています。Illustrator 原稿が印刷用に CMYK で作られていた場合、色は RGB に変換され、印刷の正確な色再現とは多少異なる可能性があります。Web では問題ありませんが、厳密な印刷案件では CMYK に対応した形式へ別途書き出すほうが安全です。

3 つ目の制限は複雑な効果です。Illustrator 固有の一部の効果 (3D、特殊なブレンド、独自フィルタ) は SVG の規約に従って解釈され、簡略化されることがあります。重要な原稿では公開前に AI と SVG を目視で比較してください。

4 つ目の制限はフォントです。SVG のテキストは、受け手側に該当フォントがあるか、ページに Web フォントが組み込まれている場合にのみ正確に表示されます。すべての環境で同じ文字表示を保証したい場合は、変換前にテキストブロックを曲線に変換してください。ファイルは重くなりますが、フォント置き換えのリスクをなくせます。

Web サイト用に SVG を準備する場合は、変換後に最適化を行いましょう。座標の小数点以下桁数を減らす、不要なメタデータやコメントを削除する、ほとんど使われていないグループを単純化する、といった手順です。これによりファイルサイズが減り、ページの読み込みが速くなります。アイコンについては、複数の SVG を 1 つのファイルにスプライトとしてまとめると、サーバへのリクエスト数を減らせます。