バイオリンを弾くペリカン：AIでSVGを作成する方法

SVG形式は軽量でベクター対応であり、AI生成コンテンツの世界では特に実用的です。AIコンテンツは優れていますが、常に何らかのアーティファクトがあり、一貫性を維持するのが苦手です。SVGがあれば、それらの小さな欠点を修正し、アプリケーション全体で一貫したアセットを確保できます。

AIは画像生成に非常に優れていますが、SVGの作成にはなぜか惨敗します。Fableが得意だという噂もありますが、実際に検証できる人はほとんどいません。良いニュースは、素晴らしいシンプルで一貫性のあるSVGアイコンを作成するためにそれが必要ないということです。以下にその方法を示します。

SVGを取得するプロセスは非常に簡単です。PNGを作成し、それをベクター化します。

第一ステップ：ラスターSVG AIでSVGを生成する代わりに、SVGのように見えるラスター画像をAIに生成させます。さらに、ここではいくつかの微妙なトリックがあります。このタスクにはCodexを使用します。Claude Codeよりもはるかに優れています。AIがSVGを作成しようとすることさえ禁止することが非常に重要です。タスクを2つのエージェント、つまり審判兼最適化エージェントと実行エージェントに分割します。メインエージェントは画像の品質と一貫性を判断し、プロンプトを最適化します。このプロンプトは、画像作成を行うサブエージェントに渡されます。これは本質的に「ループ」と呼ばれるものですが、Codexでは/goalや/loopを使用しなくてもすぐに機能します。

実際のPNG用プロンプトは次の通りでした（ワンショットです）。最終目標は私のためにいくつかの画像を生成することです。これは類似したスタイルとモチーフを持つSVGファミリーにしたいので、2つのフェーズで行う必要があります。後でサブエージェントに渡すプロンプトを最適化する必要があります。結果が良くなるまで繰り返します。クリーンなSVGライクなアイコンスタイルシートを作成します。目標は、磨かれたベクターSVGマークのように見えるアイコンを生成することであり、手描きの不格好なSVGパスや詳細なAIコンセプトアートではありません。各SVGは一貫した共有の円形セグメントリングで表現されます。これを取得したら、最終目標はanimals.txtの動物とinstruments.txtの楽器の各組み合わせのPNGを用意することです。例えば、バイオリンを弾くカワウソなどです。

第二ステップ：決定論的にSVGに変換 PNGをSVGに変換するツールはたくさんありますが、唯一機能するのはvectorizer.aiだけです。簡単な実験として、同じ画像を3つの異なるツールで実行しました。その差は驚くべきものです。この比較は誰かを非難するためのものではありません。ベクター化は非常に複雑な問題です。実際、vectorizer.aiの所有者はこのテーマでスタンフォード大学の博士号を持っています。

第三ステップ：利益！ ご覧のとおり、SVGの作成は適切なツールを仕事に使うだけの問題です。すべての動物と楽器の組み合わせはこちらで確認できます。