SVGデザイン
リーフスキル（デザインドメイン内）。ドメインまたは名前からアクセスできます。
グラフィックの役割をブランドまたはインターフェースにおいて定義することから始めます。その設定に合わせて、構図、シルエット、プロポーション、タイポグラフィ、色を選択し、既存のビジュアルディレクションがある場合はそれを維持します。その後、デザインをクリーンで最小限のSVGマークアップとして表現します。すべての要素と属性は、その存在価値を示す必要があります。
このスキルは、ロゴ、アイコンセット、ブランドアセット、および装飾的または表現的なWebグラフィックを担当します。目的に応じて使い分けてください。ランディングページのロゴや装飾的なヒーローアートはここに属し、製品の仕組みを説明する図は editorial-svg-diagrams に属します。ページ構成とインターフェースレイアウトは frontend-design に属します。
小さなロゴの意思決定
説明のための概要: Webサイトのヘッダーとコンパクトなアプリアイコンの両方で認識可能な山のマークを作成します。外側のシルエットと1つの特徴的なリッジの切り抜きから始め、縮小すると消える細かい雪の線は省略します。色や詳細を追加する前に、マークを実際のサイズと各目的の表面で確認します。それらの用途で異なる詳細レベルが必要な場合は、読み取れないマークを縮小するのではなく、明示的に小さいサイズのバリアントを作成します。
本格的な構図や視覚的なレビューを行う前に、モデルの視覚的能力と、レンダリングされた使用サイズおよび表面へのアクセスを評価します。Puppeteerが利用可能な場合は、現在のフェーズ/モデルルーティングを使用して、より適切な作成者または独立したレビュー担当者に依頼し、概要、確立された方向性、目標サイズを渡します。アクティブな委任所有者を再利用します。小さな適切な編集は直接そのまま行うことができます。デザイナー自身のチェックは独立した承認にはなりません。機能不足やレンダリングされたアクセスがない場合、そのチェックは未解決のままになります。有効なSVGだけでは優れたデザインを確立できません。
トピックルーティング
| タスク | 参照先 |
|---|---|
| アークフラグの組み合わせ、一般的なパス形状 | references/path-patterns.md |
| ロゴデザイン、タイポグラフィ、ネガティブスペース | references/logo-techniques.md |
| アイコンデザイン、グリッドシステム、ピクセルアライメント | references/icon-design.md |
| グラデーション、マスク、クリップ、フィルター、トランスフォーム（デザイン上の決定） | references/advanced-techniques.md |
| アニメーション（CSSキーフレーム、スタッガー、GPU、イージング、SVG固有） | references/animation.md |
| 最適化、スプライト、SVGO設定 | references/optimization.md |
| アクセシビリティ、ブラウザの落とし穴 | references/accessibility-and-pitfalls.md |
| 編集ワークフロー、ブーリアン演算、SVGの結合 | references/editing-workflow.md |
SVGスケルトン
ストロークUIアイコンの場合は、次の構造から始めます。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- コンテンツ -->
</svg>
デザインキャンバスに合わせて viewBox を調整します。width/height 属性を省略すると、SVGがコンテナに合わせてスケーリングされます（固定サイズが必要な場合のみ追加します）。
ロゴやWebアートワークの場合は、アイコンのデフォルトを継承するのではなく、構図に合わせてキャンバス、塗りつぶし、ストロークを選択します。
キャンバスサイズの慣例
| サイズ | 使用例 | 備考 |
|---|---|---|
0 0 16 16 | マイクロアイコン、ファビコン | Heroicons micro、GitHub Octicons |
0 0 20 20 | 小さいUIアイコン、フォーム要素 | Heroicons mini |
0 0 24 24 | 標準アイコン（最も一般的） | Lucide、Heroicons outline、Material |
0 0 32 32 | 中程度のアイコン、ナビゲーション | Phosphorは内部で256x256を使用 |
0 0 48 48 | 大きい表示アイコン | アプリアイコン、イラスト |
| カスタム | ロゴ、イラスト | 自然なアスペクト比に合わせる |
標準的なUIアイコンの場合は、周囲のアイコンシステムが別のグリッドを使用していない限り、デフォルトで24x24にします。ロゴやWebグラフィックは、構図に合ったキャンバスを使用します。
シェイプとパスの使い分け
| シェイププリミティブを使用する場合 | <path> を使用する場合 |
|---|---|
| シェイプが基本的な幾何学形状である場合 | シェイプに曲線や複雑な輪郭がある場合 |
可読性が重要な場合（円は <circle> のように見えるべき） | 要素数を最小化する必要がある場合 |
| 個々のプロパティ（r、cx、cy）をアニメーション化する必要がある場合 | 複数のシェイプを1つの要素に結合する場合 |
| シェイプがプログラムによって変更される場合 | デザインツールからのエクスポート（パスは普遍的） |
スタイリングのデフォルト
子要素での繰り返しを避けるために、ルートの <svg> 要素に設定します。
| 属性 | アイコンデフォルト | ロゴデフォルト | 理由 |
|---|---|---|---|
fill | none | 変動 | アイコンは通常ストローク、ロゴは塗りつぶし |
stroke | currentColor | none または currentColor | 親要素からテキストカラーを継承 |
stroke-width | 2（24x24の場合） | 変動 | アイコン全体で一貫した太さ |
stroke-linecap | round | round または butt | 丸みを帯びた端は小さいサイズできれいに見える |
stroke-linejoin | round | round または miter | 結合部の鋭いスパイクを防止 |
currentColor はあなたの友達です。 SVGが親要素の色を継承できるようになり、追加のCSSなしでアイコンをテーマ対応にします。
ビューボックスに対するストローク幅
stroke-width はピクセルではなくビューボックス単位です。常にキャンバスサイズに相対的に設定します。
| viewBox | 典型的なストローク幅 | 視覚的な結果 |
|---|---|---|
| 16x16 | 1.5 | キャンバスの約9.4% |
| 24x24 | 2 | キャンバスの約8.3% |
| 32x32 | 2-2.5 | キャンバスの約6.3-7.8% |
| 48x48 | 3 | キャンバスの約6.3% |
| 256x256 | 16 | キャンバスの約6.3% |
シェイプをパスに変換するタイミング
変換する場合:
- 複数のシェイプを単一の複合パスに結合する場合（ブーリアン演算）
- より大きなパス構成の一部としてシェイプが必要な場合
<path>のみをサポートする環境に配布する場合- DOM要素を最小化するための最適化
シェイプのままにする場合:
- コードの可読性が重要な場合（
<circle>は自己文書化） - 特定のプロパティをアニメーション化する必要がある場合（円の
rをアニメーション化する方が、パスデータをアニメーション化するよりもクリーン） - SVGがプログラムによって変更される場合
角丸矩形からパスへのテンプレート
ここでのアークパラメータはエラーが発生しやすいです。これを参考として使用してください。
<!-- <rect x="2" y="2" width="20" height="20" rx="3" /> は次のようになります: -->
<path d="M 5 2 h 14 a 3 3 0 0 1 3 3 v 14 a 3 3 0 0 1 -3 3 h -14 a 3 3 0 0 1 -3 -3 v -14 a 3 3 0 0 1 3 -3 Z" />
fill-rule: evenodd と nonzero
穴のある複合シェイプがある場合は evenodd を使用します。巻き方向を気にする必要がないため、よりシンプルです。
<!-- evenoddを使用したドーナツ（方向は関係ない） -->
<path fill-rule="evenodd" d="
M 12 2 A 10 10 0 1 1 12 22 A 10 10 0 1 1 12 2 Z
M 12 7 A 5 5 0 1 1 12 17 A 5 5 0 1 1 12 7 Z
" fill="black" />
nonzero（デフォルト）の場合、穴を作成するには内側の円を反対方向に巻く必要があります。
ロゴデザインプロセス
ロゴ（アイコンではない）を作成する場合は、次のプロセスに従います。
-
概要の重大なギャップのみを解決します。 提供されたブランドの方向性、名前、対象者、使用例、参考資料を再利用します。欠落している選択肢がデザインを大きく変える場合は、現在のホストがサポートするインタラクションを使用して短い質問をします。二次的な選択には、賢明な元に戻せるデフォルトを使用します。特定の質問ツールを想定したり、ムードボードインタビューを要求したりしないでください。
-
1つのメタファーの複数のレイアウトではなく、複数のメタファーを探求します。 概念的な多様性は、レイアウトのバリエーションよりも重要です。
[references/logo-techniques.md](references/logo-techniques.md)の完全な発想プロセスに従ってください。これには、ドメイン固有のブレインストーミング、カテゴリの多様性要件、クリシェ回避が含まれています。 -
構造的な多様性を保証します。 すべてのロゴセットは、同じスタイル内の複数のメタファーだけでなく、複数のカテゴリのアプローチにまたがる必要があります。5つ以上のオプションを提示する場合は、各列から少なくとも1つを含めます：タイポグラフィック/ワードマークアプローチ、象徴的なアイコン、抽象的な幾何学マーク、および文字形とメタファーのハイブリッド。
[references/logo-techniques.md](references/logo-techniques.md)のカテゴリ多様性テーブルを参照してください。 -
利用可能なホストを通じてプレビューします。 プログレッシブ比較が役立つ場合は、このスキルの
assets/preview.htmlと[references/editing-workflow.md](references/editing-workflow.md)の構造を使用します。現在のホストでサポートされているビューアを通じてプレビューを表示または検査します。ブラウザ、シェルコマンド、またはフォアグラウンドウィンドウが利用可能であると想定しないでください。レンダリングできるビューアがない場合は、その制限を明記し、SVGファイルとレンダリングされたプレビューをサポートされている場所で提供します。観察されていないプレビューが視覚的に確認されたと主張しないでください。 -
カラーロゴの場合は、必ず
-dark.svgバリアントを作成します。 白に映える濃いネイビーのエッジ（#1E3A5F）は、暗い背景では見えなくなります。ダークバリアントには、明るいエッジ（#4B8BBE）、明るいリング（#3B6B8A）、オフホワイトのセンター（#E2E8F0）が必要です。 -
描画する前に垂直方向の予算を計画します。 32x32のキャンバスに3つの積み重ねられた要素がある場合、約30の使用可能なユニットがあります。最初に垂直方向の分布をスケッチします（例：ボックス=12、ギャップ=2、レイヤー=5、ギャップ=2、レイヤー=5）。これにより、viewBoxの端でクリッピングされるのを防ぎます。
アンチパターン
| してはいけないこと | 代わりにすること |
|---|---|
width="24" height="24" を viewBox なしでハードコードする | 常に viewBox を使用。width/heightは必要な場合のみ追加 |
<g> グループに fill="none" を設定する | 個々の要素またはルートの <svg> に fill を設定 |
SVG内で px 単位を使用する | SVG座標は単位なし。viewBoxにマッピングされる |
エディタメタデータを含める（<sodipodi:*>、<inkscape:*>） | すべてのエディタのクズを取り除く |
配布されたSVGでロゴワードマークに <text> を使用する | 移植性のためにテキストをパスに変換 |
| トランスフォームを3レベルネストする | トランスフォームをパス座標にフラット化 |
xlink:href を使用する | href を使用（xlinkは非推奨） |
スタンドアロンSVGファイルで xmlns を忘れる | 常に xmlns="http://www.w3.org/2000/svg" を含める |
| アイコンで小数点以下2～3桁を超える精度を使用する | アイコンでは小数点以下2桁、複雑なアートでは最大3桁に丸める |
相互参照
- 周囲のWebサイトやインターフェースデザインはこのスキルの仕事ではありません。グラフィックの役割とサイズ制約とともに、グラフィックを依頼した人に戻し、その間は確立されたタイポグラフィ、色、視覚的階層、またはプロジェクトの既存のデザインシステムに従います。
- 概念、関係、プロセス、またはシステムを説明する図については、
editorial-svg-diagramsが利用可能な場合はそれを使用します。それ以外の場合は、このスキルの出力をブランドおよびインターフェースグラフィックに集中させ、要求された結果がそれに依存する場合は、利用できない図の機能を説明します。