SVG Rectangle

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.

Example of the SVG `<rect>` element:

Example of the SVG <rect> element:

html

<!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>

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.

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

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

html

<!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>

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:

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

html

<!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>

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

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

html

<!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>

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.

Practice

What attributes can be specified for SVG rectangles in HTML?

'x' and 'y' to determine starting point'width' and 'height' to set the size'color' and 'background-color' to define appearance'rx' and 'ry' to make the corners round'src' and 'alt' for image referral and accessibility

SVG Rectangle ​

Description of the <rect> element ​

Example of the SVG <rect> element: ​

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

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

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

Practice ​

SVG Rectangle

Description of the `<rect>` element

Example of the SVG `<rect>` element:

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

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

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

Practice