makepad-2.0-vector

Makepad 2.0 ベクターグラフィックススキル

バージョン： makepad-widgets（dev ブランチ） | 最終更新日： 2026-03-03

概要

Vector ウィジェットは、SVG に似た構文を使用して、解像度に依存しないベクターグラフィックスを描画します。パス、図形、グラデーション、フィルター、グループ、変換、Tween によるプロパティアニメーションに対応しています。

Splash で SVG を使用する 2 つの方法：

• Vector{} - Splash 内で図形（パス、長方形、円など）をインラインで定義します
• Svg{} - crate_resource() または http_resource() を使って外部の .svg ファイルを読み込みます。アニメーションやカスタム GPU シェーダーも使用できます

ドキュメント

詳しい説明については、ローカルのファイルを参照してください：

• ./references/vector-reference.md - Vector API、図形、グラデーション、フィルター、アニメーションの完全な解説

---

基本的な使い方

Vector{
    width: 48 height: 48
    viewbox: vec4(0 0 24 24)
    Path{
        d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
        fill: false
        stroke: #4488ff
        stroke_width: 2.0
        stroke_linecap: "round"
        stroke_linejoin: "round"
    }
}

主なプロパティ

プロパティ	説明	例
width / height	ウィジェットのサイズ（ピクセル）	48
viewbox	vec4 で指定する SVG の viewBox	vec4(0 0 24 24)

重要：図形のプロパティとウィジェットのプロパティ

Vector の図形では、SVG スタイルのプロパティを使います。ウィジェットの draw_bg.* プロパティは使いません：

// CORRECT — SVG properties
Path{d:"M 0 0 L 10 10" stroke:#x66aaff stroke_width:2.5}
Circle{cx:10 cy:10 r:5 fill:#x44ddaa}

// WRONG — these do nothing on Vector shapes!
Path{d:"..." draw_bg.stroke_color:#x66aaff draw_bg.stroke_width:2.}
Circle{cx:10 cy:10 r:5 draw_bg.fill_color:#x44ddaa}

---

図形の種類

パス（SVG パスデータ）

Path{
    d: "M10 10 L20 20 L10 20 Z"
    fill: #f00
    stroke: #000
    stroke_width: 1.5
}

組み込み図形

Rect{x: 0 y: 0 width: 100 height: 50 fill: #f00 rx: 5}
Circle{cx: 50 cy: 50 r: 25 fill: #00f}
Ellipse{cx: 50 cy: 30 rx: 40 ry: 20 fill: #0f0}
Line{x1: 0 y1: 0 x2: 100 y2: 100 stroke: #fff stroke_width: 2}
Polyline{points: "0,0 50,25 100,0" fill: false stroke: #fff}
Polygon{points: "50,0 100,100 0,100" fill: #f0f}

---

グラデーション

線形グラデーション

Gradient{
    id: "myGrad"
    x1: 0 y1: 0 x2: 1 y2: 1
    Stop{offset: 0 color: #ff0000}
    Stop{offset: 1 color: #0000ff}
}
Path{d: "..." fill: "url(#myGrad)"}

放射状グラデーション

RadGradient{
    id: "radGrad"
    cx: 0.5 cy: 0.5 r: 0.5
    Stop{offset: 0 color: #ffffff}
    Stop{offset: 1 color: #000000}
}

---

グループと変換

Group{
    transform: "translate(10 20) rotate(45 50 50)"
    opacity: 0.8

    Circle{cx: 0 cy: 0 r: 10 fill: #f00}
    Rect{x: 20 y: 0 width: 20 height: 20 fill: #0f0}
}

---

フィルター

Filter{
    id: "shadow"
    DropShadow{dx: 2 dy: 2 blur: 4 color: #0008}
}
Path{d: "..." fill: #fff filter: "url(#shadow)"}

---

Tween アニメーション（SVG プロパティアニメーション）

重要： Tween はプロパティ値であり、コンテナーではありません。図形のプロパティ（fill、stroke、opacity、cx、cy、r など）を、アニメーションする値に置き換えます。

基本構文

// Animate opacity (pulse effect)
Circle{cx:8 cy:8 r:6 fill:#x44ddaa opacity:Tween{from:0.3 to:1.0 dur:1.5 loop_:true}}

// Animate position (moving dot)
Circle{cx:Tween{from:20 to:380 dur:3.0 loop_:true} cy:25 r:5 fill:#x66aaff}

// Animate color
Circle{fill:Tween{from:#x44ddaa to:#x6688dd dur:3.0 loop_:true} cx:10 cy:10 r:8}

// Animate stroke
Path{d:"M 0 0 L 100 0" stroke:Tween{from:#x333333 to:#x66aaff dur:2.0 loop_:true} stroke_width:2.}

重要：loop_ はブール値である必要があります

// CORRECT — indefinite loop
opacity:Tween{from:0.3 to:1.0 dur:1.5 loop_:true}

// CORRECT — play 3 times
opacity:Tween{from:0.3 to:1.0 dur:1.5 loop_:3.0}

// WRONG — string doesn't trigger Indefinite, plays only once!
opacity:Tween{from:0.3 to:1.0 dur:1.5 loop_:"indefinite"}

Tween のプロパティ

プロパティ	型	説明	デフォルト
from	value	開始値（色、浮動小数点数、文字列）	-
to	value	終了値	-
values	Vec	キーフレーム値（from/to の代わりに使用）	-
dur	f32	秒単位の継続時間	1.0
begin	f32	秒単位の遅延時間	0.0
loop_	bool/f32	true = 無限に繰り返す、浮動小数点数 = 繰り返し回数	1.0
calc	string	"discrete"、"paced"、"spline"	"linear"
fill_mode	string	"freeze" または "remove"	"remove"

アニメーション可能なプロパティ

Tween を使うと、どの図形プロパティもアニメーションできます：

• fill、stroke — 色のアニメーション
• stroke_width、opacity、stroke_opacity — 浮動小数点数のアニメーション
• cx、cy、r（Circle）— 位置やサイズのアニメーション
• d（Path）— パス形状の変形アニメーション

よく使うパターン

点滅するインジケーター：

Vector{width:16 height:16
  Circle{cx:8 cy:8 r:6 fill:#x44ddaa opacity:Tween{from:0.3 to:1.0 dur:1.5 loop_:true}}
}

線に沿って動く点：

Vector{width:Fill height:40
  Path{d:"M 20 20 L 380 20" stroke:#x333355 stroke_width:1.}
  Circle{cx:Tween{from:20 to:380 dur:3.0 loop_:true} cy:20 r:4 fill:Tween{from:#x44ddaa to:#xffaa44 dur:3.0 loop_:true}}
}

時間差で連続するアニメーション：

Circle{cx:8 cy:8 r:6 fill:#x44ddaa opacity:Tween{from:0.3 to:1.0 dur:1.5 begin:0.0 loop_:true}}
Circle{cx:8 cy:8 r:6 fill:#xffaa44 opacity:Tween{from:0.3 to:1.0 dur:1.5 begin:0.5 loop_:true}}
Circle{cx:8 cy:8 r:6 fill:#x6688dd opacity:Tween{from:0.3 to:1.0 dur:1.5 begin:1.0 loop_:true}}

Tween と Animator の比較

機能	Tween（Vector）	Animator（ウィジェット）
対象範囲	SVG 図形のプロパティ	ウィジェットシェーダーの instance 変数
構文	プロパティ値の置き換え	animator: Animator{...} ブロック
トリガー	描画時に自動実行	状態遷移（ホバーなど）
ループ	loop_:true	Loop {duration: 1.0}
用途	SVG アニメーション	UI のホバー／フォーカス／アクティブ時の効果

---

アイコンのパターン（一般的）

Makepad 2.0 では、ほとんどの Vector ウィジェットが SVG パスを使ったアイコンとして使用されます：

let IconCheck = Vector{width: 18 height: 18 viewbox: vec4(0 0 24 24)
    Path{d: "M20 6L9 17L4 12" fill: false stroke: theme.color_highlight stroke_width: 2.5
        stroke_linecap: "round" stroke_linejoin: "round"}
}

let IconTrash = Vector{width: 14 height: 14 viewbox: vec4(0 0 24 24)
    Path{d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" fill: false stroke: theme.color_label_inner_inactive stroke_width: 1.8 stroke_linecap: "round" stroke_linejoin: "round"}
}

ライトモードとダークモードで一貫したスタイルにするには、テーマカラーを使用してください。

---

Vector vs Svg vs SDF2D

Feature	Vector{}	Svg{}	SDF2D Shader
入力	Splash 内のインライン図形	外部の .svg ファイル	シェーダーコード
SVG パスデータ	はい（d: "..."）	はい（ファイルから解析）	いいえ
グラデーション	let バインディング	SVG <defs>	手動
フィルター	Filter{DropShadow{}}	SVG <filter>	手動
アニメーション	Tween{}	SVG <animate> + animating: true	シェーダーユニフォーム
カスタム GPU シェーダー	shader_id	draw_svg +: {get_color: fn(){...}}	完全な制御
URL 読み込み	いいえ	はい（http_resource()）	いいえ
解像度に依存しない	はい	はい	はい
パフォーマンス	静的な用途に適しています	複雑な SVG に適しています	アニメーションに最適

Vector{} の用途： インラインアイコン、イラスト、プログラムで生成するベクターグラフィックス Svg{} の用途： 既製の SVG ファイル、複雑な SVG アセット、URL からの SVG の読み込み SDF2D の用途： アニメーション図形、ホバーエフェクト、カスタムウィジェット背景

---

16 進カラーのエスケープ

文字「e」を含む 16 進カラーを使う場合は、先頭に #x を付けます。

// WRONG - parser misreads 'e' as exponent
stroke: #2ecc71

// CORRECT
stroke: #x2ecc71

---

ベストプラクティス

1. viewbox を使うと、ウィジェットのサイズに依存しない座標空間を定義できます
2. テーマカラーを使うと、ダークモード／ライトモードに対応したアイコンのストロークや塗りを設定できます
3. let バインディングを使うと、再利用可能なアイコン定義を作成できます
4. パスはシンプルに保つ — 複雑な SVG パスはパフォーマンスに影響することがあります
5. アウトラインのみのアイコンには fill: false を使う（最も一般的なパターン）
6. アイコンの線端をよりきれいにするには、stroke_linecap: "round" を設定する