More than 1 year has passed since last update.

SVGタグの使い方が気になった時にまとめたものを、せっかくなのでメモに残したいと思います。
内容は半年以上前のものなので、情報が古い・正しくない箇所がありましたらご指摘頂けると嬉しいです。

描画で使用するタグ

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

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

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

描画方法

サンプルコード

See the Pen svg_sample_02 by Ayano Ide (@a-ide) on CodePen.


四角形

四角形(rect … 座標(0,0)から 100*70 の図形を描画
角丸にしたい場合は、円の半径 rx, ry を指定してください。

01.png

pug
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) を指定。

02.png

pug
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 … 連続した線分で、多角形を描画。

03.png

polylinepolygonは、points属性にx, y座標の組をカンマ(または空白区切り)で座標を指定します。

pug
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)で台形を作成します。

04.png

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

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

05.png

pug
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)で線画を作成します。

06.png

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

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

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

07.png

pug
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つ目の三次ベジェ曲線を描画します。

08.png

三次ベジェ曲線は、制御点2つと頂点1つで描画します。
(二次ベジェ曲線は制御点1つと頂点1つ)
   
09.png

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

pug
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)の相対座標
10.png

pug
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つの円が予想されます。

11.png



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

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

12.png

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

13.png

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

14.png

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

15.png

テキスト

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

テキスト(text … テキストをグラフィックとして描画。
基本的には以下の指定が可能です。

  • x … X軸方向の位置(カンマ区切りで文字の差分値を指定可能)
  • y … Y軸方向の位置(カンマ区切りで文字の差分値を指定可能)
  • dx … X軸方向の差分
  • dy … Y軸方向の差分
  • rotate … 回転角度

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

pug
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軸方向、相対位置での指定

See the Pen svg_sample_03 by Ayano Ide (@a-ide) on CodePen.

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

16.png

参考画像:W3C SVG 1.1 テキスト

備考

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

W3C SVG-1.1 基本図形
W3C SVG-1.1 パス
W3C SVG-1.1 テキスト

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.