Controlling Geometry and Corner Radii with the SVG <rect> Element

The Core Logic of SVG Rectangles

The <rect> element is used to create axis-aligned rectangles and rounded rectangles within an SVG coordinate system. To render a visible shape, you must define a positive width and height; if either is zero or negative, the browser will not render the element.

The position is determined by x and y, which define the top-left corner of the shape. If these are omitted, they default to 0. While these attributes can accept absolute units or percentages (which resolve against the SVG viewport), the most predictable results occur when using absolute coordinate units.

Implementing Rounded Corners

Corner rounding is handled by rx (horizontal radius) and ry (vertical radius). If you only specify rx, the browser automatically sets ry to the same value, creating uniform circular corners. If both are specified, you can create elliptical corners.

A critical behavior of these attributes is clamping. If the radius is set to a value larger than half of the rectangle's width or height, the browser automatically caps the radius at exactly half of that dimension. This ensures the corners never overlap or invert.

Worked Configuration Example

The following example demonstrates a rounded rectangle with a specific fill, stroke, and radius. This code should be placed inside an <svg> container in an HTML file.

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- A blue rounded rectangle with a dark blue border -->
  <rect 
    x="10" 
    y="10" 
    width="200" 
    height="100" 
    rx="12" 
    fill="#4a90d9" 
    stroke="#2c5f8a" 
    stroke-width="2" 
  />
</svg>

Analysis of the Example

• Positioning: The x="10" y="10" offset prevents the stroke from being clipped by the top and left edges of the SVG viewport.
• Geometry: The shape is 200 units wide and 100 units tall.
• Rounding: rx="12" creates a subtle curve. Since ry is omitted, it also becomes 12.
• Styling: The fill attribute defines the interior color, while stroke and stroke-width define the outline.

Common Engineering Pitfalls

The Default Fill Trap

One of the most common mistakes is omitting the fill attribute when only a border is desired. By default, SVG elements have a fill of black. If you intend to create an empty outline, you must explicitly set fill="none".

Stroke Clipping

SVG strokes are drawn centered on the geometry edge. If you place a rectangle at x="0" y="0" with a stroke-width="4", 2 units of that stroke will fall outside the viewport and be clipped. To prevent this, always inset your x and y coordinates by half the stroke-width.

Percentage-Based Radius Scaling

Authors often expect rx="50%" to create a capsule shape based on the rectangle's own dimensions. However, percentage values for rx and ry are resolved against the SVG viewport (the overall canvas size), not the rectangle itself. For responsive rounding that scales with the object, use absolute values or calculate the radius via CSS/JavaScript based on the element's dimensions.

Verification and Limits

Scenario	Expected Result	Verification Method
width="0"	Invisible	Check browser inspector; element exists in DOM but has no visual footprint.
rx="150" on width="200"	Capped Radius	Visually confirm the radius is exactly 100 (half of width).
fill="none"	Transparent Interior	Place the rect over another element to confirm visibility through the center.

Limitations: The <rect> element is strictly for axis-aligned shapes. If you need a rotated rectangle, you must apply a transform="rotate(...)" attribute to the element, as the <rect> geometry itself cannot be skewed or tilted via its primary attributes.