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

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

The following chapter will explain each element, starting with the rect element.

The <rect> tag is used to create a rectangle and variety of a rectangle shape.

To understand how this works, copy the following code into Notepad and save the file as "rect.svg". Place the following file in your Web directory:

• The width and height attributes of the rect element define the width and the height of the rectangle

• The style attribute defines CSS properties

• The CSS fill property define the fill color of the rectangle (either an rgb value, a color name, or a hexadecimal value)

• The CSS stroke-width property define the width of the border of the rectangle

• The CSS stroke property define the color of the border of the rectangle

• The x attribute defines the left position of rectangle (e.g. x="0" places the rectangle 0 pixels from the left of the browser )

• The y attribute defines the top position of rectangle (e.g. y="0" places the rectangle 0 pixels from the top of the browser )

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

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

Last example will create a rectangle with rounded corners: