SVG <rect>

SVG Shapes

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

• Rectangle <rect>
• Circle <circle>
• Ellipse <ellipse>
• Line <line>
• Polyline <polyline>
• Polygon <polygon>
• Path <path>

The following chapters will explain each element, starting with the <rect> element.

SVG Rectangle - <rect>

The <rect> element is used to create a rectangle and variations of a rectangle shape.

The <rect> element has six basic attributes to position and shape the rectangle:

An SVG Rectangle

This example creates a rectangle with the six basic attributes and a fill color:

Here is the SVG code:

Code explanation:

• The width and height attributes of the <rect> element define the height and the width of the rectangle
• The x and y attributes defines the x- and y-position of the top-left corner of the rectangle (x="10" places the rectangle 10px from the left margin and y="10" places the rectangle 10px from the top margin) in the SVG canvas
• The rx and ry attributes defines the radius of the corners of the rectangle
• The fill attribute defines the fill color of the rectangle

A Rectangle With Border

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

Here is the SVG code:

Code explanation:

• The style attribute is used to define CSS properties for the rectangle
• The CSS fill property defines the fill color of the rectangle
• The CSS stroke-width property defines the width of the border of the rectangle
• The CSS stroke property defines the color of the border of the rectangle

A Rectangle With Opacity

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

Here is the SVG code:

Code explanation:

• The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
• The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)

Another Rectangle With Opacity

Define the opacity for the whole element:

Here is the SVG code:

Code explanation:

• The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)

A Rectangle With Rounded Corners

Last example, create a rectangle with rounded corners:

Here is the SVG code:

Code explanation:

• The rx and the ry attributes rounds the corners of the rectangle