PerfectVector
著者: Jay Lee1 分で読める

AI画像生成は本物のベクターSVGを作れる?3つの方法

拡散モデルはピクセルを描くため、大半のAI画像はそのままSVGにはできません。技術上の理由と、実際にベクターを出力する3つの方法を解説します。

目次

主流のラスター画像生成にSVGを頼んでも、指示がどれほど「ベクターらしく」ても、公式の画像エンドポイントはラスターを返します。例えばOpenAIの画像APIはPNG、JPEG、WebPを出力形式として説明し、SVGはありません。ベクター形状とは出力構造が違います。この記事は、AIベクター出力の実際の3つの方法と、SVGを約束するツールがどの方法か見分ける方法を説明します。製品選びにはAI SVG生成とベクター化の比較、ここでは内部の仕組みを扱います。

要点
  • 画像モデルはピクセルを描きます。 拡散モデルは色の格子を作り、「ベクター風」は描ける見た目であって出力形式ではありません。
  • ベクターはピクセルの画像ではなく形状です。 SVGは曲線、点、塗りの命令なので、出力には構造の生成という別の作業が必要です。
  • 実際の方法は3つ: ネイティブにパスを書くモデル、SVGコードを書く言語モデル、ピクセルを生成してトレースする工程。それぞれ失敗の種類が違います。
  • 画像がすでにあるなら: 生成ではなくベクター化という変換の仕事です。

画像モデルがピクセルを描くことが問題の中心

拡散モデルはノイズから始め、段階的に色のピクセル格子へ整えて画像を生成します。「キツネのロゴ」「フラットなベクターイラスト」の知識は、その格子へ描く見た目の知識です。ベクター風を求めれば、単色、鋭い縁、整ったシルエットを描けます。しかし出力は、いわばそのスタイルを撮った写真です。モデルのほかの画像と同じ、ピクセルでできたラスターです。

SVGは全く別のオブジェクトです。標本の格子ではなく、「ここへ移動、そこで曲げ、この形をこの色で塗る」という命令の集まりです。直接出力するには、ピクセルを整える代わりに形状を書く必要があります。パスの始点、曲線の曲がり方、図形の重ね方を決めます。絵を描くよりコードを書くことに近い構造生成で、ピクセルモデルにはその出力経路がないため、指示を増やしても追加できません。

同じ円を記述する2つの方法
同じ円を、色付きピクセルの格子と、4つの制御点を持つ数学的な曲線1つで記述する方法の比較図
ラスターは数千のピクセルとして円を標本化し、ベクターは曲線1つとして示します。生成する作業の種類も違います。

方法1:本当にパスを書くモデル

少数のモデルは、パス、点、塗りを直接出力するネイティブのベクター生成を行います。RecraftはSVG生成を説明し、Adobe FireflyのText to Vectorも該当します。最初から拡大・色変更できる形状の、本物のSVGです。

注意点は2つです。まず、構造生成はピクセル生成より難しく、品質が予測しにくいことです。利用するデザイナーは案作りとして扱う傾向があり、生成ごとに変わるため、例えば同じキャラクターの10ポーズなど、プロジェクト全体の一貫性はまだ難しいです。次に、本物のパスでも整ったパスとは限りません。複雑に結合した編集しにくい形状になる場合があり、生成にもトレースと同じノード数と編集可能性のチェックが必要です。

方法2:言語モデルがSVGコードを書く

SVGはテキストなので、言語モデルも書けます。抜け道のように見えます。ChatGPTやGeminiへSVGを頼むと、本当のベクターコードが返ります。Claudeの画像からSVGへの代替手段の比較も、現在のArtifactsと画像アップロードの手順に同じ区別を適用します。円や長方形でできたアイコン、基本的な図解など、単純な幾何学内容には実際に使えます。

それを超えると急に難しくなります。モデルは描いた画像を見ず、文を書くように次の妥当なトークンを予測して座標を書きます。有機的な形はずれ、曲線は折れ、要素が意図せず重なり、複雑さで誤りが増えます。既存画像も再現できず、ロゴを見て正確な曲線をパスデータへ転記できません。実在するが狭い方法で、六角形バッジにはよくても作品には向きません。

Claudeがアップロード画像にできることで、コードとトレースの限界を説明しています。

方法3:ピクセルを生成してトレースする

最も一般的な「AI SVG生成」は上のどちらでもなく、工程の組み合わせです。ピクセルモデルが画像を作り、自動トレースが変換し、1段階として提示します。この構造を自社サイトで公開するものもあります。

方法自体に問題はありませんが、トレースの規則を引き継ぐため、仕組みを知るべきです。フラットで高コントラストならよくトレースでき、グラデーションや絵画風は単純化・肥大化し、中間ラスターが復元できる細部の上限を決めます。期待外れの場合は、通常生成段階が元からトレースに向かないものを作り、下流のツールでは直せないためです。

どの方法か見分ける

製品ページが仕組みを明示しなくても、出力が手掛かりになります。

  1. テキストエディターで開く。 妥当な構造のパスはネイティブ生成か整ったトレースを示唆します。SVGはラスターの埋め込み・参照<image>も許すため、あればピクセルに依存する可能性があります。
  2. 図形を数える。 ネイティブ生成は意図したレイヤー付きオブジェクトになりやすく、トレースは色領域ごとの図形と、元のノイズを反映するノード数になりやすいです。
  3. 文字を頼む。 ネイティブモデルもトレースも整った文字に苦戦し、言語モデルは実際の<text>や単純図形で描きます。崩れた文字はラスター生成後トレースの手掛かりです。
  4. 同じ指示を2回使う。 大きな変動は生成の特徴です。同じ画像を2回トレースすれば同じ結果になります。

自分に必要な方法を選ぶ

「AIにベクターは無理」というより、「どの仕組みを使うか知る」ことが大切です。説明から新作が必要なら、上の制約を踏まえ方法1か3を使い、比較ガイドで選びます。単純な幾何学アイコンなら方法2で十分かもしれません。しかし既存の画像、ロゴ、絵、気に入ったAI画像があるなら、生成は問題ではありません。必要なのは、手元のピクセルを必要なパスへ変えるベクター化です。

PerfectVectorを使った場合

PerfectVectorは変換側です。上の仕組みこそ、独立したツールとして存在する理由です。新作を生成せず、既存画像を色ごとの整った低ノードの編集可能なパスへ再構成します。ピクセル生成の方法が最後に必要とし、指示では実行できない段階です。本物のSVGにしたいAI画像などがあるなら、変換し、返ったパスを調べます。最初の変換は無料でカード不要です。

よくある質問

ラスター画像生成がSVGを直接返せないのはなぜですか? 出力インターフェースがラスターを返す一方、SVGはパス、図形、文字などの形状を記述するためです。「ベクター風」で見た目は変わっても、対応形式にSVGは追加されません。

「ベクター風」のAIアートは実際にベクターですか? いいえ。フラットな色と整った縁で似せたラスターで、ピクセルのままです。PNGと同じく拡大でぼけますが、トレースには向き、本当のベクター化へのよい入力です。

本物のSVGを生成できるAIはありますか? はい。一部はネイティブにパスを作り、言語モデルも単純な幾何学グラフィックのコードを書けます。ただし前者は結果が変動し、後者は基本図形を超えると難しくなります。

画像生成はいずれ直接SVGを出力しますか? ネイティブ生成はすでにあり改善しているため、提供ツールは増えるでしょう。ピクセル生成自体には別の出力構造が必要で、現在はトレースを追加しています。将来もファイルを開いてパスを見る確認は同じです。

AI画像のトレースはネイティブ生成と同じくらいよいですか? 失敗の種類が違います。トレースは入力に忠実で、フラットで整った生成物にはよいパス、絵画風には悪い結果になります。ネイティブ生成は本物の形状でもデザインを創作します。既存の再現にはトレース、新作には生成が向きます。

AI生成SVGがIllustratorで乱れて見えるのはなぜですか? 元ラスターが複雑すぎてノイズの多い重いパスになったか、ネイティブ形状が結合・過剰構築された可能性があります。ノード数と個別選択を確認します。トレースの場合はよりきれいな元画像や変換で通常改善します。

参考資料

  1. OpenAI:画像生成ガイド — 画像APIのラスター出力形式を説明します。
  2. Recraft:Recraft V2モデル — ネイティブSVG出力を持つモデルです。
  3. Adobe Firefly:テキスト指示でベクターを生成 — 専用の指示からベクターへの手順とSVG出力です。
  4. W3C:SVG 2の埋め込みコンテンツ — SVG内のラスターの埋め込み・参照を定義します。
  5. Adobe Illustrator:Image Trace — 独立したラスターからベクターへのトレースです。

自分のAIアートが本物の形状になるとどう見えるか気になりますか? 画像を1つ変換し、テキストエディターで開きます。ピクセルの代わりにパスを見ると、違いが分かります。

ブログのその他の記事

画像を
きれいで編集可能なベクターパスに変換