A button with rounded corners, the colored background of a card, the frame around a badge: the vast majority of interfaces drawn in SVG start with a plain rectangle. The <rect> element is the fastest shape to write in the whole SVG language, four attributes are enough to get a result.
It is also usually the first element people learn, because its logic of position and size shows up again in almost every other shape in the SVG language.
Definition
The <rect> element draws a rectangle defined by the position of its top-left corner (x, y) and its size (width, height). Two optional attributes, rx and ry, round the horizontal and vertical corner radius respectively: setting only rx makes the browser apply the same value to ry automatically, which is enough in almost every case to get symmetrical rounded corners.
Main attributes
| Attribute | Role |
|---|---|
x, y | Position of the top-left corner |
width, height | Width and height of the rectangle |
rx, ry | Corner rounding radius (horizontal and vertical) |
fill, stroke | Fill color and outline color |
If x and y are omitted, they default to 0, so the rectangle starts at the top-left corner of the SVG coordinate system. Omitting width or height, on the other hand, simply keeps the rectangle from rendering at all: in practice both attributes should be treated as required, even though the specification does not formally enforce it.
Concrete rendering example
A classic notification badge, made of a rectangle with well-rounded corners and an outline:
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="160" height="60" rx="16" fill="#2a9d8f" stroke="#1b6f65" stroke-width="3" />
<text x="100" y="56" text-anchor="middle" font-size="20" fill="#ffffff">Done</text>
</svg>Here rx="16" rounds all four corners of the badge without needing to specify ry, and the <text> sits centered on top thanks to text-anchor="middle".
Difference from a close element
Compared to a <path>, <rect> loses flexibility but gains a lot of readability: writing <rect width="100" height="60" /> is far clearer than rebuilding the same rectangle with four L commands inside a d attribute. The rule is simple, whenever a shape is a real rectangle, even with rounded corners, <rect> is the right choice; as soon as the shape departs from a rectangle (a slanted side, an asymmetrically cut corner), it is time to switch to a more free-form outline.
Common pitfall
rx larger than half of width or height is not an error: the browser automatically clamps it to that half. That is what lets you get a perfectly rounded pill shape by setting rx to exactly half the width of a thin rectangle, a handy shortcut for drawing buttons or tags without reaching for an ellipse.Real-world use case
Map backgrounds, section backgrounds, progress bars and skeleton loaders almost always rely on <rect> elements. A <rect> can also act as a crop mask when placed inside a <clipPath>, to show only a rectangular portion of an image or a more complex drawing. In interface components, a rectangle also works as an invisible clickable area: a <rect> with a transparent fill (fill="transparent") can extend an icon's tap target without changing how it looks, a common trick for making a button easier to hit on mobile.
FAQ
<rect> draw a square?Yes, a square is just a rectangle whose width and height are equal, there is no dedicated square tag in SVG, <rect> covers every case.
width or height is 0?The rectangle simply is not rendered on screen, with no error, which can be useful to temporarily hide a shape through an animation that varies that value. This lack of error is deliberately used in skeleton loaders, where several rectangles appear and disappear in a loop to simulate content that is still loading.
No, <rect> applies the same rx/ry pair to all four corners at once, for different radii on each corner the shape has to be redrawn with custom path commands.