SVG <rect> Draw Rectangle

The rect element is a basic shape in SVG used to create rectangles based on a corner position and its width and height. It can also be used to create rounded rectangles.

The SVG <rect> element represents a rectangle. With this element, you can draw rectangles with various widths, heights, different strokes (outlines), fill colors, sharp or rounded corners, and more.

Online example

An example of rect usage:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/></svg>

The position of the rectangle is determined by the x and y attributes. Remember, this position is relative to the position of any enclosed (parent) element.
The size of the rectangle is determined by the width and height attributes.
This style attribute allows you to set other style information, such as stroke and fill colors, stroke width, etc. This will be introduced in more detail in other texts.
This is the generated rectangle image:

Rounded Rectangle

round corners can be drawn on the rectangle. The rx and ry properties determine the corner rounding. The rx property determines the rounding width, while the ry property determines the rounding height. Here are three rectangles with rx and ry set to5,10and15. Note the different sizes in rounding.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="5"　ry="5"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="70"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="10"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="130"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="15"　ry="15"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
</svg>

The effect of the generated rounded rectangle is as follows:

In these examples, the rx and ry of each rectangle are set to the same value. If only the rx attribute is set, the ry attribute will obtain the same value as rx. This is a quick way to define uniform rounded corners.
This is two rounded rectangles with both rx attributes set to10but the ry attribute is set to5and15example. This will show you the appearance of rounded rectangles at different heights and widths.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="5"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="130"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="15"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
</svg>

Rectangle Stroke

You can use the SVG stroke style attribute to set the border (outline) style of the rectangle. In this example, the stroke color is set to dark green, and the border width is set to3:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　　　fill:　none;
　　　　　　"
　　　　　　/></svg>

The appearance effect of the element when rect is displayed in the browser is as follows:

You can also use the style attribute stroke-dasharray makes the rectangle border dashed. Here is an example:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　　　stroke-dasharray:　10　5;
　　　　　　　　　　　　　fill:　none;
　　　　　　　　　　　　"
　　　　　　　　/></svg>

The running effect of the above code is as follows::

Rectangle Fill

You can use the SVG fill style attribute to fill the rectangle. For example, you can choose not to fill the element by setting the style attribute fill to none.

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"　
　　　　　　　　　　　　style="stroke:　#009900;fill:　none;"　/></svg>

This is the appearance of the rect element when rendered in the browser without fill:

You can also choose to fill the rectangle with color. This example fills the rect element with bright green:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;fill:　#33ff33;"/>
</svg>

The following is the display effect of rect with fill after rendering in the browser:

You can also use the style attribute fill-Opacity makes the fill transparent. This example shows two rectangles, one rectangle partially on top of the other, and the top rectangle is semi-transparent:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　fill:　#33ff33;
　　　　　　　　"
　　　　　　　　/>
<rect　x="50"　y="50"　width="100"　height="100"
　　　　　　style="stroke:　#000099;
　　　　　　　　　fill:　#3333ff;
　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　"
　　　　　　　　/></svg>

This is the semi-transparent appearance of the element when the rect is rendered in the browser:

In this example, the stroke of the second rectangle is not transparent, but you can use the style attribute stroke-Opacity makes it transparent.