Claude 3.5 Sonnetが生成できる画像はSVG形式

Claude 3.5 Sonnetで画像が生成できるということで、Claudeに聞いてみたんですがこんな答えが返ってきました。

申し訳ありませんが、それは誤解のようです。私はまだ画像を生成したり作成したりする能力を持っていません。私の主な機能はテキストベースのコミュニケーションと情報提供です。画像に関しては、既存の画像を分析したり説明したりすることはできますが、新しい画像を作り出すことはできません。

もし画像生成に興味があるのでしょうか。その場合は、DALL-E、Midjourney、Stable Diffusionなどの専門の画像生成AIをお試しいただくことをお勧めします。これらのツールは、テキストプロンプトから画像を生成する能力があります。

あれ、Xのこの投稿では画像作ってくれてるみたいなんだけど…。

Claude 3.5 Sonnetに「図解で使えるグラフ表現をイラストにして1枚にまとめて」って言ったらこれでてきた…

ヤバすぎんだろ😂 pic.twitter.com/UDKNFASzWr

— 桺本 頌大 | Shodai Yanagimoto (@shodaiiiiii) June 21, 2024

ということで同じプロンプトを与えてみたところ、以下の答えとともにSVGのコードと画像を表示してくれました。

申し訳ありませんが、私は直接イラストを作成したり描画したりする能力がありません。しかし、図解で使えるグラフ表現についての情報を提供し、それをSVGフォーマットで視覚化することはできます。これは図解用のグラフ表現の概要を示す単一の画像になります。

なるほど、ベクター形式のSVG画像を生成できるということでした。

そこで、画像を元にSVGを作らせて、アニメーションさせる実験をしてみました。

⚠️この記事が含まれるマガジンについて

この記事はわたしアシカガコウジによる有料マガジン「生成AIをいろいろ試す実験室」に含まれています。1回の支払いでこの記事を含めマガジン内の記事を全て読めます。定期購読ではありません。購読いただくと今後追加される記事も全て全文読めます。

生成AIをいろいろ試す実験室｜アシカガコウジ｜note

なお、ほとんどの記事は無料で読める部分だけでも概要がわかるようにしているつもりです。無料部分だけ読んでいただくことも大歓迎です。

わたしは画像生成AI、対話型AIなど生成AIについてポッドキャスト「アシカガCAST」やX（Twitter）で情報発信していますが、もっと気軽に日々のちょっとした実験や失敗例なども記録しておきたいと考えました。

いつもより雑な感じで発信したく、仕事のファイルなどもこっそり見せちゃうかもしれないので、興味のある人だけに見てもらいたいことから有料のマガジンにしています。ひとの実験をのぞき見する感覚で読んでいただき、なにかしらのヒントになったり役に立ったりしたらとてもうれしいです。

イラスト画像をもとにSVG画像を作ってもらう

まずはPNG形式の画像をイラスト画像をアップロードして、「イラストをもとにSVGイメージを作れますか？」と聞いてみます。

こちらが元画像。わたしがお手伝いしているキャラクターデザイナーの井上・ヒサトが手がけるキャラクターです。

ポッペンポップ ©️HISATO INOUE

そして、こちらがClaudeが生成したSVG画像（のスクリーンショット）。これはこれでかわいい。

画像を元にしているのになぜ同じにならないかというと、元画像の情報をClaude内で一旦言語化して、その言語化した内容を元にSVG画像を生成しているからだと思います。

色はかなり忠実に引き継いでいますし、手がないこと以外は要素も間違ってないようです。

SVGのコード

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 240">
  <!-- Body -->
  <path d="M 100 40 
           C 145 40, 180 100, 180 160 
           Q 180 200, 100 220 
           Q 20 200, 20 160 
           C 20 100, 55 40, 100 40" 
        fill="#40C4FF"/>
  
  <!-- Belly -->
  <ellipse cx="100" cy="160" rx="60" ry="50" fill="white"/>
  
  <!-- Eyes -->
  <circle cx="70" cy="80" r="15" fill="white"/>
  <circle cx="130" cy="80" r="15" fill="white"/>
  <circle cx="70" cy="80" r="7" fill="#01579B"/>
  <circle cx="130" cy="80" r="7" fill="#01579B"/>
  
  <!-- Beak -->
  <ellipse cx="100" cy="110" rx="30" ry="20" fill="#FFEB3B"/>
  <line x1="70" y1="110" x2="130" y2="110" stroke="#01579B" stroke-width="3"/>
  
  <!-- Feet -->
  <path d="M 70 220 Q 60 230, 50 220" fill="none" stroke="#01579B" stroke-width="5"/>
  <path d="M 130 220 Q 140 230, 150 220" fill="none" stroke="#01579B" stroke-width="5"/>
  
  <!-- Hair -->
  <path d="M 85 35 Q 100 10, 115 35" fill="#01579B"/>
</svg>

Claudeによる解説

このSVGイメージは、先ほどのペンギンのキャラクターを再現しています。主な特徴は以下の通りです：体：水色（#40C4FF）の曲線で表現されています。
お腹：白い楕円形で表現されています。
目：白い大きな円の中に、濃い青（#01579B）の小さな円で瞳を表現しています。
くちばし：黄色（#FFEB3B）の楕円形で、黒い線で口を表現しています。
足：濃い青（#01579B）の曲線で表現されています。
頭の毛：濃い青（#01579B）の曲線で表現されています。


このSVGは、ウェブブラウザで直接表示することができます。また、SVG対応の画像編集ソフトウェアを使用して編集することも可能です。色や形状を変更したい場合は、SVGコード内の該当する部分を編集することで簡単にカスタマイズできます。

何か特定の部分を変更したい、あるいはSVGについてもっと詳しく知りたいことがありましたら、お気軽にお申し付けください。

ドット絵っぽい画像にしてみたけど失敗