From OpenStreetMap Wiki
Jump to: navigation, search

SVG-Editor project

This project is about to create an OSM mapping editor using SVG as the base utility. It should be able to work directly on the OSM database (as Potlatch in edit mode). Hopefully it may one day give mappers the same features as the other editors do.

Current state

  • Paul Wagener did a proof of concept ( which showed it's possible to use SVG.
  • Project page has been set up (currently this page here).
  • Communication to the community about the project is done in development forum. Threads should start with subject "SVG-Editor:...".


Several tasks have to be done before a working solution will be reached. Each task is listed in its sub chapter.


A single SVG on a webpage is created, all OSM objects are drawn into this SVG. Ways are drawn as polylines, areas as polygons, names as texts and tags as classes of items. Any item type might be filtered in/out on any zoom level however a user likes, defaults are similar as on ordinary maps. Selection of objects are done according if visible on the choosen area, clipping of too large objects are done by the SVG.

Tags are added as classes of SVG items in the form "<key>-<value>", styling of items are based on these classes. Names are added as SVG text items just as they are written and position right next to the belonging polyline or within the polygone if possible. Even OSM symbols might be shown as SVG image items yet this might come later. Relations might be looked at as ordniary objects yet editing is restricted to adding/removing other objects.

Each OSM object gets its own SVG 'g' item, that means all polyline/polygon and text items of an object. Also if waypoints of an object has to be drawn (for editing) the are added within this 'g' item. Drawing of points of an object are postphoned until they are needed (selected object).


List of wished features:

  • ...


A webpage has to be set up ( The SVG-Editor window should background layers (similar as on Potlatch2). Other free usable mapping layers might be added later on.

Javascript library

The most important task to get a usable SVG-Editor is the Javascript library. It handles all the drawing and editing of SVG items. Retrieving the OSM objects of any data source and storing/exporting of the modified data is not part of the library, this has to be done separately.


There are 2 ways to participate, one is just sending remarks or responding with tips and tricks on the development forum (see communication). The other is to participate as a listed contributer responsible for certain tasks. For contributors please

  • Wyo (concept, webpage)
  • ...