rect

A rectangle can be stroked and filled. It can have the following attributes:

Attribute Description
x The x-axis coordinate of the origin of the rectangle (top-left corner) in the current user coordinate system. If the attribute is not specified, the default is 0.
y The y-axis coordinate of the origin of the rectangle (top-left corner) in the current user coordinate system. If the attribute is not specified, the default is 0.
width The width of the rectangle in the current user coordinate system. Must be 0 or greater; if 0, the element will not be rendered.
height The height of the rectangle in the current user coordinate system. Must be 0 or greater; if 0, the element will not be rendered.
rx For rounded rectangles, the x-axis radius in the current user coordinate system used to round off the corners of the rectangle. Must be 0 or greater; 0 will produce a square corner.
ry For rounded rectangles, the y-axis radius in the current user coordinate system used to round off the corners of the rectangle. Must be 0 or greater; 0 will produce a square corner.
transform See Transformations. This attribute is applied to an element before any other coordinate or length values supplied for that element are processed.

Note  There are additional rules that are implicitly used to specify the value of rx and ry to ensure that rendering is geometrically valid. These rules are (in order of increasing precedence):

  1. If neither rx nor ry are properly specified, then both rx and ry are set to 0.

  2. If a valid value is provided for rx but not ry, then set ry to rx.

  3. If a valid value is provided for ry but not rx, then set rx to ry.

  4. If rx is greater than half of the width, then set rx to half of the width.

  5. If ry is greater than half of the height, then set ry to half of the height.

Example:

Copy 
<rect x="20" y="20" width="60" height="30" style="fill:red;stroke:blue;stroke-width:3" />