吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【SVG】グラフィックス要素

2015年2月18日 / category : svg

svgタグで使用できるグラフィックス要素を紹介していきます。
グラフィックス要素は全部で10個です。

1. 矩形 – rect
2. 円 – circle
3. 多角形 – polygon
4. 楕円 – ellipse
5. 線分 – line
6. 折線 – polyline
7. テキスト – text
8. パス – path
9. ファイル参照 – image
10. 要素参照 – use

rect
矩形
circle
polygon
多角形
ellipse
楕円
line
線分
polyline
折線
text
テキスト
TSUDOI
path
パス
image
ファイル参照
use
要素参照

1. 矩形 – rect

使用例 1
HTML
<svg width="100" height="100">
<rect width="100" height="100" fill="#e5000d" />
</svg>

主な属性

x
X座標
y
Y座標
width
height
高さ
rx
X軸半径の長さ
ry
Y軸半径の長さ
使用例 2
HTML
<svg width="200" height="100">
<rect x="0" y="0" width="200" height="100" rx="30" ry="30" fill="#e5000d" />
</svg>

2. 円 – circle

使用例 1
HTML
<svg width="100" height="100">
<circle cx="50" cy="50" r="50" fill="#e5000d" />
</svg>

主な属性

cx
中心のX座標
cy
中心のY座標
r
半径

3. 多角形 – polygon

使用例 1
HTML
<svg width="100" height="100">
<polygon points="0,0 10,100 100,100 90,0" fill="#e5000d" />
</svg>

主な属性

points
座標リスト

4. 楕円 – ellipse

使用例 1
HTML
<svg width="100" height="100">
<ellipse cx="50" cy="50" rx="50" ry="35" fill="#e5000d" />
</svg>

主な属性

cx
中心のX座標
cy
中心のY座標
rx
X軸半径の長さ
ry
Y軸半径の長さ

5. 線分 – line

使用例 1
HTML
<svg width="100" height="100">
<line stroke="#e5000d" x1="0" y1="0" x2="100" y2="100" />
</svg>

主な属性

x1
始点のX座標
y1
始点のY座標
x2
終点のX座標
y2
終点のY座標

6. 折線 – polyline

使用例 1
HTML
<svg width="100" height="100">
<polyline stroke="#e5000d" points="0,0 75,25 25,75 100,100" />
</svg>

主な属性

points
座標リスト

7. テキスト – text

使用例 1
TSUDOI
HTML
<svg width="100" height="100">
<text fill="#e5000d" font-size="24" font-family="arial" x="5" y="53">TSUDOI</text>
</svg>

主な属性

x
X座標
y
Y座標
dx
この要素と全ての子要素に対し、X軸方向をずらす量
dy
この要素と全ての子要素に対し、Y軸方向をずらす量
rotate
回転
textLength
文字列全体の幅
lengthAdjust
幅の調整方法
使用例 2
TSUDOI
HTML
<svg width="300" height="100">
<text
	fill="#e5000d"
	font-size="24"
	font-family="arial"
	x="5"
	y="53"
	rotate="45"
	textLength="200"
	lengthAdjust="spacingAndGlyphs">TSUDOI</text>
</svg>

8. パス – path

使用例 1
HTML
<svg width="100" height="100">
<path fill="#e5000d" d="M0,50 L25,0 75,0 100,50 75,100 25,100 Z" />
</svg>

主な属性

d
描画コマンドリスト
M,m[moveto] : 開始座標(x y)
Z,z[closepath] : パスを閉じる
L,l[lineto] : 直線(x y)
H,h[lineto] : 水平線(x)
V,v[lineto] : 垂直線(y)
C,c[curveto] : 三次ベジェ曲線 – 制御点2個 (x1 y1 x2 y2 x y)
S,s[curveto] : 三次ベジェ曲線 – 制御点1個 (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)
pathLength
パスの全長
使用例 2 – M,L,Z
HTML
<svg width="100" height="100">
<path fill="#e5000d" d="M0,0 L100,0 L100,100, L0,100 Z" />
</svg>
使用例 3 – M,H,V,Z
HTML
<svg width="100" height="100">
<path fill="#e5000d" d="M0,0 H100, V100, H0 Z" />
</svg>
使用例 4 – M,C,Z
HTML
<svg width="200" height="100">
<path fill="#e5000d" d="M0,50 C0,0 100,0 100,50 C100,100 200,100, 200,50 Z" />
</svg>
使用例 5 – M,C,S,Z
HTML
<svg width="200" height="100">
<path fill="#e5000d" d="M0,50 C0,0 100,0 100,50 S200,100, 200,50 Z" />
</svg>
使用例 6 – M,Q,T,Z
HTML
<svg width="200" height="100">
<path fill="#e5000d" d="M0,50 Q50,0 100,50 T200,50 Z" />
</svg>
使用例 7 – M,V,A,Z
HTML
<svg width="100" height="100">
<path fill="#e5000d" d="M50,50 V0 A50,50 0 0,0 0,50 Z" />
</svg>

9. ファイル参照 – image

使用例 1
HTML
<svg width="100" height="100">
<image x="0" y="0" width="100" height="100" xlink:href="/html5/svg/00/imgs/logo.svg" />
</svg>

主な属性

x
X座標
y
Y座標
width
height
高さ
xlink:href
ファイル参照先

10. 要素参照 – use

使用例 1
HTML
<svg width="100" height="100">
<defs>
<rect id="rect" width="100" height="100" fill="#e5000d" />
</defs>
<use x="0" y="0" xlink:href="#rect" />
</svg>

主な属性

x
X座標
y
Y座標
width
height
高さ
xlink:href
要素参照先