In SVG (Scalable Vector Graphics), a rectangle is created using the <rect> element. The <rect> element allows you to define the position and dimensions of a rectangle. Here's a basic example of a simple rectangle in SVG:

xml
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="50" fill="blue" />
</svg>

Let's break down the attributes used in this example:

• width: Specifies the width of the rectangle.
• height: Specifies the height of the rectangle.
• fill: Specifies the fill color of the rectangle.

You can customize these attributes to create different rectangles. Here are a few examples:

Example 1: Basic Rectangle

xml
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="50" fill="blue" />
</svg>

Example 2: Rounded Rectangle

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

In this example, rx and ry attributes are used to create rounded corners. Adjust the values of rx and ry to control the corner radius.

Example 3: Stroked Rectangle

xml
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="50" fill="none" stroke="red" stroke-width="2" />
</svg>

Here, the stroke attribute defines the stroke (border) color, and stroke-width sets the width of the stroke. The fill="none" attribute ensures that the rectangle is not filled.

Example 4: Positioned Rectangle

xml
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="20" width="100" height="50" fill="purple" />
</svg>

In this example, x and y attributes are used to set the position of the rectangle within the SVG canvas.

Feel free to customize these examples further or combine attributes to create more complex shapes and styles.