AI (Adobe Illustrator)ファイルをSVGに変換する方法
AIファイルとSVGファイルとは？ なぜ変換が必要なのか？
AIファイルはAdobe Illustratorのネイティブ形式で、ベクターアートワークを独自の構造で保存します。Illustratorと一部の対応アプリしか完全に理解できません。ライブエフェクト、編集可能なテキスト、複雑なブレンドモードといったIllustrator固有の機能をサポートしており、非常に強力です。しかし、その力はすべてブラックボックスの中に閉じ込められています。AIファイルは閉じたエコシステムなのです。ブラウザやウェブアプリ、開発者のビルドパイプラインで使おうとしても、まったく役に立ちません。 一方、SVG（Scalable Vector Graphics）はオープンスタンダードです。W3Cによって維持されているこのXMLベースの形式は、すべてのモダンブラウザでネイティブにレンダリングされます。16×16ピクセルの小さなファビコンから4Kの巨大なビルボードまで、鮮明さを一切損なうことなく拡大縮小できます。中身はただのプレーンテキストなので、開発者はパスや色、アニメーションをコードで直接操作することさえ可能です。8KBのSVGとして書き出されたロゴは、どんなサイズでも完璧に見えますが、同じロゴを高解像度のPNGにすると、簡単に200KB以上になってしまいます。 このAIからSVGへの変換は、実際のワークフローでは日常茶飯事です。デザイナーがウェブ開発者にロゴを渡すとき。UIチームがアイコンアセットを必要とするとき。印刷会社がウェブサイトにブランディングを掲載したいとき。問題は、この変換が常に完璧とは限らないことです。Illustrator特有の魔法、例えばラスターフィルターや特定のグラデーションメッシュ、リンクされたフォントなどには、SVGに直接対応するものがありません。これらの要素は、書き出す前に単純化するか、自動ツールによる（時には質の悪い）近似的な変換に頼るしかありません。このことを最初から理解しておけば、膨大な手戻り作業を回避できるでしょう。
最もクリーンな方法：Adobe Illustratorから直接SVGを書き出す
もしAdobe Illustratorをお持ちなら、直接書き出すのが最もクリーンで、コントロールしやすい結果を得るための最善の方法です。プロセス自体はシンプルですが、問題が起こりうるのは設定パネルです。 **ファイル > 書き出し > 別名で書き出し** と進み、形式のドロップダウンからSVGを選んで「書き出し」をクリックします。すると、IllustratorはSVGオプションダイアログを表示します。これらの設定は重要なので、細心の注意を払いましょう。 - **CSSプロパティ**: 後でCSSでスタイリングやアニメーションを行う場合は、「プレゼンテーション属性」が良い選択です。静的な画像であれば、どちらのオプションでも問題ありません。 - **フォント**: 「アウトラインに変換」に設定してください。もう一度言います。最終的なユーザーの環境にあなたが使ったフォントが確実にインストールされていると断言できない限り、必ずアウトラインに変換してください。これにより、文字の形状がベクターパスとして埋め込まれ、フォントの依存関係の問題を完全に回避できます。 - **画像**: アートワークに写真やテクスチャなどのラスター画像が含まれている場合は、「埋め込み」を選択します。「リンク」はファイルサイズを小さくしますが、壊れやすい外部ファイルパスへの依存関係を生み出してしまいます。 - **オブジェクトID**: 開発者がJavaScriptやCSSで特定の要素をターゲットにする必要がある場合は、「レイヤー名」を使用します。1バイトでも節約したい静的なアセットの場合は、「最小」で十分です。 - **小数点以下の桁数**: スクリーン用のグラフィックでは、値は「2」がほとんどの場合で正解です。「1」にすると数バイトを削れますが、複雑なカーブが目に見えて歪む可能性があります。「2」にしておきましょう。 - **縮小**: 本番用のアセットでは、必ずこれをチェックしてください。空白やコメントが削除され、ファイルサイズが10～20%ほど削減されます。 書き出しダイアログに進む前に、一つだけ重要な準備ステップがあります。SVGにうまく変換されないライブエフェクトは、**オブジェクト > アピアランスを分割** を使って、すべて分割または拡張しておく必要があります。例えば、Illustratorのドロップシャドウ効果は、消えてしまうか、SVG内で不格好なラスター画像に変換されてしまいます。いわゆるベクターファイルを開いたら、中にぼやけたJPEG画像が入っていてがっかりした経験がある人なら、この苦痛がよくわかるはずです。どちらの結果も、スケーラブルなグラフィックに求められるものではありません。
CocoConvertを使ってオンラインでAIをSVGに変換する
現実的に考えましょう。誰もがAdobe Creative Cloudの有効なサブスクリプションを持っているわけではありません。たとえ持っていたとしても、Illustratorがインストールされていないマシンで、手早く変換したい時もあります。そんな時には、オンラインコンバーターが最も実用的な解決策であり、CocoConvertがその役割を果たしてくれます。 [CocoConvertのAIからSVGへのコンバーター](/convert/ai-to-svg)でのプロセスは驚くほどシンプルです。AIファイルをアップロードし、処理が終わるのを少し待って、出来上がったSVGファイルをダウンロードするだけ。ソフトウェアも、標準的な変換であればサインアップも不要です。 もちろん、いくつかの基本的なルールがあります。CocoConvertは最大100MBまでのファイルに対応しており、これはほとんどのAIドキュメントには十分すぎる容量です。この上限を超えるのは、高解像度の画像が大量に含まれた非常に複雑な印刷用ファイルくらいで、そうしたファイルはいずれにせよIllustratorで扱うのが最適です。 何が一番うまくいくか？フラットなベクターアートワークです。基本的なパスとシンプルなグラデーションで構成されたロゴ、アイコン、イラストは、美しく変換されます。もしあなたのAIファイルが、単色の塗りと線で構成されたクリーンなベクターシェイプが主であれば、非常に精度の高いSVGが期待できます。問題が起きるのは、Illustrator独自の魔法を使った場合です。グラデーションメッシュ、複雑なブレンドモード、「ラフ」のようなライブエフェクトには、直接対応するSVGの機能がありません。CocoConvertはそれらを近似的に再現しますが、これらの機能に大きく依存したアートの場合、出力結果に手作業での修正が必要になるかもしれません。フォントについても同様です。AIファイルがアウトライン化されていないライブテキストを使用している場合、コンバーターは代替フォントに置き換えます。正確なタイポグラフィを求めるなら、アップロードする前に必ずIllustratorでテキストをアウトライン化しておきましょう。
無料の代替ツール：Inkscapeなど
Inkscapeは、AIをSVGに非常にうまく変換できる、素晴らしくて無料のオープンソース・ベクターエディターです。Adobeエコシステムの外部で定期的にベクターを扱う人にとっては、必須のツールです。 Inkscapeでは、**ファイル > 開く** でAIファイルを開き、すぐに **ファイル > 名前を付けて保存** でSVGを形式として選んで保存するだけです。「標準SVG」と「Inkscape SVG」のオプションが表示されますが、ブラウザや他のツールとの互換性を最大限に高めるために、必ず「標準SVG」を選択してください。 しかし、そこには大きな落とし穴があります。それはPDF互換性です。Inkscapeを含むほとんどのサードパーティ製ツールは、実はネイティブのAIデータを読み込んでいるわけではありません。Illustratorがファイルに埋め込むPDFストリームを読み込んでいるのです。もしAIファイルが「PDF互換ファイルを作成」オプションをチェックせずに保存されていた場合、Inkscapeはそのファイルを開けません。ただの空白のキャンバスが表示されるか、エラーが出るだけです。クライアントから送られてきたAIファイルが開かない場合、ほぼ間違いなくこれが原因です。そのオプションを有効にして再保存してもらうようお願いする必要があります。 他のツールも存在します。約10,000円の買い切り型ソフトであるAffinity Designerは、優れたAIインポート機能を持ち、非常にクリーンなSVGを生成します。私の意見では、Adobeのサブスクリプションを利用しないのであれば、これが最良の長期的投資です。コマンドライン愛好家向けには `cairosvg` や `svg-convert` といったツールもありますが、これらはしばしばAIを一度別の形式に変換する必要があり、シンプルなワークフローという目的から外れてしまいます。 一度きりの簡単な変換であれば、CocoConvertのオンラインツールの方が、Inkscapeをインストールして使い方を覚えるよりも手っ取り早いでしょう。しかし、毎週のようにこの作業を行うのであれば、Inkscapeに時間を投資するか、Affinity Designerにお金を投資する価値は十分にあります。
よくある問題とその解決策
変換は終わったのに、SVGの見た目が…おかしい。よくあることです。ここでは、よくある原因とその解決策を紹介します。 **フォントが見つからない、または置き換えられている**: SVGを開くと、美しく慎重に選んだ書体が、一般的なシステムフォントに置き換わっている。解決策は、フォントを無関係なものにしてしまうことです。変換する前に、Illustratorですべてのテキストを選択し、アウトライン化します（**書式 > アウトラインを作成**、または Shift+Ctrl+O / Shift+Cmd+O）。これにより、文字が単なるベクターパスに変わり、フォントへの依存がなくなります。 **SVG内にラスターのゴミが残っている**: ファイルはベクターのはずなのに、ぼやけたピクセルが見えたり、ファイルサイズが驚くほど大きかったりする。これは、Illustratorのエフェクトが書き出し時にラスタライズされた典型的な兆候です。解決策は、自分自身で、しかしより良い方法でそれを行うことです。Illustratorで、書き出す前に **オブジェクト > アピアランスを分割** を実行します。これにより、ほとんどのライブエフェクトがベクターパスに変換されます。 **色が違って見える**: ブランドの鮮やかな青が、くすんで見える。これはおそらくカラースペースの問題です。Illustratorは印刷物用にCMYKをデフォルトにすることが多いですが、SVGはウェブ形式であり、RGBの世界で機能します。解決策は、書き出す前にIllustratorの **ファイル > ドキュメントのカラーモード > RGBカラー** でドキュメントのカラーモードを変更することです。 **SVGファイルが巨大すぎる**: 15KB程度であるべきシンプルなロゴが、なぜか2MBになっている。これは通常、埋め込まれたラスター画像、過剰な小数点以下の精度、または単純化されていない複雑なグラデーションメッシュが原因です。解決策は、縮小を有効にして再書き出しし、小数点以下の桁数を2に減らし、作業を始める前に複雑なオブジェクトを単純化または拡張することです。 **オンラインコンバーターで出力が空になる**: AIファイルをアップロードしたら、空のSVGが返ってきた。先ほど話したPDF互換性の設定を覚えていますか？ここで問題が起こるのです。そのAIファイルは、おそらく「PDF互換ファイルを作成」のチェックボックスをオフにして保存されており、コンバーターが読み込むべきデータがないのです。唯一の解決策は、元のAIファイルをそのオプションを有効にして再保存することです。
変換後のSVGを最適化する
そのSVGをそのまま公開してはいけません。Illustratorから書き出したばかりのファイルでさえ、視覚的なメリットなくファイルサイズを増やす冗長なコードで肥大化していることがよくあります。ウェブで使用する場合、SVGをオプティマイザにかけることは譲れないステップです。 **SVGO**はSVG最適化の業界標準です。これはNode.jsのツールですが、そのエンジンは jakearchibald.github.io/svgomg にある非常に便利なウェブツールで利用できます。変換したSVGをアップロードするだけで、SVGOMGはライブプレビューとスライダーを表示し、ファイルサイズの削減効果をリアルタイムで確認させてくれます。ほとんどのアセットでは、コメントの削除、メタデータの削除、不要なグループの折りたたみ、パスの統合、空の属性の削除といったオプションを安全に有効にできます。ファイルサイズが30～60%削減されることも珍しくありません。 ただし、開発者が特定の要素をコードでターゲットにする予定がある場合は、「IDを削除」のようなオプションには注意してください。同様に、SVGがアニメーション用である場合は、過度なパスの統合は避けるべきです。一つの塊に統合されてしまったパスはアニメーション化できません。 本番のウェブアセットでは、SVGをインライン（HTMLに直接コードを貼り付ける）にするか、外部ファイル（`<img>`タグやCSSでリンクする）にするかも決める必要があります。インラインSVGはメインのCSSファイルでスタイルを適用できるため素晴らしいですが、HTMLドキュメントのサイズを増やし、個別にはキャッシュされません。外部SVGはブラウザによってキャッシュされますが、CSSでの操作が難しくなります。 最後のチェックです。W3C Markup Validation Serviceのようなツールを使って、最終的なSVGを検証してください。Chromeでは完璧に表示されるのにSafariではめちゃくちゃになるSVGのデバッグに1時間費やしたことのある人なら、このステップの価値がわかるはずです。簡単な検証パスで、不正なコードが本番環境での緊急事態になる前にキャッチできます。
状況に応じた最適な方法の選び方
では、AIファイルをSVGに変換する最善の方法は何でしょうか？結局のところ、あなたが誰で、何を達成しようとしているかによります。 **Illustratorを持つプロのデザイナーの場合：** 自分でやりましょう。エフェクト、グラデーション、カスタムフォントを使った複雑なアートワークを完璧に変換することを保証する唯一の方法は、テキストのアウトライン化、アピアランスの分割、RGBへの切り替えといった準備作業を行い、Illustrator自身のSVG書き出しダイアログを使うことです。あなたには究極のコントロール権があります。それを使いましょう。 **締め切りに追われる開発者の場合：** デザイナーがAIファイルをぽいっと渡して去ってしまった。パニックになる必要はありません。ロゴやアイコンのような単純なアセットであれば、[CocoConvertのAIからSVGへのツール](/convert/ai-to-svg)があなたの最速の手段です。手早く、ソフトウェアも不要で、非常に複雑なアートワークを扱っていない限り、仕事を終わらせてくれます。 **オープンソース愛好家や予算を気にするクリエイターの場合：** この作業を頻繁に行うけれど、Adobe税は払いたくない。そんなあなたにはInkscapeが答えです。強力で無料の代替ツールですが、PDF互換性の要件に注意しなければなりません。元のファイルが正しく保存されていないと、機能しません。 どの方法を選んだとしても、必ず自分の作業結果を確認してください。最低でもChromeとFirefoxで最終的なSVGを開いてみましょう。色が正しく、テキストがシャープで、きれいに拡大縮小できることを確認してください。2分間の目視チェックで、変換に関する問題のほとんどは、誰か他の人がデバッグする問題になる前に発見できます。