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.

<circle cx=”100″ cy=”100″ r=”75″ fill=”#00ff00″ stroke=”none”/> <circle cx=”275″ cy=”100″ r=”75″ fill=”none” stroke=”#000000″ stroke-width=”10″/> <circle cx=”425″ cy=”100″ r=”50″ fill=”#ff00ff” fill-opacity=”0.2″ stroke=”#ff00ff” stroke-width=”2″/>

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

<ellipse cx=”100″ cy=”100″ rx=”75″ ry=”50″ fill=”#00ff00″ stroke=”none”/> <ellipse cx=”275″ cy=”100″ rx=”50″ ry=”75″ fill=”none” stroke=”#000000″ stroke-width=”10″/> <ellipse cx=”425″ cy=”100″ rx=”60″ ry=”20″ fill=”#ff00ff” fill-opacity=”0.2″ stroke=”#ff00ff” stroke-width=”2″/> <ellipse cx=”425″ cy=”100″ rx=”20″ ry=”60″ fill=”#ff00ff” fill-opacity=”0.2″ stroke=”#ff00ff” stroke-width=”2″/>

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

<rect x=”25″ y=”25″ width=”150″ height=”75″ fill=”#00ff00″ stroke=”none”/> <rect x=”200″ y=”25″ width=”75″ height=”150″ fill=”none” stroke=”#000000″ stroke-linejoin=”round” stroke-width=”10″/> <rect x=”300″ y=”25″ width=”175″ height=”150″ fill=”#ff00ff” fill-opacity=”0.2″ stroke=”#ff00ff” stroke-dasharray=”10 15″ stroke-width=”4″/>

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.

<rect x=”25″ y=”25″ width=”150″ height=”75″ rx=”10″ ry=”50″ fill=”#00ff00″ stroke=”none”/> <rect x=”200″ y=”25″ width=”75″ height=”150″ rx=”25″ ry=”25″ fill=”none” stroke=”#000000″ stroke-width=”10″/> <rect x=”300″ y=”25″ width=”175″ height=”150″ rx=”25″ ry=”10″ fill=”#ff00ff” fill-opacity=”0.2″ stroke=”#ff00ff” stroke-width=”4″/>

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

<polygon points=”25,175 75,25 125,175″ fill=”#00ff00″ stroke=”none”/> <polygon points=”125,25 175,175 225,25″ fill=”none” stroke=”#000000″ stroke-linejoin=”bevel” stroke-width=”10″/> <polygon points=”250,25 300,75 325,100 425,25 475,100 300,175 375,50″ fill=”#ff00ff” fill-opacity=”0.2″ stroke=”#ff00ff” stroke-width=”4″/>

Style attributes

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

AttributePurposeValueDefault
fillControl the colour of the area enclosed by the shape.none, colour name, or colour code.black
fill-opacityControl the opacity of the area enclosed by the shape.A decimal number between 0 and 1, with values toward 0 more transparent and values toward 1 more opaque.1
strokeControl the colour of the outline.none, colour name, or colour code.black
stroke-dasharrayControl the appearance of a dashed outline.One or more sets of two numbers, the first number in the set giving the length of the dash and the second number in the set giving the length of the space.
stroke-linejoinControl how the join between two sides is rendered.Several values are possible, including bevel (flat join), miter (pointed join), and round (rounded join).miter
stroke-opacityControl the opacity of the outline.A decimal number between 0 and 1, with values toward 0 more transparent and values toward 1 more opaque.1
stroke-widthControl the thickness of the outline.A number or a number plus unit of measurement (such as px or em).1