# LLMで生成したイラストを小さなSVGに変換する実験 Markdownで書く個人ブログに、ちょっとしたイラストを埋め込みたくなった。自作のブログエンジンは、意図的に制限したMarkdownのサブセットをHTMLへ変換するだけの簡単なものにしている。装飾は基本的にPico CSSに任せ、画像の外部参照やクライアント側JavaScriptもなるべく使わない方針だ。ただし、コードブロックの言語に `svg` を指定した場合は、その内容をSVG画像として描画できるようにしてある。例えば、順序関係や処理の流れなら、こんな図を直接埋め込める。 ```svg ``` この程度の図なら、LLMにSVGを書かせても十分実用的だ。順序関係や構成要素の関係性を説明する図は、そもそも矩形や線、矢印などの組み合わせで表現できる。では、動物のイラストのようなものはどうか。今回はタヌキのイラストを例に、画像生成モデルが作った画像を、小さなSVGへ変換する実験をした。 ## 目標もともとは、日本人をタヌキに例えるなら、韓国人や中国人はどんな動物に対応させると面白いか、という雑談から始まった。タヌキと対になるキツネ、タヌキと間違えられやすいアライグマ、といった連想だ。せっかくなので、この3種類の動物を並べたイラストを作りたくなった。ただし、今回試したのはタヌキだけ。目標は次のようなもの。 - Markdownの `svg` コードブロックに直接埋め込める。 - 外部画像やスクリプトには依存しない。 - 数KB程度の小さなSVGにする。 - 200〜300px程度で表示したときに、ちゃんとかわいく見える。 - 将来、同じスタイルでキツネやアライグマも描ける。 SVGを使う以上、拡大しても綺麗なのは当然うれしい。ただ、今回は小さなイラストなので、細部を完全に再現する必要はない。 ## LLMにSVGを直接書かせてみたまず、LLMにタヌキを直接SVGで描いてもらった。これはあまりうまくいかなかった。丸や楕円を並べたタヌキらしい何かにはなるものの、画像生成モデルが出力するような、自然でかわいいキャラクターにはならない。一方、画像生成モデルで作ったタヌキはかなりよかった。ここで感じたのは、LLMがSVGを直接生成する場合、画像全体の造形を保ちながら個々の座標を決める必要があるという難しさだ。もちろん、LLMによるSVG生成が常に悪いわけではない。構造図などでは十分使えるし、描画結果を見ながら修正することで改善もできる。ただ、今回は最初から画像生成モデルを利用した方が手軽そうだった。そこで、次の2つの方向を考えた。 1. 画像生成モデルで作った画像を、ツールでSVGへ変換する。 2. SVG描画ライブラリなどで座標の扱いを抽象化し、レンダリング結果を見ながらLLMに修正させる。どちらの場合も、重要なのは一発で完成させようとしないことだと思う。 ## まずは元画像をデフォルメする最初に作ったタヌキは、毛並みや陰影まで描かれた、かなり凝ったイラストだった。見た目はよかったが、これをそのままSVGへ変換すると細かなパスが大量に生成されそうだ。そこで、最初からSVG化しやすい画像を生成することにした。今回は次のような特徴を持つタヌキを選んだ。 - 二足歩行のマスコット体型 - 丸い顔と胴体 - 大きなクリーム色のお腹 - 目の周りの濃い茶色の模様 - 小さな耳と短い手足 - 大きいが、アライグマほど縞模様の強くない尻尾毛並みを細かく描くのではなく、少数の色面でキャラクターを表現する方向だ。この段階で、元画像のかわいらしさを保ちながら、かなり単純な形状になった。 ### 画像生成用のプロンプト今回気に入った二足歩行タヌキのスタイルを再現するため、次のプロンプトを記録しておく。 > Create a cute, simplified, chibi-style tanuki mascot illustration: upright bipedal pose, front-facing or slightly front-facing, very rounded and plump silhouette, flat vector-like shapes, minimal detail, clean large color regions, transparent background. The tanuki should have a warm brown color palette, a large cream-colored belly and muzzle, dark brown eye-mask markings, small rounded ears, short legs, small rounded paws, and a large fluffy tail with soft darker banding but not strongly striped like a raccoon. Make it adorable, simple, and mascot-like, with a cheerful open-mouth smile and shiny round eyes. Keep the design visually distinct from a fox and a raccoon by emphasizing the tanuki's round body, softer face, and gentler tail pattern. Avoid realistic fur texture, avoid tiny details, avoid background elements, and make it suitable for later SVG conversion into a compact markdown-embeddable SVG. 厳密な再現性が必要なら、プロンプトだけではなく、元画像も参照画像として保持しておいた方がよい。 ## SVGへの変換本来は [VTracer](https://github.com/visioncortex/vtracer) を試したかった。 VTracerはラスター画像をSVGに変換するツールで、色の領域や輪郭を抽出し、曲線へ近似する処理を備えている。ただ、今回の実行環境にはインストールされておらず、ネットワーク制限で追加インストールもできなかった。そのため、今回はOpenCVを使った簡易的な変換処理を組み立てた。 ```svg ``` 処理は単純で、OpenCVのK-meansで色数を減らし、色ごとにマスクを生成して輪郭を抽出する。得られた輪郭を `approxPolyDP` で単純化し、SVGの `path` 要素として出力した。画像を忠実に再現するというより、色分けされた画像を少数の輪郭で表現する方法だ。 ### どの程度小さくできたか 6色、10色、14色の3種類について、輪郭の単純化の強さも変えながら実験した。 | 色数 | 輪郭の単純化 | SVGサイズ | | --- | ------ | ------ | | 6色 | 弱め | 5.5 KB | | 6色 | 強め | 4.4 KB | | 10色 | 弱め | 6.1 KB | | 10色 | 強め | 4.9 KB | | 14色 | 弱め | 9.9 KB | | 14色 | 強め | 7.4 KB | 数KBという目標は達成できた。ただし、見た目には問題があった。特に、輪郭が角張ってしまうこと、目や口元が崩れること、色面の境界に隙間が生じることが目立った。色数を増やせば改善するかと思ったが、必ずしもそうではなかった。色数を増やすと、元画像の細かな色の違いまで領域として抽出してしまい、かえってノイズが増える。一度、画像のシルエットを下地として敷いてから各色の領域を重ねるようにすると、色面の境界の隙間はある程度改善した。しかし、顔の崩れは残った。 ## ベジェ曲線にすればよくなるのか次に考えたのは、輪郭を滑らかなベジェ曲線にする方法だ。 `approxPolyDP` は、輪郭を基本的に直線の集合として近似する。 SVGならベジェ曲線を使えるので、滑らかな輪郭を少数の制御点で表現できる可能性がある。そこで、先ほどの10色・約4.9KBのSVGを基準に、曲線への近似を試してみた。結果は次の通り。 | 方法 | SVGサイズ | | ------- | ------- | | 従来の輪郭近似 | 約4.9 KB | | 曲線化 0.4 | 15.6 KB | | 曲線化 0.7 | 15.7 KB | | 曲線化 1.0 | 12.3 KB | 見た目は少し滑らかになった。しかし、劇的な改善はなかった。サイズはむしろ2〜3倍に増えてしまった。理由を考えると、曲線化は元の輪郭を滑らかにするだけであり、元画像から抽出された形状がそもそもおかしければ、その問題を解決できない。例えば、目の模様が不自然な形で抽出されてしまった場合、その輪郭を滑らかな曲線にしても、かわいい目の模様にはならない。つまり、問題は単なる曲線近似ではなく、どの形状を残すべきかという判断にありそうだ。 ## 顔だけ描き直してみるそこで、もう少し違う方法を試した。胴体や尻尾については自動トレースの結果を維持し、顔の重要な部分だけをSVGの図形として作り直す。具体的には、次の部分を再構成した。 - 左右の目の模様 - 瞳とハイライト - 鼻と口元 - 口の曲線こうした特徴は、複雑な輪郭を大量に使うよりも、少数の楕円やベジェ曲線で表現した方が扱いやすい。結果は約6.2KBになった。元の4.9KBよりは少し大きくなったが、顔の認識しやすさは明確に改善した。一方、胴体や耳、手足にはまだ粗さが残っている。完全に満足できる結果ではないものの、全体を機械的に曲線化するよりは改善の方向がはっきりしていた。 ## 今回分かったこと今回の実験で、最も印象に残ったのは次の点だ。 ### 画像の細部を再現することと、よいイラストを作ることは違う自動トレースは、元画像の色や輪郭をできるだけ保存しようとする。しかし、イラストとして重要な特徴は均等に分布していない。タヌキなら目の模様、鼻、丸い顔、体型、尻尾などが特に重要だ。これらが崩れると、ほかの部分を細かく再現しても、全体の印象は悪くなる。逆に、毛並みの細かい陰影などは、省略してもキャラクターの印象を保てる場合がある。この違いをうまく利用できれば、小さなSVGでも十分に高品質なイラストが作れそうだ。 ### SVGのサイズと見た目は必ずしも比例しない今回、4.9KBのSVGを曲線化したところ、12〜16KBになっても大幅な品質向上は得られなかった。一方、顔だけ再構成した6.2KB版では、比較的小さなサイズ増加で見た目が改善した。つまり、単にパスの数や制御点を増やすのではなく、何を表現するために使うかが重要らしい。 ### LLMに一発描きさせる必要はない最初のSVG生成では、LLMにコードを書かせ、その結果をほとんど確認せずに出力していた。今回のように実行環境を使えるなら、わざわざ一発で完成させる必要はない。画像生成、変換、レンダリング、比較、修正というループを回せばよい。 ```svg ``` ただし、レンダリングした画像を見せるだけで自動的に改善できるわけではない。どの部分が悪いかを特定し、その部分に対して有効な変更を行う必要がある。今回の場合は、顔の形状を個別に再構成するという変更が、それにあたる。 ## 次に試したいこと今回のOpenCVによる簡易トレースは、あくまで代替手段だった。次は本来使いたかったVTracerを試してみたい。 VTracerでは曲線近似を含むベクター化ができるため、今回の簡易実装より良い結果が得られる可能性がある。ただし、ファイルサイズと品質の両方で優れているかは、実際に比較しないとわからない。また、画像から意味的なSVG要素を生成する [StarVector](https://github.com/joanrod/star-vector) のような専用モデルも興味深い。もう一つ考えられるのは、画像全体をトレースするのではなく、LLMに意味のある部品へ分解させて、それぞれを描画ライブラリで構築する方法だ。最初から胴体、顔、耳、目、尻尾という構造を持たせれば、変更もしやすくなる。ただし、座標を抽象化したからといって造形の問題がなくなるわけではないので、やはり視覚的な確認は必要になるだろう。 ## まとめ今回のタヌキのSVG化では、数KBまで小さくすることには成功したものの、元画像のかわいらしさを十分に再現するところまでは到達しなかった。一方で、部分的に描き直すことで、ファイルサイズをそれほど増やさずに改善できることも確認できた。現時点では、次のような役割分担がよさそうだ。 - 画像生成モデルに、キャラクターの造形を任せる。 - 変換ツールに、基本的な色面や輪郭の抽出を任せる。 - LLMには、レンダリング結果の評価と、重要な部分の修正を任せる。最終的には、自動トレースの結果をそのまま採用するのではなく、意味のある少数の図形に整理する処理がほしい。目指しているのは、完璧なベクター化ではない。 **Markdownの中に気軽に貼れる程度の短いSVGで、ちゃんとかわいいタヌキを表示できること。** 今のところ、そのためには画像を一度生成し、見た目を確認しながら少しずつSVGを組み立て直すのがよさそうだ。ちなみに現在のタヌキの絵はこのようなものだ。これはベジェ曲線などを使う前のもの。 ```svg ``` そしてLLMの一発描き。 ```svg ``` --- ### 実験環境と成果物今回使用した主なものは、画像生成モデル、Python、OpenCV、CairoSVG。VTracerは未実行。実験中に得られたSVGの代表例は以下の通り。 - 自動トレース版：約4.9KB - 全体を曲線化した版：約12〜16KB - 顔を再構成した版：約6.2KB これらの数字は今回の画像と変換設定によるもので、一般的なSVG変換の性能を示すものではない。実験結果と未実行部分を分けて整理するタヌキ作成の動機を短く整理する変換処理の実装手順を具体化する ## 参考 - https://x.com/podhmo/status/2114392268874580409?s=20