SVG contains the following set of predefined graphic objects:
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 April 1999//EN"
"http://www.w3.org/Graphics/SVG/svg-19990412.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 and rotation angle.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG April 1999//EN"
"http://www.w3.org/Graphics/SVG/svg-19990412.dtd">
<svg width="4in" height="3in">
<desc>This is an ellipse, axis aligned and centered on the origin
</desc>
<g>
<ellipse major="85" minor="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 April 1999//EN" "http://www.w3.org/Graphics/SVG/svg-19990412.dtd"> <svg width="4in" height="3in"> <desc>A sample polyline, and equivalent path </desc> <polyline verts="20,20 50,100 200,80 70,300"/> <path d="M20,20 L50,100 L200,80 L70,300"/> </svg>
(More detailed descriptions will come later.)