Claude Sonnet 4.5, 4.6のSVG出力の比較

Claude Sonnet 4.6になって、生成されるSVGの雰囲気が大きく変わったように思います。
同じ情報・プロンプトで生成されるSVGを比較してみました。

Claude Sonnet 4.6 ← Claude Sonnet 4.5 ← Claude Opus 3.0 | ChatGPT 5.2

<svg class="eyecatch-svg" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
<!-- 背景: 白の角丸四角形 -->
<rect x="0" y="0" width="192" height="192" rx="32" ry="32" fill="white"/>

<!-- 左パネル: コード出力A -->
<g transform="translate(24, 40)">
<rect x="0" y="0" width="64" height="80" rx="6" ry="6" fill="#90CAF9"/>
<!-- コードライン模擬 -->
<rect x="10" y="14" width="30" height="5" rx="2" ry="2" fill="#1565C0"/>
<rect x="10" y="25" width="44" height="5" rx="2" ry="2" fill="#1565C0"/>
<rect x="10" y="36" width="24" height="5" rx="2" ry="2" fill="#1565C0"/>
<rect x="10" y="47" width="38" height="5" rx="2" ry="2" fill="#1565C0"/>
<rect x="10" y="58" width="20" height="5" rx="2" ry="2" fill="#1565C0"/>
</g>

<!-- 右パネル: コード出力B -->
<g transform="translate(104, 40)">
<rect x="0" y="0" width="64" height="80" rx="6" ry="6" fill="#A5D6A7"/>
<!-- コードライン模擬 -->
<rect x="10" y="14" width="36" height="5" rx="2" ry="2" fill="#2E7D32"/>
<rect x="10" y="25" width="44" height="5" rx="2" ry="2" fill="#2E7D32"/>
<rect x="10" y="36" width="28" height="5" rx="2" ry="2" fill="#2E7D32"/>
<rect x="10" y="47" width="40" height="5" rx="2" ry="2" fill="#2E7D32"/>
<rect x="10" y="58" width="18" height="5" rx="2" ry="2" fill="#2E7D32"/>
</g>

<!-- 中央の比較矢印（左右） -->
<g transform="translate(96, 80)">
<!-- 左向き三角 -->
<polygon points="-6,0 2,-5 2,5" fill="#455A64"/>
<!-- 右向き三角 -->
<polygon points="6,0 -2,-5 -2,5" fill="#455A64"/>
</g>

<!-- 下部: SVGコードブラケット記号 -->
<g transform="translate(96, 148)">
<!-- 左ブラケット < -->
<polygon points="-20,0 -8,-10 -8,-6 -16,0 -8,6 -8,10" fill="#455A64"/>
<!-- スラッシュ / -->
<rect x="-4" y="-10" width="4" height="20" rx="1" ry="1" fill="#455A64" transform="rotate(15, -2, 0)"/>
<!-- 右ブラケット > -->
<polygon points="20,0 8,-10 8,-6 16,0 8,6 8,10" fill="#455A64"/>
</g>
</svg>Claude Sonnet 4.5,<br class="chiilabo-br is-on"> 4.6のSVG出力の比較 — Claude Sonnet 4.6 ← Claude Sonnet 4.5 ← Claude Opus 3.0 | ChatGPT 5.2

1. 同じ情報でも生成結果は違う

チャット画面でちいラボの教室紹介のテキストを与え、その後にプロンプトでアイコン生成を指示しました。

1. 同じ情報でも生成結果は違う — Claude Sonnet 4.5 → Claude Sonnet 4.6

与えたSVGアイコンを作るプロンプト

アイキャッチアイコンを作成する

prompt: |
  入力されたキーワードを基に、ライブラリ風アイコンを作成してください。
  キーワードが明示されていなければ、記事またはここまでの対話からキーワードを3つ上げてください。
  【ステップ1: 要素分析】
  キーワードから連想される具体的なアイテムを3-5個選択し、組み合わせパターンを提示してください。
  例：「データ分析」→ グラフ + 虫眼鏡 + トレンドライン + データポイント

  【ステップ2: アイコン作成】
  要素からメインとなる要素を一つ選んで、デザインします。
  選択した要素を使って、以下の仕様でSVGアイコンを作成してください：
  **技術仕様：**
  - サイズ: 192×192
  - 形式: SVG
  - viewBox="0 0 192 192" width="192" height="192"
  - 可変サイズにするためsvgタグにwidthとheight属性は付けない
  - 関連する要素は適宜グループ化<g>し、transform,translateで配置する
  - create_fileツールで/mnt/user-data/outputsに保存してください
  - present_filesツールで実際のファイルを提示
  **デザイン仕様：**
  - スタイル: Material Design風ライブラリアイコン
  - 背景要素: 192x192の白の角丸四角形（fill="white", rx=32,ry=32）

  - 形状: アイコンや図形などの組み合わせ
  - 角丸: rx/ry値は2-8px程度
  - ソリッドなデザイン
  **品質要件：**
  - シンプル性: 装飾を排除し、機能の本質のみ表現
  - 視認性: 24px以上の小サイズでも判別可能
  - 一貫性: 他のライブラリアイコンと調和するデザイン
  **避けるべき要素：**
  - グラデーション、影、立体効果
  - 5色以上の多色使い
  - 細すぎる線（2px未満）
  - 文字列の利用

ステップ3：SVGアイコンを生成してください。


Code language: JavaScript (javascript)

show less

この中だと、Claude Sonnet 4.6の１つ目のアイコンがもっとも精度がよいように思います。

Claude Sonnet 4.6は、コード生成が自然で表現力があります。
一世代前のClaude Opus 3.0やChat GPT 5.2と比較してみると、よくわかります。

生成AIにとって、コードが可視化されるSVGコードの出力は難しいようで、意味不明な図形が出てくることが少なくありません。

2. それぞれの生成時の画面

Claude Sonnet 4.6

Claude Sonnet 4.5

Claude Opus 3.0

ChatGPT 5.2

まだ、Chat GPT5.2では、Claude Sonnet 4.6相当のSVGアイコンは安定して出力できないように感じます。