元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【SVG】基本形状の描画

基本形状の描画について書きます。「長方形」「円」「楕円」「直線」「折れ線」「多角形」の基本的な書き方を見ていきます。基本形状を組み合わせることで、様々な図形を作成することができます。

基本形状の種類

  • rect:長方形
  • circle:円
  • ellipse:楕円
  • line:直線
  • polyline:折れ線
  • polygon:多角形

rect:長方形の記述と属性

<rect x="10" y="10" width="100" height="100" />

  • x:左上の頂点のx座標
  • y:左上の頂点のy座標
  • width:幅
  • height:高さ
  • rx:角丸。x軸方向の半径
  • ry:角丸。y軸方向の半径

角丸も描画できる。

circle:円の記述と属性

<circle cx="30" cy="25" r="20" fill="magenta"/>
<circle cx="50" cy="35" r="20" stroke-width="4" stroke="red" fill="magenta"/>
<circle cx="70" cy="45" r="20" stroke-width="4" stroke="red" fill="none"/>

  • cx:円の中心のx座標
  • cy:円の中心のy座標
  • r:半径

ellipse:楕円の記述と属性

<ellipse cx="20" cy="35" rx="14" ry="28" fill="green"/>
<ellipse cx="50" cy="35" rx="30" ry="20" stroke-width="3" stroke="yellowgreen" fill="blue"/>
<ellipse cx="78" cy="35" rx="14" ry="28" stroke-width="3" stroke="blue" fill="none"/>

  • cx:円の中心のx座標
  • cy:円の中心のy座標
  • rx:x軸方向の半径
  • ry:y軸方向の半径

line:直線の記述と属性

<line x1="10" y1="10" x2="90" y2="60" stroke-width="10" stroke="green"/>

  • x1:1個目のx座標
  • y1:1個目のy座標
  • x2:2個目のx座標
  • y2:2個目のy座標

polyline:折れ線の記述と属性

polyline要素のpoints属性に数値を指定する。

<polyline points="20,50 10,40 10,20 20,10 40,10 50,20 50,50 60,60 80,60 90,50 90,30 80,20 60,20 40,50" stroke-width="4" stroke="tomato" fill="khaki"/>

  • points:点のx座標とy座標を指定。スペースで区切る。

polygon:多角形の記述と属性

polygon要素のpoints属性に頂点の位置を指定する。

<polygon points="20,50 10,40 10,20 20,10 40,10 50,20 50,50 60,60 80,60 90,50 90,30 80,20 60,20 40,50" stroke-width="4" stroke="indianred" fill="mistyrose"/>

  • points:点のx座標とy座標を指定。スペースで区切る。

まとめ

基本形状の種類と書き方について書きました。基本形状の組み合わせで簡単な図形が作成できます。複雑な図形を作成するにはイラストレーターなどのソフトを使った方が良いです。