SVG による図形描画

作成日 : 2022-03-09

最終更新日 :

SVG (Scalable Vector Graphics) は、コンピュータで図形を描く方法として知られている。ここでは、パス要素を使った図形描画方法を考える。

パス要素は SVG で扱える図形すべてを描画できるが、その指定は複雑である。パス要素の主要属性は d 属性だ。d 属性で表わされる文字列は、それ自身がコマンドの連鎖である。以下、コマンドを掲げる。コマンドの大文字は絶対位置指定を、小文字は現位置からの相対位置指定を表わす。

コマンド	動作
M, m	指定位置に移動 (Move) する。
L, l	直線 (Line) を引く
H, h	水平線 (Horizontal Line) を引く
V, v	垂直線 (Vertical Line) を引く
Q, q	2 次ベジエ曲線 (Quadratic Bezier Curve) を引く。制御点を指定する。
T, t	2 次ベジエ曲線を引く。制御点は前の位置の制御点と対称の位置を使う。
C, c	3 次ベジエ曲線 (Cubic Bezier Curve) を引く。制御点を指定する。
S, s	3 次ベジエ曲線を引く。制御点は前の位置の制御点と対称の位置を使う。
A, a	円弧 (Arc) を引く
Z, z	M コマンドで指定された位置まで直線を引き、線を閉じる (Zip) 。

下記に d 属性の文字列を入れ、一度フォーカスをはずすと、パス要素の d 属性で指定された図形が描画される。座標は絶対座標で x 座標、y 座標とも 0 以上、200 未満を指定できる。