Make your own free website on
main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe- ayuda


Example for basic geometric elements

On the left the seven geometric basic elements. We have to state, that all of them can be substituted with the last, more powerful, path-object. With the above objects we can derive all graphical objects, such as map signatures.
  • Rectangle, with the possibility to round the corners.
  • Circle
  • Ellipse, per definition stretched horizontally or vertically but can be rotated.
  • Line, can only have two vertices. Stroke and color definitions with style-sheets.
  • Polyline, line with several vertices.
  • Polygon, always closed.
  • Path, the most powerful element, accepts a lot of different parameters: moveTo, lineTo, horizontalLineTo, verticalLineTo und closePath. Path-elements may contain cubic and quadratic splines, as well as elliptical curves. Closed paths may contain holes (donuts) or separated islands, see polygons.

Files used

Right-click, save ...

Technical Details

The above example demonstrates the changing of the line-type from normal to a spline within the same path element. Following are more detailed explanations of the above objects, with simplified SVG-code.


<rect class="red str" x="15" y="15" width="100" height="50" rx="12" ry="18" />
For the definition of a rectangle one needs four parameters. No further explanation needed. rx refers to the length of the horizontal part of an edge that should be rounded, ry for the vertical part. The class statement defines the style-sheets.


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


<ellipse cx="200" cy="135" rx="50" ry="20" />
One has to specify both radii for modelling the ellipse.


<line style="stroke-width:2" x1="15" y1="240" x2="30" y2="200" />
Four values for the two vertices. Stroke, width and color are defined with styles.


<polyline points="160,200 180,230 200,210 234,220" />
Accepts any number of coordinate pairs, an uneven number throws an exception.


<polygon points="350,75 379,161 569,111 397,215 423,301 350,250 277,301" />
Syntax and behaviour like 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 simulated either by using the polygon or path-object.


<path d="M150 280l19,10 -22,33 40,3c12,43 44,-83 83,20" />
The path element accepts like it colleagues coordinate pairs, but in between also commands like one might know from PostScript or EPS: Those commands are defined with one letter, whereas after those letters the predefined mode for continuing the path rules until the next command. Large (capital) letters refer to absolute coordinates, whereas small capped letters refer to relative ones. The following commands may be used:

See also W3C-SPEC for more detailed explanations on the geometric base elements.

Last modified: Wednesday, 02-Apr-2003 11:04:54 CEST
© carto:net (andreas neumann & andré m. winter)
original URL for reference: