There are several elements which can be used to construct shapes such as circles, ellipses, rectangles and polygons. They use a similar set of style attributes which are discussed at the end of the page.

## <circle>

A circle is defined by the centre point and the radius (distance from the centre to the circumference).

`<circle cx="x" cy="y" r="radius" [style attributes] />`

### Examples

Consider the following three circles. The green circle has a radius of 75, as does the adjacent circle. However, the green circle has no outline (stroke) whereas the second circle has a thick outline. This makes the second circle a little larger than the stated radius. The third, smaller circle has both a fill colour (which is semi-transparent) and a thin outline.

## <ellipse>

An ellipse is defined by the centre point and by two radii, one in the x-direction and one in the y-direction. If the two radii are the same, then you get a circle.

`<ellipse cx="x" cy="y" rx="radiusx" ry="radiusy" [style attributes] />`

### Examples

The green ellipse is longer in the x-direction than the y-direction whereas the second ellipse is just the opposite. Like the previous circle example, the green ellipse has no outline whereas the second ellipse has no fill and a thick outline. The last figure is two semi-transparent ellipses superimposed on one another.

## <rect>

A rectangle is defined by the coordinates of its upper left corner, its width and its height. If the height and the width are the same, then you get a square.

`<rect x="x" y="y" width="w" height="h" [style attributes] />`

It is also possible to define rectangles with rounded corners.

`<rect x="x" y="y" width="w" height="h" rx="radiusx" ry="radiusy" [style attributes] />`

The two attributes rx and ry determine how round the corners are in the x- and y-directions. They take any non-negative value and how the actual curvature is determined is complex. The default value is 0 which results in square corners.

### Examples

The green rectangle has no outline. The second rectangle has no fill but a very wide outline with round joins. The third rectangle has a semi-transparent fill and a dashed outline. If you examine the dashed outline closely, you will see that it extends partially into and partially beyond the filled rectangle. The stroke adds to the size of the shape, no matter what that shape is.

Now look at some examples with rounded corners. The green rectangle has rx < ry, the adjacent rectangle has rx = ry, and the third rectangle has rx > ry.

## <polygon>

A polygon is a closed figure with at least three sides. It is defined by the coordinates of its vertices (corners).

`<polygon points="x1,y1 x2,y2 ... xn,yn" [style attributes] />`

### Examples

Polygons may be simple shapes like triangles or complex shapes that cross over themselves.

## Style attributes

This is not an exhaustive list but it does include some of the more commonly used style attributes.