SVG Basic

SVG Shapes

SVG Filters

SVG Gradients

SVG Examples

SVG Reference

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:

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

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

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

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:

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

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:

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

Code explanation:

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