SVG 'rect' element

The SVG <rect> element defines a rectangle. The <rect> element has the following attributes:

  • x and y attributes are respectively x- and y-axis coordinates of the top-left corner of the rectangle If the attributes are not specified, the value is '0'.
  • width and height attributes define the size for the rectangle. These attributes can not be negative - it is an error. If you set a value of zero it will disables rendering of the rectangle.
  • rx and ry attributes are respectively x- and y-axis radius of the ellipse used to round off the corners of the rectangle. If the value is set only for one of these attributes, the other attribute is counted as equal to the specified value. If neither rx nor ry is specified the rectangle will not be rounded.

Here is a simple example of the rectangle:

<rect x="10" y="10" width="150" height="50" fill="#9d1d20" stroke="grey" stroke-width="2"/>

and the resulting image is:

Rectangles with rounded corners

Here are examples of roundede rectangles. Draw your attention to the different rounding sizes.

<rect x="10" y="10" width="100" height="50" rx="25" ry="25" fill="#9d1d20" stroke="grey" stroke-width="2"/>

<rect x="10" y="10" width="100" height="50" rx="10" ry="25" fill="#9d1d20" stroke="grey" stroke-width="2"/>