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

carto:papers:svg:examples:basic:shapes

Example for basic geometric elements

You can see the six basic geometry elements available in SVG and the <path/> element on the left. All of the six basic geometry shapes can be substituted with the last, more powerful, path-object. With these basic objects we can derive all graphical objects, such as map symbols.
  • 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.
  • Polyline, line with several vertices.
  • Polygon, like a polyline, but 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. Paths may contain holes or disjunct sub-paths, see polygons.

Files used

Right-click, save ...

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:

See also W3C-SPEC, Basic Shapes chapter and W3C-SPEC, Path chapter for more detailed explanations on the geometric base elements and the path element grammar.




Last modified: Friday, 10-Jun-2005 13:06:04 CEST
© carto:net (andré m. winter & andreas neumann)
original URL for reference: http://www.carto.net/svg/samples/shapes.shtml
del.icio.us Add this page to del.icio.us