AIとテクノロジー2025年9月29日約11分

LLMによるSVG生成：向いている理由と実用上の注意点

SVGはLLMで扱いやすい構造化テキストですが、生成結果には描画確認と安全性の検証が必要です。

Jack更新日 2026年8月26日

大規模言語モデル（LLM）は構造化されたテキストの生成と修正を得意とします。XMLで図形、座標、色、階層を記述するSVGは、その特性を生かしやすい画像形式です。HTMLやコードと同じように差分を確認でき、生成後も手作業で編集できます。

ただし、SVGコードを出力できることと、意図どおりの図形を安定して作れることは別です。複雑なパス、フォント、フィルター、外部参照、セキュリティ、アクセシビリティについては、生成後の検証が欠かせません。

この記事のポイント

SVGは「テキスト」である：LLMは画像を直接理解するのは苦手だが、テキスト（コード）の理解は得意分野。

解像度の壁を超える：ラスター画像（PNG/JPG）の限界である「解像度」や「再編集の難しさ」をSVGなら解決できる。

反復しやすい：プロンプトでたたき台を作り、コードやデザインツールで調整する流れを組みやすい。

テキストと画像の融合：必然的な出会い

なぜLLMとSVGは「同じ言語」を話すのか

LLMとの相性を考えるうえで重要なのは、SVGがテキスト形式であることです。

バイナリデータや圧縮されたピクセルの集合体とは異なり、SVGは形状、色、位置を単語と数値で記述する、人間（そしてAI）が読めるXML形式です。以下のSVGコードを見てください。LLMはこれを「読む」ことも「書く」こともできます。

xml

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="#4F46E5" />
  <text x="100" y="105" text-anchor="middle" fill="white" font-size="16">
    AI生成
  </text>
</svg>

ChatGPTやClaudeに「中央にテキストがある紫色の円を作成して」と依頼すると、同様のコードを生成できます。単純な図形であれば、生成したテキストをブラウザでそのまま描画できます。

この「テキストベース」という性質が、強力なフィードバックループを生み出します。AIにSVGを生成させ、その結果を見て、「円をもっと小さく」「テキストを太字に」と自然言語で修正を指示できます。AIにとって、これらはすべてネイティブな領域である「言語処理」の一部に過ぎないため、正確に理解できるのです。

解像度に依存しない「数学的」な記述

SVGの重要性を支える2つ目の柱は、そのベクターアーキテクチャにあります。

LLMがラスター画像を生成する場合、それは固定されたピクセルのグリッド（通常1024×1024など）を出力します。その画像は「その解像度」でしか存在できず、拡大すればボケてしまい、修正するには別のAIアップスケーラーを通す必要があります。

一方、SVGの <circle cx="100" cy="100" r="50"/> は、固定ピクセルではなく中心点と半径を記述しています。同じ形状を異なる寸法で再描画できますが、線幅、フォント、フィルターなどは出力先に合わせた確認が必要です。

AIアプリケーションにとって、この違いは決定的です。たった一つのAI生成SVGアイコンがあれば、アプリケーションが必要とするあらゆる解像度に対応できます。レスポンシブ対応のために複数の画像バリアントを用意したり、ストレージを圧迫したりする必要はもうありません。

ラスター画像生成が抱える限界

ピクセルに潜む「隠れたコスト」

多くの画像生成モデルは、PNGやJPGなどのラスター画像を出力します。写真や質感のある表現には向きますが、図形を後から構造的に編集したい用途では扱いにくい場合があります。

1. ファイルサイズとパフォーマンス ラスター画像の容量は、寸法、色数、圧縮設定によって変わります。単純なアイコンや図表ならSVGの方が小さくなることがありますが、写真のように複雑な内容をSVGへ置き換えても軽くなるとは限りません。実際の素材で容量と描画コストを測る必要があります。

2. 編集の難易度 生成したラスター画像の「一部の色だけ」を変えるには、対象範囲を選択して編集するか、条件を変えて再生成する必要があります。SVGで色が属性として分かれていれば、fill="#FF0000" を fill="#00FF00" に変更できます。LLMもこのような属性変更を支援できますが、変更対象が正しいかは確認が必要です。

3. 解像度の壁 ラスター画像を元の寸法より大きく表示すると、輪郭がぼやけることがあります。SVGの図形やパスは出力サイズに合わせて再描画できます。ただし、SVG内に埋め込まれたラスター画像や一部のフィルターは、同じようには拡大できません。

テキストから画像を生成するモデルが苦手なこと

現在の拡散モデル（Diffusion Models）はフォトリアリズムには優れていますが、「正確さ」には苦戦します。「第1四半期から第3四半期の売上がそれぞれ100、150、200の棒グラフ」を依頼しても、それっぽく見える画像は生成されますが、値は不正確で、目盛りは歪み、テキストは判読不能なことが多々あります。

一方、SVGでは座標や寸法をコードとして指定できます。LLMが正しい値を生成し、検証も通れば、図表の数値を明示的な形状として表現できます。

xml

<rect x="50" y="200" width="40" height="100" fill="#3B82F6"/>  
<rect x="110" y="150" width="40" height="150" fill="#3B82F6"/> 
<rect x="170" y="100" width="40" height="200" fill="#3B82F6"/>

SVGはテキストで図形を記述できるため、LLMが生成・修正しやすい形式です。ただし、生成結果が意図した形状やアクセシビリティ要件を満たすとは限らないため、表示とコードの両方を検証する必要があります。

既に始まっている実用例

ダイナミックなUI生成

LLMによるSVG生成は、UIアイコンや簡単なインジケーターの試作にも利用できます。自然言語からコードのたたき台を作れますが、本番利用前には表示、アクセシビリティ、ライセンス、不要な要素を確認してください。

typescript

// プロンプト例："グラデーション付きの75%円形プログレスインジケーターを作成"
const progressRing = await ai.generateSVG({
  prompt: "75%完了を示す円形プログレスリング",
  style: "モダン、青から紫へのグラデーションフィル",
  size: { width: 120, height: 120 }
});

// AIは適切な stroke-dasharray 計算を含む有効なSVGを返します

先進的な企業では、非デザイナー職のメンバーでもチャットを通じてUI要素をリクエストできる社内デザインシステムを構築し始めています。出力されたSVGは変換ステップなしでReact、Vue、HTMLに直接統合可能です。

インスタント・データビジュアライゼーション

ビジネスインテリジェンス（BI）の分野も変革されつつあります。アナリストは複雑なチャートライブラリを習得する代わりに、「何を見たいか」を記述するだけで済みます。

python

def visualize_quarterly_data(data: dict, request: str) -> str:
    """
    自然言語リクエストからSVGビジュアライゼーションを生成
    
    例："今四半期と前四半期の比較を見せて。
        成長エリアを緑でハイライトして"
    """
    prompt = f"""
    このデータのSVGチャートを作成：{data}
    ビジュアライゼーションリクエスト：{request}
    適切なARIAラベル付きのクリーンでアクセシブルなSVGを出力せよ。
    """
    return llm.generate(prompt)

生成されるビジュアライゼーションは単なる画像ではありません。アクセシビリティ対応されており、テキスト検索が可能で、追加のプロンプトでさらに微調整が可能です。

マーケティングチームは、ブランドの一貫性を保ちながらバリエーションを量産する方法を見出しています。例えばフラッシュセールのバナーが必要な場合、一度ベースとなるSVGを生成すれば、その後はAIとの対話を通じて、各SNSプラットフォーム向けに色、テキスト、サイズを自由自在に変更できます。AIはブランドのガイドライン（色コードやフォント）とSVGの構文の両方を理解しているため、ルールを逸脱することはありません。

なぜこれほど相性が良いのか？（技術的背景）

構造化データと構造化出力の出会い

LLMはJSON、XML、コードといった「構造化テキスト」の生成において卓越した能力を発揮します。そしてSVGはXMLです。これはハックや回避策ではなく、能力の自然な合致です。

LLMがSVGを生成する際、PythonやJavaScriptのコード生成に使用するのと同じパターンマッチングと補完メカニズムを適用しています。トレーニングデータにはオープンウェブ上の何百万ものSVGが含まれており、モデルは円、長方形、パス、グラデーションといった「SVGの語彙」を既に学習済みです。

セマンティック（意味論）な理解

SVGの要素名は、LLMが活用できる「意味」を持っています。<circle>は円であり、<rect>は長方形であり、<text>は読むことのできるコンテンツです。このセマンティックな明確さは、LLMがビジュアルの構造を理解するのを助けます。

潜在拡散（Latent Diffusion）モデルがピクセルのノイズから画像を生成する際、モデルは視覚的概念を抽象的に捉える必要があります。しかしSVGでは、概念が構文そのものに明示的に含まれているのです。

「編集-洗練」のループ

AIアプリケーションでSVGを使う利点の一つは、生成後に部分修正しやすいことです。意図と異なる場合は、次のように調整できます。

AIに特定の属性（色やサイズ）だけを変更させる
人間がSVGコードの値を手動で微調整する
コンポーネントを分解し、修正が必要な部分だけを再生成する

この反復的な改善プロセスは、人間がクリエイティブな作業を行う際の手順（ドラフト作成→フィードバック→修正）を自然に反映しています。一度生成したら終わりのラスター画像では、このワークフローは実現できません。

AIグラフィックスの現在地と今後

現在：コンポーネント単位の生成支援

SVGを生成・修正できるツールは、アイコン、図表、簡単なUI素材の制作支援に使われ始めています。実運用では、デザイントークン、アクセシビリティ要件、レスポンシブ時の挙動をプロンプトや検証処理に含めることが重要です。

次の段階：デザインシステムへの統合

個別のSVG生成だけでなく、色、余白、線幅、命名規則などをデザインシステムと連携させる動きが進むと考えられます。生成結果をCSSやコンポーネントコードと一緒に扱えるようになると、単発の素材ではなく、再利用可能な部品として管理しやすくなります。

今後：評価結果を取り込む改善フロー

将来的には、アクセシビリティ検査、ブランドルール、ユーザーテストなどの評価結果を生成フローへ戻し、改善案を提示する仕組みが増えるでしょう。ただし、自動提案をそのまま公開するのではなく、人による確認と変更履歴を残せる設計が必要です。

開発者のための実践ガイド

効果的なプロンプト作成のコツ

生成結果はプロンプトとモデルによって変わります。次の条件を明示すると、期待する構造を伝えやすくなります。

具体的な寸法：「小さいアイコン」ではなく「24x24と48x48ピクセルで動作するアイコン」と指定する。
スタイルの参照：「ミニマルなラインアイコン、2pxのストローク、角丸」など、美的な方向性を明確にする。
アクセシビリティ：「適切なARIAラベルとtitle要素を含めること」を要件に加える。
技術的制約：「互換性のためにpath要素のみを使用する」「モバイルパフォーマンスのためにフィルター（ぼかし等）は避ける」など。

検証と最適化

AIが生成したSVGは、通常の生成コードと同じように、公開前の検証が必要です。

最適化 (SVGO)：AIの出力は冗長になりがちです。SVGOなどで不要な属性を削除し、ファイルサイズを削減しましょう。
バリデーション：SVG仕様に対して検証を行い、レンダリング問題が起きる前に構造的なエラーをキャッチします。
ブラウザテスト：一部の高度なSVG機能はブラウザによって挙動が異なる場合があるため、実機確認は必須です。
アクセシビリティ確認：意味のある画像にはtitleや説明を付け、装飾画像は読み上げ対象から外します。

本番環境へ組み込むパターン

プロダクトへ組み込む場合は、自由形式のSVGをそのまま受け渡すのではなく、入力条件と検証工程を明示したインターフェースで囲むと管理しやすくなります。

typescript

interface SVGGenerationRequest {
  description: string;
  dimensions: { width: number; height: number };
  style?: 'minimal' | 'detailed' | 'outlined';
  colorScheme?: string[];
  accessibility?: {
    title: string;
    description: string;
  };
}

async function generateAndValidateSVG(
  request: SVGGenerationRequest
): Promise<ValidatedSVG> {
  const raw = await llm.generate(buildPrompt(request));
  const sanitized = await sanitize(raw);
  const optimized = await optimize(sanitized);
  return validate(optimized);
}

生成後にサニタイズ、最適化、仕様検証を順番に行い、失敗時には公開処理を止めます。ブランドカラーや許可する要素をスキーマとして定義しておくと、モデルやプロンプトを変更しても品質基準を維持しやすくなります。

結論：新しいクリエイティブ・パートナーシップ

SVGとLLMの融合は、単なる技術的な進歩にとどまりません。「誰がグラフィック作成に参加できるか」という参加障壁を下げる、真に新しい変化です。プロダクトマネージャーが欲しいチャートを言葉で説明し、有効かつ最適化されたSVGを受け取れるようになれば、デザイナーや開発者への従来のハンドオフ（依頼・待ち時間）は必須ではなく、オプションになります。

これは熟練したデザイナーの価値を下げるものではありません。目的の整理、表現の判断、ブランドの一貫性、品質保証といった仕事は引き続き人が担います。AIは、定型的な案の作成や反復を速める補助ツールとして位置付けるのが現実的です。

開発者にとって、SVGとLLMの組み合わせには、コードと自然言語の両方からグラフィックスを生成・修正できる利点があります。テキストとして差分を確認でき、既存の開発フローにも組み込みやすい点が、ラスター画像生成との大きな違いです。

現時点のツールには出力の揺れがあり、手直しや安全性の検証も欠かせません。それでも、SVGが持つテキスト構造、編集可能性、再利用性はLLMと組み合わせやすく、プロダクト開発で検討する価値があります。

この記事は、SVG2IMG.ccの開発・運営者であるJackが執筆・監修しています。

実際のファイルで試す

ファイルをアップロードせず、ブラウザ内でSVGを変換できます。

変換ツールを開く