# 12 Other Vector Graphic Shapes

## 12.1 Introduction

SVG contains the following set of predefined graphic objects:

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

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

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

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