SVG（Scalable Vector Graphics）を使用して<rect>（矩形）を設計するには、次のような基本的な構造を持つ<rect>要素を使用します。

xml
<svg width="width_value" height="height_value" xmlns="http://www.w3.org/2000/svg">
  <rect x="x_value" y="y_value" width="width_value" height="height_value" fill="color_value" />
</svg>

以下に、さまざまな例を用いて<rect>を設計する方法を説明します。

1. 基本的な矩形

xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>

この例では、幅が80、高さが80の青い矩形が座標(10, 10)から始まります。

2. 塗りつぶしとストローク

xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="yellow" stroke="black" stroke-width="2" />
</svg>

この例では、黄色で塗りつぶされた矩形が黒いストローク（境界線）と一緒に描かれています。

3. 角丸矩形

xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" rx="10" ry="10" fill="green" />
</svg>

rxおよびry属性を使用して、角丸矩形を作成します。この例では、角を半径10の円で丸めた緑色の矩形が描かれています。

これらは基本的な例であり、SVGの<rect>要素にはさまざまなプロパティがあります。これらの例を元に、異なるサイズ、色、形状の矩形を作成するために必要なプロパティを調整できます。