A rectangle can be created with the <rect> tag. When doing so, the x and y coordinates of the upper left corners as well as the width and height must be specified. The area can be colored using the fill attribute.

You can also generate rectangles with rounded corners in the editor by also entering the x/y radius. If you specify only the x-radius rx, the y-radius is automatically set to the same value. The maximum number you can specify for the radius is half the corresponding side. If you only set the y-radius in the shape editor, nothing changes; the corners of the rectangle are not rounded. However, you can also set different rx and ry values.


x-coordinate of the upper left corner


y-coordinate of the upper left corner


Width of the rectangle


Height of the rectangle


Horizontal corner radius


Vertical corner radius

<rect width="200" height="100" rx="10" ry="5" fill="#00B6A8" />