SVG を用いた図形の描画方法まとめ

2017/10/13

※ 2015 年頃 Qiita に投稿した記事を移行しました。

描画で使用するHTMLタグ

種類	タグ
四角形	rect
正円	circle
楕円	ellipse
直線	line
折れ線	polyline
多角形	polygon
パス	path
テキスト	text

タグの分類は、以下の3種類になります。

基本図形( rect, circle, ellipse, line, polyline, polygon )
パス( path )
テキスト( text )

描画方法

サンプルコード

四角形

四角形（ rect ） …　座標 (0,0) から 100*70 の図形を描画。

角丸にしたい場合は、円の半径 rx, ry を指定してください。

四角形の描き方

rect(x="0", y="0", width="100", height="70", fill="#e74c3c")
rect(x="0", y="100", width="100", height="70", fill="#3498db", rx="15", ry="15") // 角丸

正円・楕円

円（ circle ） …　中心座標（ cx, cy ）から半径 r を指定し、円を描画。
楕円（ ellipse ） …　中心座標と、x軸方向の半径（ rx ）・y軸方向の半径（ ry ）を指定。

正方形の描き方

circle(cx="40", cy="240", r="40", fill="#f1c40f") // 正円
ellipse(cx="40", cy="350", rx="30", ry="40", fill="#2ecc71") // 楕円

直線・折れ線・多角形

直線（ line ） …　始点（ x1,y1 ）と終点（ x2,y2 ）の座標を指定し、直線を描画。
折れ線（ polyline ） …　連続した線分を描画。
多角形（ polygon ） …　連続した線分で、多角形を描画。

直線・折れ線・多角形

polyline と polygonは、points属性にx, y座標の組をカンマ（または空白区切り）で座標を指定します。

line(x1="0", y1="420", x2="90", y2="460", stroke="#9b59b6")
polyline(points="0,550 30,500 90,500 60,550 ", stroke="#34495e", fill="none")
polygon(points="0,620 30,580 90,580 60,620", stroke="#16a085", fill="none")

パス

パス（ path ） …　直線・曲線を組み合わせた図形を描画。

d 属性にコマンドとパラメータをカンマ（または空白区切り）で座標を指定します。コマンドが小文字の場合は現在の座標からの相対座標による指定、大文字の場合は絶対座標による指定となります。

こちらを参照してます。

コマンド（命令）	名前	パラメータ
M, m	moveto	(x,y)+
Z, z	closepath	なし
L, l	lineto	(x,y)+
H, h	lineto（水平）	x+
V, v	linto（垂直）	y+
C, c	curveto（三次ベジェ曲線）	(x1 y1 x2 y2 x y)+
S, s	curveto（三次ベジェ曲線：略式※）	(x2 y2 x y)+
Q, q	curveto（二次ベジェ曲線）	(x1 y1 x y)+
T, t	curveto（二次ベジェ曲線：略式※）	(x y)+
A, a	楕円弧	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

※ 第一制御点は前の曲線で仕様した制御点の対向位置

まずは簡単なコマンドを、図形とコードでみていきます。
移動（ M, m ）・直線（ L, l ）で台形を作成します。

パスの説明①

path(
  d="M 0,40 L 20,0 60,0 80,40 z"
  stroke="#16a085", fill="none", stroke-width="1"
)

コマンドを小文字（相対位置）に変更すると以下のような図形になります。

パスの説明②

path(
  d="m 0,40 l 20,0 60,0 80,40 z"
  stroke="#16a085", fill="none", stroke-width="1"
)

次に移動（ m ）・水平線（ H, h ）・垂直線（ V, v ）で線画を作成します。

パスの説明③

path(
  d="M 0,10 H 20 V 30 h 20 v 30"
  stroke="#c0392b", fill="none", stroke-width="1"
)

徐々に座標による描画に慣れてきたところで、次にベジェ曲線を描画します。
（三次ベジェ曲線の説明を理解すると自然と二次ベジェ曲線が理解できると思うので、ここでは三次ベジェ曲線のみ、図とコードの説明をします）

以下のような曲線を作りますが、座標の指定が何を示しているのかわかりづらいので、分割して考えていきましょう。

パスの説明④

path(
  d="m 40,0 c 40,0 -40,80 0,80 40,0 -40,-80 0,-80",
  stroke="#c0392b", fill="none", stroke-width="1"
)

まずは1つ目の三次ベジェ曲線を描画します。

パスの説明⑤

三次ベジェ曲線は、制御点2つと頂点1つで描画します。
（二次ベジェ曲線は制御点1つと頂点1つ）

パスの説明⑥

上図は、座標のベジェ曲線をSketchのパスツールでイメージを表現したものです。
※ c(x,y)の数値は、m(40,0)の相対座標

パスの説明⑦

path(
  d="m 40,0 c 40,0 -40,80 0,80",
  stroke="#c0392b", fill="none", stroke-width="1"
)

同様に、もう一つのベジェ曲線も以下のようなイメージで描画します。
※ c(x,y)の数値は、c(0,80)の相対座標

path(
  d="m 40,0 c 40,0 -40,80 0,80 40,0 -40,-80 0,-80",
  stroke="#c0392b", fill="none", stroke-width="1"
)

最後に円弧の説明をします。

円弧は1つの指定で4パターンできるのですが、それらは「短弧・長弧」「反時計回り・時計回り」かの指定によって決まります。 MDN - Path で非常に分かりやすい例が説明されているので、こちらを参考に見ていきましょう。

まず始点と頂点を定義すると、2つの円が予想されます。

パスの説明⑧

ここから、パターンは③④の指定によって4つ考えられます。
※以下の図において、実際に描画される弧はオレンジ色の線部分です。

パターン1：短弧・反時計周り

パスの説明⑨

パターン2：長弧・反時計周り

パスの説明⑩

パターン3：短弧・時計周り

パスの説明⑪

パターン4：長弧・時計周り

パスの説明⑫

テキスト

テキストタグに関しては特に指定情報量が多いため、この記事ではタグの使い方を簡単に説明します。（別記事に詳細を記述する予定）

テキスト（ text ） …　テキストをグラフィックとして描画。基本的には以下の指定が可能です。
x … X軸方向の位置(カンマ区切りで文字の差分値を指定可能)
y … Y軸方向の位置(カンマ区切りで文字の差分値を指定可能)
dx … X軸方向の差分
dy … Y軸方向の差分
rotate … 回転角度

文字スタイルを個別で指定したい時などは tspan を使用します。
(タグの位置的な意味としては span と同類）

text(x="0", y="10") こんにちは
text(x="0", y="20", stroke="black")
  | こんにち
  tspan(fill="none", stroke="red") は
text(x="0,15,30,45,60", y="40") こんにちは // X軸方向、絶対位置での指定
text(x="0", y="55,57,59,61,63") こんにちは // Y軸方向、絶対位置での指定
text(x="0", y="78", dx="0,5,5,5,5") こんにちは // X軸方向、相対位置での指定
text(x="0", y="93", dy="0,2,2,2,2") こんにちは // Y軸方向、相対位置での指定

その他パスに添ってテキストを配置する事も可能ですが、先ほども記述したようにこの記事では説明はしません。

備考

この記事では描画方法をまとめているだけなので、更に詳しい仕様はこちらをご覧頂くとより理解が深まります。