pathタグ -SVG内で任意の曲線や複雑な図形を描画する｜HTML辞典

<path>タグとは？

<path> タグは、SVG（Scalable Vector Graphics）内で任意の曲線や複雑な図形を描画するためのタグです。
d 属性を使用して、直線・曲線・円弧などを自由に組み合わせたパス（軌跡）を作成できます。

基本情報

コンテンツモデル

SVG コンテンツ（SVG Content）。

閉じタグの有無

<path> は 自己終了タグ（<path />）として使用可能 です。

基本的な記述方法

<svg width="200" height="200">
    <path d="M 10 80 C 40 10, 160 10, 190 80" stroke="black" stroke-width="2" fill="none" />
</svg>

✅ 上記のコードでは、M（移動）、C（三次ベジェ曲線）を使って曲線を描画しています。

使用できる主な属性

属性名	説明	例
d	パスの座標情報を指定	<path d="M10 10 L90 90">
fill	塗りつぶしの色	<path fill="red">
stroke	線の色	<path stroke="black">
stroke-width	線の太さ	<path stroke-width="3">
stroke-dasharray	破線の設定	<path stroke-dasharray="5,5">

d 属性の主なコマンド

コマンド	説明	例
M x y	(x, y) に移動	M 10 10
L x y	(x, y) に直線を引く	L 100 100
H x	水平方向の直線を引く	H 200
V y	垂直方向の直線を引く	V 150
C x1 y1, x2 y2, x y	三次ベジェ曲線	C 20 30, 80 30, 100 100
Q x1 y1, x y	二次ベジェ曲線	Q 50 10, 90 90
Z	パスを閉じる	Z

基本的なパスの描画例

直線を描画する

<svg width="200" height="200">
    <path d="M 10 10 L 190 190" stroke="black" stroke-width="2" fill="none" />
</svg>

✅ (10,10) から (190,190) までの黒い直線が描画されます。

曲線を描画する

<svg width="200" height="200">
    <path d="M 10 80 C 40 10, 160 10, 190 80" stroke="black" stroke-width="2" fill="none" />
</svg>

✅ 三次ベジェ曲線で滑らかな曲線を描画しています。

閉じたパス（多角形）を描画する

<svg width="200" height="200">
    <path d="M 50 50 L 150 50 L 100 150 Z" stroke="black" stroke-width="2" fill="lightblue" />
</svg>

✅ 三角形が描画され、塗りつぶし色（lightblue）が適用されています。

CSSを使ったデザイン変更

SVG の要素には CSS を適用できます。

path {
    stroke: blue;
    stroke-width: 3;
    fill: none;
}

✅ すべての <path> 要素に青色の線が適用されます。

適切な使用例

✅ d を使用して自由な形状を作成する

<svg width="200" height="200">
    <path d="M 50 50 C 70 10, 130 10, 150 50 S 230 90, 250 50" stroke="black" stroke-width="2" fill="none" />
</svg>

✅ fill を指定してパスを塗りつぶす

<svg width="200" height="200">
    <path d="M 50 50 L 150 50 L 100 150 Z" stroke="black" stroke-width="2" fill="lightblue" />
</svg>

✅ stroke-dasharray を使って破線を作成する

<svg width="200" height="200">
    <path d="M 10 10 L 190 190" stroke="blue" stroke-width="3" stroke-dasharray="5,5" fill="none" />
</svg>

適切でない使用例（誤った使い方）

❌ d を指定しない（描画されない）

<!-- NG: d 属性を省略 -->
<svg width="200" height="200">
    <path stroke="black" stroke-width="2" fill="none" />
</svg>

✅ 正しい書き方（d を指定）

<svg width="200" height="200">
    <path d="M 10 10 L 90 90" stroke="black" stroke-width="2" fill="none" />
</svg>

❌ <path> を <svg> の外に記述する

<!-- NG: <svg> の外に <path> を記述 -->
<path d="M 10 10 L 90 90" stroke="black" />
<svg width="200" height="200"></svg>

✅ 正しい書き方（<svg> 内に記述）

<svg width="200" height="200">
    <path d="M 10 10 L 90 90" stroke="black" />
</svg>

<path>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<path>	任意の図形を描画	d 属性で自由な曲線を描画	ベクターイラスト、ロゴ作成
<polygon>	多角形を描画	points 属性で座標を指定	三角形や星形の作成
<polyline>	折れ線を描画	points 属性で座標を指定	折れ線グラフや境界線
<line>	直線を描画	x1、y1、x2、y2 を指定	単純な直線の描画
<rect>	長方形を描画	x、y、width、height を指定	四角形のオブジェクト

まとめ

<path> タグは、SVG 内で 自由な形状や曲線を描画するためのタグ です。
適切に使用することで、ベクターイラストやカスタムアイコンなど、複雑なデザインを作成できます。