# 11 Basic Shapes

## 11.1 Introduction

SVG contains the following set of basic shapes:

• <rect/> (a rectangle with optional rounding attributes rx and ry which represents the radii of an ellipse [axis-aligned with the rectangle] to use to round off the corners of the rectangle);
• <circle/>
• <ellipse/>
• <polyline/>
• <polygon/>
• <line/>

Mathematically, these shape elements are equivalent to the path objects that would construct the same shape. They may be stroked, filled and used as clip paths, and all the properties described above for paths apply equally to them.

## 11.2 The <rect> element

 ``` ```

Attribute definitions:

x = "x-coordinate"
The x-coordinate of one corner of the rectangular. The default x-coordinate is zero. See Coordinate Systems, Transformations and Units.
y = "y-coordinate"
The x-coordinate of one corner of the rectangular. The default y-coordinate is zero. See Coordinate Systems, Transformations and Units.
width = "width"
The width of the rectangle. See Coordinate Systems, Transformations and Units.
height = "height"
The width of the rectangle. See Coordinate Systems, Transformations and Units.
rx = "length"
For rounded rectangles, the x-axis radius of the ellipse used to round off the corners of the rectangle.
ry = "length"
For rounded rectangles, the y-axis radius of the ellipse used to round off the corners of the rectangle.

If a value is not provided for rx but a value is provided for ry, then rx is set to the same value as ry. If a value is not provided for ry but a value is provided for rx, then ry is set to the same value as rx. If values are not provided for rx or ry, no rounding occurs.

Attributes defined elsewhere:

## 11.3 The <circle> element

 ``` ```

Attribute definitions:

cx = "x-coordinate"
The x-coordinate of the center of the circle.
cy = "y-coordinate"
The y-coordinate of the center of the circle.
r = "length"
The radius of the circle.

Attributes defined elsewhere:

## 11.4 The <ellipse> element

 ``` ```

Attribute definitions:

cx = "x-coordinate"
The x-coordinate of the center of the ellipse.
cy = "y-coordinate"
The y-coordinate of the center of the ellipse.
rx = "length"
The x-axis radius of the ellipse.
ry = "length"
The y-axis radius of the ellipse.

Attributes defined elsewhere:

## 11.5 The <line> element

 ``` ```

Attribute definitions:

x1 = "x-coordinate"
The x-coordinate of the start of the line.
y = "y-coordinate"
The x-coordinate of the start of the line.
x2 = "x-coordinate"
The x-coordinate of the end of the line.
y2 = "x-coordinate"
The y-coordinate of the end of the line.

Attributes defined elsewhere:

## 11.6 The <polyline> element

 ``` ```

Attribute definitions:

points = "x-y-coordinate-pairs"
The points that make up the polyline. Space- or comma-separated.(??? Need to provide a BNF)

Attributes defined elsewhere:

## 11.7 The <polygon> element

 ``` ```

Attribute definitions:

points = "x-y-coordinate-pairs"
The points that make up the polygon. Space- or comma-separated.(??? Need to provide a BNF)

Attributes defined elsewhere:

For example, the following will draw a blue circle with a red outline:

```<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN"
"http://www.w3.org/Graphics/SVG/svg-19990730.dtd">
<svg width="4in" height="3in">
<desc>This is a blue circle with a red outline
</desc>
<g>
<circle style="fill: blue; stroke: red"
cx="200" cy="200" r="100"/>
</g>
</svg>
```

Download this example

This ellipse uses default values for the center.

```<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN"
"http://www.w3.org/Graphics/SVG/svg-19990730.dtd">
<svg width="4in" height="3in">
<desc>This is an ellipse, axis aligned and centered on the origin
</desc>
<g>
<ellipse rx="85" ry="45"/>
</g>
</svg>
```

Download this example

Here is a polyline; for comparison, the equivalent path element is also given.

```<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN"
"http://www.w3.org/Graphics/SVG/svg-19990730.dtd">
<svg width="4in" height="3in">
<desc>A sample polyline, and equivalent path
</desc>
<polyline points="20,20 50,100 200,80 70,300"/>
<path d="M20,20 L50,100 L200,80 L70,300"/>
</svg>
```

Download this example

A polygon is exactly the same as a polyline, except that the figure is automatically closed.

The points attribute for polylines and polygons (i.e., the list of vertices) can contain newline characters and thus can be broken up into multiple lines to improve readability. Because of line length limitations with certain related tools, it is recommended that SVG generators split long path data strings across multiple lines, with each line not exceeding 255 characters. Also note that newline characters are only allowed at certain places within a points value.