d - SVG: Scalable Vector Graphics

d属性は描かれるパスを定義します。

パスの定義はパスコマンドのリストで、各コマンドはコマンド文字とコマンドへのパラメータを示す数値から構成されます。コマンドの詳細は以下になります。

３つの要素がこの属性を有します： <path>, <glyph>, <missing-glyph>

html,body,svg { height:100% }

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

path

<path>要素に対しては、d属性は、描かれるパスを定義するパスコマンドの並びを含む文字列です。

値	<string>
初期値	none
アニメーション可否	Yes

glyph

警告:SVG2において、<glyph>は非推奨であり、用いるべきではありません。

<glyph>要素に対しては、d属性はグリフのアウトライン形状を定義するパスコマンドの並びを含む文字列です。

値	<string>
初期値	none
アニメーション可否	Yes

注意:原点(座標0,0)は通常、コンテキストの左上の角です。しかし、<glyph>要素は、それ自身の原点を文字ボックスの左下に持ちます。

missing-glyph

警告:SVG2において、<missing-glyph>は非推奨であり、用いるべきではありません。

<missing-glyph>要素に対しては、d属性は、グリフのアウトライン形状を定義するパスコマンドの並びを含んだ文字列です。

値	<string>
初期値	none
アニメーション可否	Yes

パスコマンド

パスコマンドは、描かれるパスの定義を指定します。各コマンドは、コマンド文字とコマンドパラメータを示す数値で構成されます。

SVGでは、6つのタイプのパスコマンドを定義しており、全部で20個のコマンドがあります:

MoveTo: M, m
LineTo: L, l, H, h, V, v
3次ベジエ曲線: C, c, S, s
2次ベジエ曲線: Q, q, T, t
楕円円弧曲線: A, a
ClosePath: Z, z

ノート:コマンドはケースセンシティブ（大小文字の区別あり）です. 大文字のコマンドは絶対座標を指定し、これに対して小文字のコマンドは現在位置からの相対座標を指定します。

コマンドへの引数として負値を指定することは常に可能です:

負の角度は反時計回りとなります;
絶対値での負のxとyの値は反転座標と解釈されます;
相対値での負のxの値は左へ移動,相対値での負のyの値は上方向へ移動します。

MoveToパスコマンド

MoveToでの指定は、筆記用具を持ち上げ他の位置で下ろす動作と考えられます―言い換えると、現在位置 (P_o; {x_o, y_o})の移動です。P_oと新しい現在位置 (P_n; {x_n, y_n})との間には線は描かれません。

コマンドパラメータ説明

コマンド	パラメータ	説明
M	(`x`, `y`)+	現在位置を座標`x`,`y`へ移動します。後続する任意個の座標の組は暗黙的に絶対座標でのLineTo(`L`)コマンドと解釈されます(以下を参照)。形式: P_n = {`x`, `y`}
m	(`dx`, `dy`)+	現在位置を最後に把握されたパス位置からの`dx`をx軸方向、`dy`をy軸に沿った並進として移動します。後続する任意個の座標の組は暗黙的に相対座標でのLineTo(`l`)コマンドとして解釈されます(以下を参照)。形式: P_n = {x_o + `dx`, y_o + `dy`}

(x, y)+

現在位置を座標x,yへ移動します。後続する任意個の座標の組は暗黙的に絶対座標でのLineTo(L)コマンドと解釈されます(以下を参照)。

形式: P_n = {x, y}

(dx, dy)+

現在位置を最後に把握されたパス位置からのdxをx軸方向、dyをy軸に沿った並進として移動します。後続する任意個の座標の組は暗黙的に相対座標でのLineTo(l)コマンドとして解釈されます(以下を参照)。

形式: P_n = {x_o + dx, y_o + dy}

例

html,body,svg { height:100% }

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red"
    d="M 10,10 h 10
       m  0,10 h 10
       m  0,10 h 10
       M 40,20 h 10
       m  0,10 h 10
       m  0,10 h 10
       m  0,10 h 10
       M 50,50 h 10
       m-20,10 h 10
       m-20,10 h 10
       m-20,10 h 10" />
</svg>

LineToパスコマンド

LineToは、現在位置 (P_o; {x_o, y_o})から終端位置 (P_n; {x_n, y_n})への直線を指定されたパラメータに基づいて描きます。終端位置(P_n)は、次のコマンドでの現在位置 (P_o′)となります。

コマンド	パラメータ	説明
L	(`x`, `y`)+	現在位置から`x`,`y`で指定される終端位置へ直線を描きます。後続する任意個の座標の組は暗黙的に絶対座標でのLineTo (`L`) コマンドと解釈されます。形式: P_o′ = P_n = {`x`, `y`}
l	(`dx`, `dy`)+	現在位置から、現在位置に対するx-軸方向に`dx`、y-軸方向に`dy`で表される終端位置への直線を描きます。後続する任意個の座標の組は、暗黙的に相対座標でのLineTo (`l`) コマンドと解釈されます(以下を参照)。形式: P_o′ = P_n = {x_o + `dx`, y_o + `dy`}
H	`x`+	現在位置から、パラメータ`x`と現在位置のy座標で指定される終端座標までの水平線を描きます。後続する任意個の値は、暗黙的に絶対座標での水平線用のLineTo (`H`)コマンドと解釈されます。形式: P_o′ = P_n = {`x`, y_o}
h	`dx`+	現在位置から、現在位置からのx-軸方向への`dx`の並進と現在位置のy座標で指定される終端位置までの水平線を描きます。後続する任意個の値は、暗黙的に相対座標での水平線用のLineTo (`h`)コマンドと解釈されます。形式: P_o′ = P_n = {x_o + `dx`, y_o}
V	`y`+	現在位置から、パラメータ`y`と現在位置のx座標で指定される終端座標までの垂直線を描きます。後続する任意個の値は、暗黙的に絶対座標での垂直線用のLineTo (`V`)コマンドと解釈されます。形式: P_o′ = P_n = {x_o, `y`}
v	`dy`+	現在位置から、現在位置からのy-軸方向への`dx`の並進と現在位置のx座標で指定される終端位置までの垂直線を描きます。後続する任意個の値は、暗黙的に相対座標での垂直線用のLineTo (`v`)コマンドと解釈されます。形式: P_o′ = P_n = {x_o,y_o + `dy`}

例

html,body,svg { height:100% }

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 絶対座標でのLineToコマンド -->
  <path fill="none" stroke="red"
        d="M 10,10
           L 90,90
           V 10
           H 50" />

  <!-- 相対座標でのLineToコマンド -->
  <path fill="none" stroke="red"
        d="M 110,10
           l 80,80
           v -80
           h -40" />
</svg>

3次ベジエ曲線

3次ベジエ曲線は4点で定義される滑らかな曲線です:

開始位置 (現在位置): (P_o = {x_o, y_o})
終端位置: (P_n = {x_n, y_n})
開始制御点: (P_cs = {x_cs, y_cs})
(曲線の開始点近くの曲率を制御します)
終端制御点: (P_ce = {x_ce, y_ce})
(曲線の終端近くの曲率を制御します)

描画後に、終端位置(P_n)は、次のコマンドに対する現在位置 (P_o′)となります。

コマンド	パラメータ	説明
C	(`x1`,`y1`, `x2`,`y2`, `x`,`y`)+	開始位置から、`x`,`y`で指定される終端位置までの3次ベジエ曲線を描きます。開始制御点は`x1`,`y1`で指定され、終端制御点は`x2`,`y2`で指定されます。後続する任意個の3つ組の座標は、暗黙的な絶対座標での3次ベジエ曲線(`C`)コマンドへのパラメータと解釈されます。形式: P_o′ = P_n = {`x`, `y`} ; P_cs = {`x1`, `y1`} ; P_ce = {`x2`, `y2`}
c	(`dx1`,`dy1`, `dx2`,`dy2`, `dx`,`dy`)+	開始位置から、開始位置からのx-軸方向に`dx`,y-軸方向に`dy`とした並進となる終端位置までの3次ベジエ曲線を描きます。開始制御点は、開始点 (曲線の開始位置)をx-軸方向に`dx1`,y-軸方向に`dy1`と並進した点です。終端制御点は現在位置 (曲線の開始位置)を、x-軸方向に`dx2`,y-軸方向に`dy2`と並進した点です。後続する任意個の3つ組の座標は、暗黙的に相対座標での3次ベジエ曲線 (`c`) コマンドと解釈されます。形式: P_o′ = P_n = {x_o + `dx`, y_o + `dy`} ; P_cs = {x_o + `dx1`, y_o + `dy1`} ; P_ce = {x_o + `dx2`, y_o + `dy2`}
S	(`x2`,`y2`, `x`,`y`)+	開始位置から、`x`,`y`で指定される終端位置までの滑らかな3次ベジエ曲線を描きます。終端制御点は、`x2`,`y2`で指定されます。開始制御点は、直前の曲線コマンドの終端制御点が鏡映されます。もし直前のコマンドが3次ベジエ曲線でない場合は、開始制御点は曲線の開始位置(現在座標)と同一となります。後続する任意個の座標の組は、暗黙的に絶対座標での滑らかな3次ベジエ曲線(`S`)コマンドへのパラメータと解釈されます。
s	(`dx2`,`dy2`, `dx`,`dy`)+	開始位置から、現在位置からのx-軸方向への`dx`,y-軸方向への`dy`への並進で表される終端位置までの滑らかな3次ベジエ曲線を描きます。終端制御点は、現在位置(曲線の開始点)をx-軸方向への`dx2`とy-軸方向への`dy2`だけ並進させた点です。開始制御点は、直前の曲線コマンドの終端位置が鏡映されます。もし直前のコマンドが3次ベジエ曲線でない場合は、開始制御点は曲線の開始位置(現在座標)と同一となります。後続する任意個の座標の組は、暗黙的に相対座標での滑らかな3次ベジエ曲線 (`s`) コマンドと解釈されます。

例

html,body,svg { height:100% }

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- 絶対座標での3次ベジエ曲線 -->
  <path fill="none" stroke="red"
        d="M 10,90
           C 30,90 25,10 50,10
           S 70,90 90,90" />
 
  <!-- 相対座標での3次ベジエ曲線 -->
  <path fill="none" stroke="red"
        d="M 110,90
           c 20,0 15,-80 40,-80
           s 20,80 40,80" />

  <!-- 曲線の頂点と制御点の明示 -->
  <g id="ControlPoints">
    
    <!-- 1つ目の3次コマンドへの制御点 -->
    <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
    <circle cx="30" cy="90" r="1.5"/>
    
    <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
    <circle cx="25" cy="10" r="1.5"/>
    
    <!-- 2つめの円滑化制御点 (1つ目は暗黙的) -->
    <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" />
    <circle cx="75" cy="10" r="1.5" fill="lightgrey"/>
    
    <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
    <circle cx="70" cy="90" r="1.5" />
    
    <!-- 曲線上の頂点 -->
    <circle cx="10" cy="90" r="1.5"/>
    <circle cx="50" cy="10" r="1.5"/>
    <circle cx="90" cy="90" r="1.5"/>
  </g>
  <use xlink:href="#ControlPoints" x="100" />
</svg>

2次ベジエ曲線

2次ベジエ曲線は3点で定義される滑らかな曲線です:

開始座標(現在位置): P_o = {x_o, y_o}
終端座標: P_n = {x_n, y_n}
制御点: P_c = {x_c, y_c}
(曲率を制御します)

描画後に、終端位置(P_n)は、次のコマンドに対する現在位置(P_o′)となります。

コマンド	パラメータ	説明
Q	(`x1`,`y1`, `x`,`y`)+	開始位置から`x`,`y`で指定される終端位置までの2次ベジエ曲線を描きます。制御点は`x1`,`y1`で指定されます。後続する任意個の座標の組は、暗黙的に絶対座標での4次ベジエ曲線 (`Q`) コマンドへのパラメータと解釈されます。形式: P_o′ = P_n = {`x`, `y`} ; P_c = {`x1`, `y1`}
q	(`dx1`,`dy1`, `dx`,`dy`)+	開始位置から、開始位置からのx-軸方向に`dx`,y-軸方向に`dy`とした並進となる終端位置までの2次ベジエ曲線を描きます。制御点は、開始点 (曲線の開始位置)をx-軸方向に`dx1`,y-軸方向に`dy1`と並進した点です。後続する任意個の座標は、暗黙的に相対座標での2次ベジエ曲線 (`q`) コマンドへのパラメータと解釈されます。形式: P_o′ = P_n = {x_o + `dx`, y_o + `dy`} ; P_c = {x_o + `dx1`, y_o + `dy1`}
T	(`x`,`y`)+	開始位置から`x`,`y`で指定される終端位置までの滑らかな2次ベジエ曲線を描きます。制御点は、直前の曲線コマンドの終端制御点が反映されます。もし直前のコマンドが2次ベジエ曲線でない場合は、制御点は曲線の開始位置(現在座標)と同一となります。後続する任意個の座標の組は、暗黙的に絶対座標での滑らかな2次ベジエ曲線(`T`)コマンドへのパラメータと解釈されます。形式: P_o′ = P_n = {`x`, `y`}
t	(`dx`,`dy`)+	開始位置から、現在位置からのx-軸方向への`dx`,y-軸方向への`dy`への並進で表される終端位置までの滑らかな3次ベジエ曲線を描きます。制御点は、直前の曲線コマンドの制御点が反映されます。もし直前のコマンドが2次ベジエ曲線でない場合は、制御点は曲線の開始位置(現在座標)と同一となります。後続する任意個の座標の組は、暗黙的に相対座標での滑らかな2次ベジエ曲線 (`t`) コマンドへのパラメータと解釈されます。形式: P_o′ = P_n = {x_o + `dx`, y_o + `dy`}

例

html,body,svg { height:100% }

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- 暗黙的な繰り返しによる2次ベジエ曲線 -->
  <path fill="none" stroke="red"
        d="M 10,50
           Q 25,25 40,50
           t 30,0 30,0 30,0 30,0 30,0" />

  <!-- 曲線の頂点と制御点の明示 -->
  <g>    
    <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" />
    <circle cx="25" cy="25" r="1.5" />
    
    <!-- 曲線上の頂点 -->
    <circle cx="10" cy="50" r="1.5"/>
    <circle cx="40" cy="50" r="1.5"/>
    
    <g id="SmoothQuadraticDown">
      <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
      <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
      <circle cx="70" cy="50" r="1.5" />
    </g>
    
    <g id="SmoothQuadraticUp">
      <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
      <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
      <circle cx="100" cy="50" r="1.5" />
    </g>
    
    <use xlink:href="#SmoothQuadraticDown" x="60" />
    <use xlink:href="#SmoothQuadraticUp"   x="60" />
    <use xlink:href="#SmoothQuadraticDown" x="120" />
  </g>
</svg>

楕円円弧曲線

楕円円弧曲線は楕円の一部として定義される曲線です。ベジエ曲線よりも楕円円弧曲線を用いるほうが、高度な正則曲線の描画が容易になることが多くあります。

コマンドパラメータ説明

コマンド	パラメータ	説明
A	(`rx` `ry` `角度` `大円弧フラグ` `掃引フラグ` `x` `y`)+	現在位置から`x`,`y`座標へ円弧を描きます。楕円の中心はコマンドへの他のパラメータに基づいて自動的に決定されます。: `rx`と`ry`は楕円の半径です; `角度`はx-軸に対する楕円の角度（度単位）です; `大円弧フラグ`と`掃引フラグ`は、他のパラメータによって描画可能な4つの可能な円弧のうち、どの円弧を描くかを選択可能にします。 `大円弧フラグ`では大きい円弧 (1) を描くか、小さい円弧 (0) を描くかを選択し, `掃引フラグ`では時計回りの円弧 (1) を描くか、反時計周りの円弧 (0) を描くかを選択します。座標 `x`,`y` は、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に絶対座標での円弧曲線 (`A`) コマンドに対するものと解釈されます。
a	(`rx` `ry` `角度` `大円弧フラグflag` `掃引フラグ` `dx` `dy`)+	現在位置から、現在位置からのx-軸方向への`dx`とy-軸方向への`dy`への並進で指定される点へ円弧を描きます。楕円の中心はコマンドへの他のパラメータに基づいて自動的に決定されます。: `rx`と`ry`は楕円の半径です; `角度`はx-軸に対する楕円の角度（度単位）です; `大円弧フラグ`と`掃引フラグ`は、他のパラメータによって描画可能な4つの可能な円弧のうち、どの円弧を描くかを選択可能にします。 `大円弧フラグ`では大きい円弧 (1) を描くか、小さい円弧 (0) を描くかを選択し, `掃引フラグ`では時計回りの円弧 (1) を描くか、反時計周りの円弧 (0) を描くかを選択します。 `dx`と`dy`で並進された座標`X`,`Y`は、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に相対座標での円弧曲線 (`a`) コマンドに対するものと解釈されます。

(rx ry 角度 大円弧フラグ 掃引フラグ x y)+

現在位置からx,y座標へ円弧を描きます。楕円の中心はコマンドへの他のパラメータに基づいて自動的に決定されます。:

rxとryは楕円の半径です;
角度はx-軸に対する楕円の角度（度単位）です;
大円弧フラグと掃引フラグは、他のパラメータによって描画可能な4つの可能な円弧のうち、どの円弧を描くかを選択可能にします。
- 大円弧フラグでは大きい円弧 (1) を描くか、小さい円弧 (0) を描くかを選択し,
- 掃引フラグでは時計回りの円弧 (1) を描くか、反時計周りの円弧 (0) を描くかを選択します。

座標 x,y は、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に絶対座標での円弧曲線 (A) コマンドに対するものと解釈されます。

(rx ry 角度 大円弧フラグflag 掃引フラグ dx dy)+

現在位置から、現在位置からのx-軸方向へのdxとy-軸方向へのdyへの並進で指定される点へ円弧を描きます。楕円の中心はコマンドへの他のパラメータに基づいて自動的に決定されます。:

rxとryは楕円の半径です;
角度はx-軸に対する楕円の角度（度単位）です;
大円弧フラグと掃引フラグは、他のパラメータによって描画可能な4つの可能な円弧のうち、どの円弧を描くかを選択可能にします。
- 大円弧フラグでは大きい円弧 (1) を描くか、小さい円弧 (0) を描くかを選択し,
- 掃引フラグでは時計回りの円弧 (1) を描くか、反時計周りの円弧 (0) を描くかを選択します。

dxとdyで並進された座標X,Yは、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に相対座標での円弧曲線 (a) コマンドに対するものと解釈されます。

例

html,body,svg { height:100% }

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

  <!-- 円弧への２つのフラグの効果により各円弧が描画される -->
  <path fill="none" stroke="red"
        d="M 6,10
           A 6 4 10 1 0 14,10" />
 
  <path fill="none" stroke="lime"
        d="M 6,10
           A 6 4 10 1 1 14,10" />
 
  <path fill="none" stroke="purple"
        d="M 6,10
           A 6 4 10 0 1 14,10" />

  <path fill="none" stroke="pink"
        d="M 6,10
           A 6 4 10 0 0 14,10" />
</svg>

ClosePath

ClosePathは、現在位置からパスの開始位置までの直線描画を指定します。

コマンド	パラメータ	説明
Z, z		パスの最終位置とその初期位置とを接続することで、現在のサブパスを閉じます。もし、2つの点が異なる座標の場合は、2点間に直線が描かれます。

ノート:ClosePathによって生じる形状は、他のコマンドを用いて初期位置へ線を描いて閉じた場合とは異なる場合があります。これは、描線の終端が互いに接続されるためです (stroke-linejoin 設定)を参照のこと。単に同じ座標に配置されるわけではありません。

例

html,body,svg { height:100% }

<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">

  <!--
  初期位置と異なる終端位置による
  パスで描かれる開いた形状
  -->
  <path stroke="red"
        d="M 5,1
           l -4,8 8,0" />
 
  <!--
  初期位置と一致する終端位置による
  パスで描かれる開いた形状
  -->
  <path stroke="red"
        d="M 15,1
           l -4,8 8,0 -4,-8" />
 
  <!--
  初期位置と異なる終端位置による
  パスで描かれる閉じた形状
  -->
  <path stroke="red"
        d="M 25,1
           l -4,8 8,0
           z" />
</svg>

仕様

仕様	状態	コメント
Scalable Vector Graphics (SVG) 2 d の定義	勧告候補	`<path>`の定義
Scalable Vector Graphics (SVG) 1.1 (Second Edition) d の定義	勧告	`<glyph>`と`<missing-glyph>`の初期定義
Scalable Vector Graphics (SVG) 1.1 (Second Edition) d の定義	勧告	`<path>`の初期定義

最終更新日: Apr 17, 2020, MDN 貢献者