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 cubic bezier 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 June 1999//EN" 
  "http://www.w3.org/Graphics/SVG/svg-19990625.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 June 1999//EN" 
  "http://www.w3.org/Graphics/SVG/svg-19990625.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 June 1999//EN" 
  "http://www.w3.org/Graphics/SVG/svg-19990625.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 on <polyline> and <polygon> is restricted to 1023 characters. Thus, these elements should only be used for graphics with a relatively small number of vertices. If you have geometry that has any possibility of exceeding the 1023 character limit, use the <path> element instead.