HTML SVG

SVG (Scalable Vector Graphics) is a markup language for describing two-dimensional graphics applications and images. A in SVG is a basic shape element that is used to create a rectangle, which is typically used for setting boundaries and framing elements in a document.

Basic syntax

<svg width="300" height="200">
  <rect x="50" y="50" width="200" height="100" />
</svg>

This code will create a rectangle with the following attributes:

• x: the x-coordinate of the top-left corner of the rectangle
• y: the y-coordinate of the top-left corner of the rectangle
• width: the width of the rectangle
• height: the height of the rectangle

Styling the

The following CSS properties can be used to style a :

• fill: the color to fill the shape
• stroke: the color of the shape's border
• stroke-width: the width of the shape's border

<svg width="300" height="200">
  <rect x="50" y="50" width="200" height="100" fill="#f9c74f" stroke="#f94144" stroke-width="4" />
</svg>

Rounded corners

The element also allows for rounded corners with the rx and ry attributes.

<svg width="300" height="200">
  <rect x="50" y="50" width="200" height="100" rx="20" ry="20" />
</svg>

Conclusion

is a basic shape in SVG that is commonly used for creating rectangles with precise dimensions and styles. Its attributes allow for a range of customization, making it a versatile element for creating unique graphical content.