W3docs
en
Log in

SVG Rectangle

On this page, you can find useful information about the SVG <rect> shape element, learn to create a rectangle with it and see different examples with CSS.

The SVG <rect> element draws a rectangle. It is one of the basic SVG shapes (alongside <circle>, <ellipse>, <line>, and <polygon>) and is placed directly inside an <svg> element. This page covers how to position and size a rectangle, how to round its corners, and how to control its fill and stroke using either presentation attributes or CSS.

If SVG is new to you, start with the SVG introduction. For a full list of attributes and elements, see the SVG reference.

Description of the <rect> element

The SVG <rect> element creates a rectangle, as well as rectangle shape variations. It is possible to draw rectangles of various heights and widths, with different stroke and fill colors, etc. We are going to try some examples.

The SVG coordinate system

A rectangle is positioned with the x and y attributes, which are measured from the top-left corner of the SVG canvas. The x-axis grows to the right and the y-axis grows downward (so a larger y moves the shape lower on the screen). These coordinates are expressed in user units, which by default map to pixels but can be remapped with the viewBox attribute. The core attributes of <rect> are:

  • x — the horizontal position of the rectangle's left edge. Defaults to 0 if omitted.
  • y — the vertical position of the rectangle's top edge. Defaults to 0 if omitted.
  • width — the width of the rectangle. Defaults to 0, which makes the rectangle invisible, so you almost always need to set it.
  • height — the height of the rectangle. Also defaults to 0 (invisible).
  • rx — the horizontal radius used to round the corners (optional).
  • ry — the vertical radius used to round the corners (optional).

Example of the SVG <rect> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="350" height="120">
      <rect width="250" height="110" style="fill:rgb(53, 153, 0);stroke-width:1;stroke:rgb(32, 33, 49)" />
    </svg>
  </body>
</html>
Try it Yourself »

Now let’s explain this code:

  • The width and height attributes specify the width and height of the rectangle.
  • The style attribute specifies some CSS properties for the rectangle.
  • The CSS fill property specifies the fill color of the rectangle.
  • The CSS stroke-width property is used to specify the width of the rectangle’s border.
  • The CSS stroke property specifies the color of the rectangle’s border.

Presentation attributes vs. CSS

The fill, stroke, and stroke-width styles above can also be written as presentation attributes directly on the element, instead of inside a style attribute. The two snippets below are equivalent:

<!-- Using a CSS style attribute -->
<rect width="250" height="110"
      style="fill:green;stroke:darkgray;stroke-width:5" />

<!-- Using presentation attributes -->
<rect width="250" height="110"
      fill="green" stroke="darkgray" stroke-width="5" />

Presentation attributes are convenient and readable, but they have the lowest priority: any matching CSS rule (in a stylesheet or a style attribute) overrides them. Use presentation attributes for simple, static shapes, and CSS when you want to reuse styles or change them on hover. To learn more about borders, see SVG stroking.

Example of the SVG <rect> element with the x and y attributes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="250">
      <rect x="80" y="50" width="180" height="180" style="fill:lightcoral;stroke:purple;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>
Try it Yourself »

Let’s explain the code above:

  • The x attribute specifies the left position of the rectangle.
  • The y attribute specifies the top position of the rectangle.
  • By default, if x and y are omitted, they are set to 0.
  • The CSS fill-opacity property specifies the opacity of the fill color.
  • The CSS stroke-opacity property specifies the opacity of the stroke color.

Example of the SVG <rect> element with the CSS opacity property:

<!DOCTYPE html>
<html>
  <body>
    <svg width="400" height="180">
      <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
      Sorry, inline SVG is not supported by your browser.  
    </svg>
  </body>
</html>
Try it Yourself »

Let’s explain the code above:

  • The CSS opacity property sets the transparency of the whole rectangle — both the fill and the stroke together — where 1 is fully opaque and 0 is fully transparent.
  • This differs from the previous example: fill-opacity and stroke-opacity make the fill and the border transparent independently, while opacity applies to the element as a single unit (so an overlapping stroke and fill blend with whatever is behind the shape, not with each other).

Example of the SVG <rect> element with the rx and ry attributes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="350" height="240">
      <rect x="70" y="50" rx="30" ry="30" width="170" height="170" style="fill:green;stroke:darkgray;stroke-width:5;opacity:0.7" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Try it Yourself »

Let’s explain the code above:

  • The rx attribute specifies the horizontal radius of the rectangle's rounded corners.
  • The ry attribute specifies the vertical radius of the rectangle's rounded corners.

The rx/ry copy rule (gotcha): if you set only one of these attributes, the browser uses the same value for the other. So rx="30" with no ry produces corners that are rounded by 30 in both directions — exactly as if you had written rx="30" ry="30". To get genuinely elliptical (asymmetric) corners, you must give rx and ry different values. If neither is set, the corners stay square. Each radius is also clamped to at most half of the rectangle's width (rx) or height (ry).

  • SVG introduction — the <svg> element, the coordinate system, and viewBox.
  • SVG stroking — control borders with stroke, stroke-width, and dashes.
  • SVG polygon — draw multi-sided shapes from a list of points.
  • SVG reference — every SVG element and attribute in one place.

Practice

Practice
If an SVG rectangle has rx='40' but no ry attribute set, how are its corners rounded?
If an SVG rectangle has rx='40' but no ry attribute set, how are its corners rounded?
Was this page helpful?