SVG `<rect>`

SVG Shapes

SVG has some predefined shape elements that can be used and manipulated by developers:

The following sections will explain these elements, starting with the rectangle element.

The <rect> tag is used to create a rectangle and variations of a rectangle shape:

Here is the SVG code:

For Opera users: View SVG file (right-click on the SVG graphic to preview the source).

Code Analysis:

The width and height attributes of the rect element define the width and height of the rectangle.
The style attribute is used to define CSS properties.
The CSS fill property defines the fill color of the rectangle (rgb values, color names, or hexadecimal values).
The CSS stroke-width property defines the width of the rectangle's border.
The CSS stroke property defines the color of the rectangle's border.

Let's look at another example that includes some new attributes:

For Opera users: View SVG file (right-click on the SVG graphic to preview the source).

Code Analysis:

The x attribute defines the left position of the rectangle (e.g., x="0" defines the distance of the rectangle from the left side of the browser window as 0px).
The y attribute defines the top position of the rectangle (e.g., y="0" defines the distance of the rectangle from the top of the browser window as 0px).
The CSS fill-opacity property defines the opacity of the fill color (valid range: 0 - 1).
The CSS stroke-opacity property defines the opacity of the outline color (valid range: 0 - 1).

Defining the opacity of the entire element:

Here is the SVG code:

For Opera users: View SVG file (right-click on the SVG graphic to preview the source).

The CSS opacity property is used to define the transparency value of the element (range: 0 to 1).

The last example, creating a rounded rectangle:

Here is the SVG code:

For Opera users: View SVG file (right-click on the SVG graphic to preview the source).