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>

Example 1

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

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

Example 2

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

Here is the SVG code:

Code explanation:

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


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


• 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)

Example 3

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)

Example 4

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