SVG - HTML

インライン SVG の定義

SVG タグはインライン要素になります。HTML 内で定義するには次のようにします。

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="300" height="300">
    ・・・
</svg>

センタリングするには次のようにします。

css

#svg {
  border: 1px solid black;
  display: block;
  margin: 0 auto;
}

四角形を描く

四角形を描くには次のようにします。

四角形

<rect x="50" y="50" width="30" height="30" />
<rect x="10" y="10" rx="10" ry="10" width="30" height="30" />
属性 内容
x 長方形の左上の角の位置。X 座標
y 長方形の左上の角の位置、Y 座標
width 長方形の幅
height 長方形の高さ
rx 長方形の角の、X 軸方向の半径
ry 長方形の角の、Y 軸方向の半径

円を描く

円を描くには次のようにします。

円

<circle cx="25" cy="25" r="20"/>
属性 内容
r 円の半径
cx 円の中心の位置を示す、X 座標
cy 円の中心の位置を示す、Y 座標

楕円を描く

楕円を描くを描くには次のようにします。

<ellipse cx="50" cy="50" rx="20" ry="5"/>
属性 内容
rx 楕円の X 軸方向の半径
ry 楕円の Y 軸方向の半径
cx 楕円の中心の位置を示す、X 座標
cy 楕円の中心の座標を示す、Y 座標

直線を描く

直線を描くには次のようにします。

<line x1="10" x2="50" y1="10" y2="50" stroke="black" stroke-width="5"/>
属性 内容
x1 点 1 の X 座標
y1 点 1 の Y 座標
x2 点 2 の X 座標
y2 点 2 の Y 座標