rectタグ -svgの中で長方形（矩形）を描画する｜HTML辞典
<rect>タグとは？
<rect> タグは、SVG（Scalable Vector Graphics）の中で長方形（矩形）を描画するためのタグです。<svg> 内で使用し、x、y、width、height などの属性を指定することで位置やサイズを設定できます。
基本情報
コンテンツモデル
SVG コンテンツ（SVG Content）。
閉じタグの有無
<rect> は 自己終了タグ（<rect />）として使用可能 ですが、明示的に <rect></rect> の形式で記述することもできます。
基本的な記述方法
<svg width="200" height="100">
<rect x="10" y="10" width="180" height="80" fill="blue" />
</svg>
✅ 青色の長方形が、左上の座標（10,10）に配置され、幅180、高さ80のサイズで描画されます。
使用できる主な属性
| 属性名 | 説明 | 例 |
|---|---|---|
x | 長方形の左上の X 座標 | <rect x="10"> |
y | 長方形の左上の Y 座標 | <rect y="10"> |
width | 長方形の幅 | <rect width="100"> |
height | 長方形の高さ | <rect height="50"> |
rx | 角の丸み（水平半径） | <rect rx="10"> |
ry | 角の丸み（垂直半径） | <rect ry="10"> |
fill | 塗りつぶしの色 | <rect fill="red"> |
stroke | 枠線の色 | <rect stroke="black"> |
stroke-width | 枠線の太さ | <rect stroke-width="2"> |
角丸の長方形を作成する
<svg width="200" height="100">
<rect x="20" y="20" width="160" height="60" rx="15" ry="15" fill="green" />
</svg>
✅ 四隅が丸い長方形が描画されます。
CSSを使ったデザイン変更
SVG の要素には CSS を適用できます。
rect {
fill: orange;
stroke: black;
stroke-width: 3;
}
✅ このスタイルを適用すると、すべての <rect> 要素がオレンジ色になり、黒い枠線が追加されます。
適切な使用例
✅ width と height を指定して長方形を描画する
<svg width="200" height="100">
<rect x="10" y="10" width="180" height="80" fill="blue" />
</svg>
✅ stroke を指定して枠線付きの長方形を作成する
<svg width="200" height="100">
<rect x="20" y="20" width="160" height="60" fill="none" stroke="red" stroke-width="3" />
</svg>
✅ rx / ry を使って角丸の長方形を描画する
<svg width="200" height="100">
<rect x="20" y="20" width="160" height="60" rx="20" ry="20" fill="purple" />
</svg>
適切でない使用例（誤った使い方）
❌ width や height を指定しない（描画されない）
<!-- NG: 幅と高さを指定しない -->
<svg width="200" height="100">
<rect x="10" y="10" fill="blue" />
</svg>
✅ 正しい書き方（width と height を指定）
<svg width="200" height="100">
<rect x="10" y="10" width="100" height="50" fill="blue" />
</svg>
❌ <rect> を <svg> の外に記述する
<!-- NG: <svg> の外に <rect> を記述 -->
<rect x="10" y="10" width="100" height="50" fill="red" />
<svg width="200" height="100"></svg>
✅ 正しい書き方（<svg> 内に記述）
<svg width="200" height="100">
<rect x="10" y="10" width="100" height="50" fill="red" />
</svg>
<rect>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<rect> | 長方形を描画 | x、y、width、height を指定 | 四角形のオブジェクト |
<circle> | 円を描画 | cx、cy、r を指定 | 丸いボタンや装飾 |
<ellipse> | 楕円を描画 | cx、cy、rx、ry を指定 | 横長・縦長の楕円形 |
<line> | 直線を描画 | x1、y1、x2、y2 を指定 | グラフや境界線 |
<polygon> | 多角形を描画 | points 属性で座標を指定 | 星形や三角形 |
使用上の注意点
✅ <rect> は <svg> 内で使用する
- HTML の通常の構造では描画できないため、必ず
<svg>の中に記述する。
✅ width と height を適切に指定する
- 指定しないと描画されないため、必ず明示する。
✅ fill や stroke を活用してデザインを整える
- 色や枠線を適用して、視認性を向上させる。
関連タグ
<svg>– SVG コンテンツを定義<circle>– 円を描画<ellipse>– 楕円を描画<line>– 直線を描画<polygon>– 多角形を描画<path>– 任意の図形を描画
まとめ
<rect> タグは、SVG 内で 長方形（矩形）を描画するためのタグ です。
適切に使用することで、シンプルな四角形から装飾的な図形まで、さまざまなデザインが可能になります。
