Files used

Right-click, save ...

• shapes.shtml
• shapes.svg

Technical Details

Rectangle

<rect fill="red" stroke="black" x="15" y="15" width="100" height="50"/>
For the definition of a rectangle one needs four parameters. No further explanation needed. rx and ry define rounded corners. rx refers to the x-axis radius of the ellipse used to round off the corner, ry the y-axis radius. The fill and stroke attributes indicate fill and stroke, the default stroke-width is one units.

Circle

<circle fill="yellow" stroke="black" cx="62" cy="135" r="20"/>
No further explanation needed.

Ellipse

<ellipse fill="green" stroke="black" cx="200" cy="135" rx="50" ry="20"/>
One has to specify two radii for describing the ellipse.

Linie

<line x1="15" y1="240" x2="30" y2="200" stroke-width="2"/>
Four values for the two vertices. In this example, several lines with different stroke-widths are displayed.

Polyline

<polyline fill="none" stroke="red" stroke-width="2" points="160,200 180,230 200,210 234,220"/>
The points attribute stores the coordinates and accepts any number of coordinate pairs. An uneven number should throw an exception.

Polygon

<polygon fill="yellow" stroke="black" stroke-width="1" points="49,272 57,297 114,282 63,314 71,339 49,324 27,339 35,314 13,297 40,297"/>
Syntax and behaviour like in the polyline, except the automatic closing of the polygon. Predefined polygons and stars as one might know from graphics design software are not part of the SVG-specification, those must be described either by using the polygon or path-object. Polygons that should be re-used can be stored in a <symbol /> element and re-used (instantiated) by the <use /> element (see symbol example).

Path

<path stroke="black" fill="none" stroke-width="3" d="M150 280l19,10 -22,33 40,3c12,43 44,-83 83,20"/>
The path element accepts like the <polyline /> or <polygon /> element coordinate pairs, but in between also commands like one might know from PostScript or EPS. The geometry is stored in the d attribute. Commands are defined with one letter. The commands need not be repeated if the same segment types are used subsequently (e.g. if a path starts with a M command and subsequent l commands, the l command needs only be defined once until another segment type appears, the commands may be repeated though, in order to make the geometry more "readable"). Large (capital) letters refer to absolute coordinates, whereas small case letters refer to relative ones. The following commands may be used:

• moveTo (m,M) + x,y
• lineTo (l,L) + x,y
• horizontalLineTo (h,H) + x
• verticalLineTo (v,V) + y
• closePath (z,Z), closes the sub-path by repeating the first coordinate pair as defined by the M or m command. The path may be continued with another M or m command and start another sub-path. See fill rules on polygon and path elements on fill-rules and holes.
• cubic splines (c,C; s,S), accept according to the spline-type six or four parameters.
• quadratic splines (q,Q; t,T) accept according to the spline-type four or two parameters.
• elliptical curves (a,A), draws an elliptical arc curve, takes (including the rotation) seven parameters.