svg-skill

svg-skill

SVG ソースを直接記述します。画像生成ツールは使用しないでください。

シナリオ一覧

ユーザーの意図に合わせて、適切な方法を選択します。詳細はscenarios.md、例はexamples.mdを参照してください。

シナリオ	viewBox	主な手法	成果物
UI アイコン（アウトライン／塗りつぶし）	0 0 24 24	currentColor、均一な stroke-width	ファイル／React コンポーネント
マルチカラーアイコン	0 0 24 24	パスを分ける＋固定の fill	ファイル
ロゴ／ブランドマーク	ブランド固有	パスのアウトライン、安全な余白	SVG＋必要に応じてファビコン
ファビコン／アプリアイコン	0 0 32 32	シンプル、高コントラスト	ファイル
イラスト／空の状態	0 0 100 100+	フラットな図形	SVG／インライン
フローチャート／アーキテクチャ	コンテンツに基づく	マーカー矢印、グリッドに沿った配置	UTF-8 ファイル
グラフ（棒／折れ線／円）	データに基づく	スケールから座標を計算	title＋desc
進捗リング／バー	0 0 24 24 またはバー	stroke-dasharray または rect の幅	アニメーション可能
アバターのプレースホルダー	0 0 40 40	円＋文字／人物のパス	currentColor
バッジ／ラベル	テキストに基づく	角丸の rect＋テキスト	ブランドカラー
波形の仕切り	0 0 1200 120	ベジェパス、preserveAspectRatio="none"	全幅
地図ピン	0 0 24 24	涙滴型のパス＋中央の点	テーマまたは固定色
スプライトシート	シンボルごと	<symbol>＋<use href="#id">	1つの sprite.svg
CSS 背景／マスク	アイコンと同じ	外部ファイルまたはデータ URI	CSS スニペット
ローディングアニメーション	0 0 24 24	CSS @keyframes または stroke-dash	インライン SVG
ホバーインタラクション	任意	fill／stroke／transform に CSS :hover	インライン＋style
クリップ形状	コンテナに基づく	<clipPath>／<mask>	defs の参照
影／ぼかし	任意	<filter> feDropShadow／feGaussianBlur	defs の参照
パターンテクスチャ	小さな単位	<pattern> タイル	defs の参照
React／Vue コンポーネント	0 0 24 24	props のスプレッド、camelCase 属性	.tsx／.vue
メールへのインライン埋め込み	最小限	style／アニメーション／外部参照なし	コンパクトなスニペット

SVG に適さないもの：フォトリアリズム、複雑なビットマップテクスチャ、細部が過剰なイラスト → 制約を説明し、ラスター形式または簡略化したスタイルを提案します。

ワークフロー

- [ ] 1. Pick scenario and deliverable from index
- [ ] 2. Set viewBox, style, colors (currentColor vs brand)
- [ ] 3. Draw: compose shapes → paths; shared assets in <defs>
- [ ] 4. A11y: decorative aria-hidden / informative title+desc
- [ ] 5. Minimize; non-ASCII text → UTF-8 + XML declaration
- [ ] 6. Write file; run validate.sh

骨組みテンプレート

アイコンのみ（テキストなし）：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
</svg>

非 ASCII テキスト（CJK など）：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120" role="img" aria-labelledby="title">
  <title id="title">Diagram title</title>
</svg>

全幅の装飾（波形など）：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" aria-hidden="true">
</svg>

描画ルール

1. viewBox で論理座標を定義し、表示サイズは CSS の width／height で指定します
2. モノクロの UI アセットでは、デフォルトで currentColor を使用します
3. アウトラインアイコンでは、stroke-width="2" stroke-linecap="round" stroke-linejoin="round" を使用します
4. 共有する defs — グラデーション、矢印、パターン、フィルターは <defs> に配置し、短く一意な id を付けます
5. グラフ — 先に余白とスケールを計算し、データの概要を title／desc に記載します
6. アニメーション — CSS を優先し、SMIL はシンプルなケースに限って使用します
7. デフォルトはフラット — 必要な場合に限りグラデーションや影を使用します

品質チェックリスト

• xmlns＋viewBox
• 非 ASCII テキスト → UTF-8＋XML 宣言
• プレースホルダーのパスやエディターのメタデータがない
• ファイル内で id が一意（特にスプライト）
• グラフに title があり、装飾用アイコンに aria-hidden が指定されている
• ファイルを単体で開いてプレビューできる

bash scripts/validate.sh path/to/dir/
xmllint --noout file.svg   # required for non-ASCII text

成果物

形式	方法
スタンドアロンの .svg	assets/ などに書き出す
スプライト	1つのファイルに複数の <symbol> を配置し、<use> の使用方法を記載する
React	export function XIcon(props: SVGProps<SVGSVGElement>)＋スプレッド
Vue	<template><svg ...></svg></template>
CSS 背景	background: url(...) またはインラインのデータ URI
CSS マスク	-webkit-mask: url(...)。図形には塗りつぶされた領域が必要です
インライン HTML	生の <svg> フラグメント。依頼がない限りラッパーの div は使用しません

禁止事項

• ビットマップを使ってベクターを偽装するために <image> を使用する（明示的に依頼された場合を除く）
• シンプルでベクター化可能なグラフィックに画像生成を使用する
• 空のパスや TODO のプレースホルダーを残す
• 非 ASCII テキストで UTF-8 宣言を省略する
• メール用途に複雑なアニメーションや外部依存関係を追加する

ツールとドキュメント

リソース	説明
scenarios.md	シナリオごとの手順
reference.md	パス構文、定義、フレームワーク
examples.md	完全なコードサンプル
scripts/validate.sh	一括検証