svg-creator

SVG Creator スキル

必須ワークフロー

すべての SVG はフィードバックループスクリプトを経由します。例外はありません。レンダリングして視覚的に検証していない SVG を納品することはできません。

ループ

WRITE SVG → RENDER → VIEW PNG → ASSESS → FIX → RENDER → VIEW → ... → DELIVER

ステップバイステップ

1. SVG を作業ファイルに書き出します:

cat > /home/claude/draft.svg << 'SVGEOF'
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  ...
</svg>
SVGEOF

2. レンダリングします（必須 — スクリプトがこれを追跡します）:

python3 /path/to/skill/scripts/svg_loop.py render /home/claude/draft.svg

これにより /home/claude/svg_preview.png が作成されます。

3. レンダリングされた PNG を表示します（必須 — 実際に目で確認する必要があります）: /home/claude/svg_preview.png に対して view ツールを使用します。見えたものをよく観察してください。

4. 結果を評価します。自問してください:

• 要素は正しく配置されていますか？
• 隙間、重なり、ずれはありませんか？
• プロポーションは適切に見えますか？
• 色とグラデーションは機能していますか？
• キャラクターの場合: 体の部位は自然につながっていますか？

5. 問題があれば、SVG を修正してステップ 2 に戻ります。 str_replace または書き直しで /home/claude/draft.svg を編集し、再度レンダリングして表示します。

6. 良い出来になったら、納品します:

python3 /path/to/skill/scripts/svg_loop.py finish /home/claude/draft.svg output-name.svg

これにより SVG + プレビュー PNG が /mnt/user-data/outputs/ にコピーされます。レンダリングを行っていない場合、スクリプトは納品を拒否します。

次に present_files を使用して、出力された SVG をユーザーと共有します。

反復のガイドライン

• シンプルなアイコン、ロゴ、パターン: 通常 1〜2 回の反復で十分です
• 図、インフォグラフィック: 2〜3 回の反復
• シーン、イラスト: 3〜5 回の反復
• キャラクター、人物、動物: 5〜8 回の反復（段階的に構築してください — まず胴体、次に手足を 1 つずつ、各追加後にレンダリングします）

スクリプトコマンドリファレンス

python3 scripts/svg_loop.py render <file.svg>   # Render + view cycle
python3 scripts/svg_loop.py finish <file.svg> [name.svg]  # Deliver (blocks if no render)
python3 scripts/svg_loop.py status               # Check iteration count
python3 scripts/svg_loop.py reset                # Start fresh

---

視覚品質のテクニック

SVG を構築する際にこれらを適用してください。すべての SVG タイプで機能します。

マルチストップグラデーション（4 ストップ以上）

2 ストップのグラデーションは平坦に見えます。色相をずらした 4〜8 ストップを使用してください:

<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1" color-interpolation="linearRGB">
  <stop offset="0%" stop-color="#0f172a"/>
  <stop offset="25%" stop-color="#1e3a5f"/>
  <stop offset="50%" stop-color="#3b82f6"/>
  <stop offset="75%" stop-color="#93c5fd"/>
  <stop offset="90%" stop-color="#fde68a"/>
  <stop offset="100%" stop-color="#f97316"/>
</linearGradient>

球体の場合: fx="0.3" fy="0.3" を指定したラジアルグラデーションを使用します（光源の方向にオフセット）。

5 ゾーンライティング

すべての非自明なオブジェクトには以下が必要です: スペキュラハイライト（明るく暖かい色）、明部、ハーフトーン（本来の色）、形態影（より冷たい色相 — 青/紫、絶対に黒は不可）、反射光（影の縁に微かな暖かい光、不透明度 0.10〜0.20）。

色付きの影

影には濃紺（#1a1a4e）、紫（#2d1b4e）、またはティール（#0d3b4f）を使用します。純粋な黒やグレーは決して使用しないでください。

ドロップシャドウフィルター

<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"
  color-interpolation-filters="linearRGB">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
  <feOffset in="blur" dx="3" dy="5" result="offset"/>
  <feFlood flood-color="#1e1b4b" flood-opacity="0.30" result="color"/>
  <feComposite in="color" in2="offset" operator="in" result="shadow"/>
  <feMerge><feMergeNode in="shadow"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>

ノイズテクスチャ（デジタル的な完璧さを崩す）

<filter id="grain" color-interpolation-filters="linearRGB">
  <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="3" stitchTiles="stitch"/>
  <feColorMatrix type="saturate" values="0"/>
  <feBlend in="SourceGraphic" mode="soft-light"/>
</filter>

サーフェスと背景に 5〜15% の不透明度で適用します。

重要なデフォルト

• すべての <filter> 要素: color-interpolation-filters="linearRGB"
• すべてのグラデーション要素: color-interpolation="linearRGB"
• アニメーション要素: transform-box: fill-box; transform-origin: center;

---

カテゴリ別のガイダンス

キャラクター、人物、動物

最も難しいカテゴリです。積極的なフィードバックを伴う段階的な構築を行ってください:

1. 胴体を描く → レンダリング → 検証
2. 脚を追加 → レンダリング → 接続を検証
3. 腕を追加 → レンダリング → 検証
4. 頭を追加 → レンダリング → 検証
5. 細部を追加 → レンダリング → 最終チェック

手足には stroke-linecap="round" を指定した太い <line> を使用します。手足を描いた後に、すべての関節に <circle> を追加します。これにより、最も信頼性の高いつながった外観が得られます。

アニメーションキャラクターの場合: 順運動学を用いた React/JSX アーティファクトを使用します（JS が関節角度から位置を計算 — 関節の接続が保証されます）。

アイコン（24×24 ストロークベース）

グリッドに整列、2px ストローク、stroke-linecap="round"、stroke-linejoin="round"、fill="none"、stroke="currentColor"。2〜22 の座標範囲内に収めます。通常は 1 回で成功します。

ロゴとバッジ

幾何学的な構成、中央揃え。奥行きのためにグラデーション塗りつぶし。最大 2〜3 色。小さいサイズでの可読性をテストします（幅 64px でレンダリング）。

シーンと風景

奥から手前へレイヤー化: 空 → 遠景の要素（彩度を落とし、明るく）→ 中景の要素 → 前景（鮮やか）。レイヤー間に大気の霞（半透明の青白色の rect）を追加します。最後にビネットオーバーレイを重ねます。

データ可視化

データから位置を計算します。棒やセグメントにグラデーション塗りつぶしを使用します。控えめなグリッド線（#f1f5f9）。すべてにラウンドキャップを適用します。

パターン

小さく繰り返されるタイルです。<pattern> 要素を patternUnits="userSpaceOnUse" とともに使用します。斜めのバリエーションには patternTransform="rotate(45)" を使用します。

---

ドキュメント構造

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"
     role="img" aria-labelledby="svg-title">
  <title id="svg-title">Descriptive Title</title>
  <defs></defs>
  <g id="background">...</g>
  <g id="midground">...</g>
  <g id="foreground">...</g>
  <g id="effects">...</g>
</svg>

高度なリファレンス

完全なレシピについては references/advanced-techniques.md をお読みください。フィルターチェーン、feTurbulence ガイド、feComponentTransfer によるカラーグレーディング、マテリアルシミュレーション、コンポジションテンプレート、大気効果、アニメーション（CSS + SMIL）などが含まれます。