SVGマスターへの道

<rect> - 四角形を描こう

<rect> (rectangleの略) は、四角形や長方形を描くための要素です。主な属性は以下の通りです。

• x: 四角形の左上の角のX座標
• y: 四角形の左上の角のY座標
• width: 四角形の幅
• height: 四角形の高さ
• rx: 角の丸み（X方向の半径）
• ry: 角の丸み（Y方向の半径）。rxだけ指定するとryも同じ値に、両方指定すると楕円形の角丸になります。
• fill: 塗りつぶしの色
• stroke: 枠線の色
• stroke-width: 枠線の太さ

<svg width="100%" height="150" viewBox="0 0 350 150">
  <rect id="demoRect" x="10" y="10" width="100" height="80" rx="0" ry="0" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
</svg>

<circle> - 円を描こう

<circle> は、円を描くための要素です。

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

<svg width="100%" height="150" viewBox="0 0 350 150">
  <circle id="demoCircle" cx="50" cy="50" r="40" fill="#e74c3c" stroke="#c0392b" stroke-width="2"/>
</svg>

<ellipse> - 楕円を描こう

<ellipse> は、楕円を描くための要素です。

• cx: 楕円の中心のX座標
• cy: 楕円の中心のY座標
• rx: X方向の半径（横方向の半径）
• ry: Y方向の半径（縦方向の半径）

<svg width="100%" height="150" viewBox="0 0 350 150">
  <ellipse id="demoEllipse" cx="70" cy="60" rx="60" ry="30" fill="#f1c40f" stroke="#f39c12" stroke-width="2"/>
</svg>

<line> - 線を引こう

<line> は、直線を描くための要素です。線には「塗り」の概念はなく、「線」の色と太さを指定します。

• x1: 始点のX座標
• y1: 始点のY座標
• x2: 終点のX座標
• y2: 終点のY座標
• stroke: 線の色
• stroke-width: 線の太さ

<svg width="100%" height="150" viewBox="0 0 350 150">
  <line id="demoLine" x1="10" y1="10" x2="150" y2="100" stroke="#2ecc71" stroke-width="5"/>
</svg>

<polyline> - 折れ線を描こう

<polyline> は、複数の点をつないだ折れ線を描きます。線は自動的には閉じません。

• points: 点の座標のリストをスペースまたはカンマ区切りで指定します (例: "x1,y1 x2,y2 x3,y3 ..." または "x1 y1 x2 y2 ...")。
• fill: 通常、折れ線は塗りつぶさないので fill="none" を指定します。
• stroke: 線の色
• stroke-width: 線の太さ

<svg width="100%" height="150" viewBox="0 0 350 150">
  <polyline id="demoPolyline" points="10,10 50,80 100,30 150,100 200,50" fill="none" stroke="#9b59b6" stroke-width="3"/>
</svg>

<polygon> - 多角形を描こう

<polygon> は、複数の点をつないだ多角形を描きます。<polyline> と似ていますが、最後の点と最初の点を自動的につないで図形を閉じます。そのため、通常は塗りつぶし（fill）を使います。

• points: 点の座標のリスト (<polyline> と同じ形式)

<svg width="100%" height="150" viewBox="0 0 350 150">
  <polygon id="demoPolygon" points="50,10 100,10 120,50 80,80 30,50" fill="#1abc9c" stroke="#16a085" stroke-width="2"/>
</svg>

SVGとCanvasでの基本図形描画の比較

ここで、SVGとCanvasで同じような簡単な図形（例えば、赤い四角と青い円）を描くコードを比較してみましょう。

<svg width="200" height="150" style="border:1px solid #ccc;">
  <rect x="10" y="10" width="80" height="60" fill="red"/>
  <circle cx="140" cy="90" r="30" fill="blue"/>
</svg>

<canvas id="myCanvas" width="200" height="150" style="border:1px solid #ccc;"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 80, 60);

  ctx.fillStyle = 'blue';
  ctx.beginPath();
  ctx.arc(140, 90, 30, 0, 2 * Math.PI);
  ctx.fill();
</script>

どちらが良いということではなく、作りたいものや操作の仕方によって使い分けます。SVGは構造的で、CSSやDOM操作と相性が良いのに対し、Canvasはピクセル単位の自由な描画や大量のオブジェクトの高速描画に向いています。

ちょっとしたコツ: fill と stroke

多くの図形要素では、fill (塗りつぶし) と stroke (枠線) 属性で見た目を指定します。

• 属性を指定しない場合、デフォルトの色や太さが適用されることがあります（例: fill は黒、stroke はなし）。
• 塗りつぶしをなくしたい場合は fill="none" または fill="transparent" を指定します。
• 枠線をなくしたい場合は stroke="none" を指定するか、stroke-width="0" にします。

色やスタイルの指定方法については、後のページで詳しく解説しますね！

まとめ

このページでは、SVGで基本的な図形を描くための要素、<rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> を学びました。それぞれの属性をデモで動かして、どのように図形が変化するかを体験できたでしょうか。

これらの基本図形を組み合わせるだけでも、かなり複雑なイラストを作ることができます。しかし、もっと自由な曲線や形を描きたい場合もあるでしょう。そんな時に大活躍するのが、次回の主役「<path> (パス)」要素です！

次のページ「パスを極める - 自由自在な線と形」で、SVGの表現力をさらに引き出しましょう。