SVG Basic Shapes

2008 Dec 22

Basic Shapes

circle ellipse line polygon polyline rect

The parameters of basic shapes are specified as attributes. The optional style attribute controls what the shape looks like. The syle has multiple possible property: value; pairs. An example style attribute looks like the following:

   style="stroke: #369; stroke-width: 5;"

Circle

The minimum attributes for a circ are the center coordinates and radius, e.g.:

   <circ cx="24" cy="37" r="9"/>

The optional style attribute controls what the circ looks like. These properties include:
fill fill-opacity stroke stroke-dasharray stroke-opacity stroke-width .

Ellipse

The minimum attributes for an ellipse are the center coordinates and the x and y radius, e.g.:

   <ellipse cx="24" cy="37" rx="9" ry="12"/>

The optional style attribute controls what the ellipse looks like. These properties include:
fill fill-opacity stroke stroke-dasharray stroke-opacity stroke-width .

Line

The minimum attributes for a line are the start and end points, e.g.:

   <line x1="24" y1="37" x2="49" y2="77"/>

The optional style attribute controls what the line looks like. These properties include:
stroke stroke-dasharray stroke-linecap stroke-opacity stroke-width .

Polygon

A polygon is a closed shaped defined by a list of three or more points, whose values are space or comma separated (or a combination). There must be an even number of numbers. Example:

   <polygon points="12 7, 29 9, 16 16"/>

The optional style attribute controls what the ellipse looks like. These properties include:
fill fill-rule fill-opacity stroke stroke-dasharray stroke-opacity stroke-width .

For polygons whose lines cross over each other there is an additional style parameter fill-rule.

Polyline

A polyline is an open sequence of connect line points, whose values are space or comma separated (or a combination). There must be an even number of numbers. Examples:

   <polyline points="12 7, 29 9, 16 16" style="fill: none;"/>

The optional style attribute controls what the polyline looks like. These properties include:
fill fill-rule stroke stroke-dasharray stroke-linecap stroke-linejoin stroke-opacity stroke-width .

SVG attempts to fill a polyline (unless fill is none) by drawing an implcit line from the start and end points.

Rect(angle)

The minimum attributes for a rect are the coordinates of the top left corner and the width and height, e.g.:

   <rect x="24" y="37" width="49" height="77"/>

The default values for x and y are 0. A width or height value of 0 means the rect is not shown. Negative values for width or height are an error.

The optional style attribute controls what the rect looks like. These properties include:
fill fill-opacity stroke stroke-dasharray stroke-opacity stroke-width .

A rect can have rounded corners by using the x and y radius attributes: rx and ry, e.g.:

   <rect x="24" y="37" width="49" height="77" rx="3" ry="5" style="fill: none;"/>