Vachmi

The <rect> element is a basic SVG shape to draw rectangles of various widths, heights, colours and at desired location.

Here is the SVG code to draw this rectangle.

<svg width="200" height="150">
  <rect x="20" y="20" width="150" height="100" style="fill:rgb(100,100,255);" />
</svg>

Code Explanation

• The position of the rectangle is determined by x and y attributes. These represent the top left corner of the rectangle.

• This position of rectangle is relative to the position of its parent element.

• The x attribute defines the left position of the rectangle. e.g. x="20" places the rectangle 20px from the left margin.

• The y attribute defines the top position of the rectangle. e.g. y="20" places the rectangle 20px from the top margin.

• The CSS fill property defines the fill color of the rectangle

Attributes

x - The x coordinate of the rectangle
It can accept a length or a percentage as its value. Default Value: 0


y - The y coordinate of the rectangle
It can accept a length or a percentage as its value. Default Value: 0


width - The width of the rectangle
It can accept a length or a percentage as its value.


height - The height of the rectangle
It can accept a length or a percentage as its value.


rx - The horizontal corner radius of the rectangle
It is used to round the corner of a rectangle. Defaults to ry if it is specified.


ry - The vertical corner radius of the rectangle
It is used to round the corner of a rectangle. Defaults to rx if it is specified.


Example showing rx and ry usage

<svg width="150" height="100">
  <rect x="20" y="20" width="120" height="60" rx="20" ry="20" style="fill:none; stroke:black" />
</svg>