SVG

From OpenStreetMap Wiki
Jump to: navigation, search
Screenshot of Adobe Illustrator showing a Maperitive-generated SVG map.

Scaleable Vector Grapics. XML format for representing vector graphics.

XML & XSLT pages contain closely related matters.

Ways to create an SVG map from OpenStreetMap

There are several ways to create an SVG map from OpenStreetMap:

  • You can download an SVG file directly from openstreetmap.org by clicking the 'Share' icon at the right hand side of the webpage. The right sidebar opens with various options. Pick 'SVG' for the format. Position the map where you want it, or tick 'set custom dimensions' for better control of that.
Often this will give an error "The load average on the server is too high at the moment". This probably means you need to try again at a quieter time, but it also means you may be asking for a complex area of the map (pick one of the following better approaches)
This is Mapnik rendering to a cairo surface (cairographics.org) The result is often rather bloated over-complicated SVG file. Maps are quite complicated, but Mapnik tends to create lots of little objects where one big object could have been used. This is particularly true of text on the roads, where each letter is a separate text element (twice)

Software for working with SVG files

Software for working with SVG files includes:

  • Inkscape is an open source vector graphics package which uses SVG as its native format. It seems to cope well with SVG from the export tab.
  • Adobe Illustrator ... see also Exporting to Adobe Illustrator
  • All modern Internet Browsers (Internet Explorer since Version 9) are also capable of viewing svg-files. Just open it to view, and rightclick to see the svg-source. You might want to try and edit the svg-file using your favourite text-editor.

Use in Wikipedia

Wikipedia allows direct upload of SVG files. This is the preferred approach on Wikipedia for images which are essentially vector based. It's also good to be able to perform vector based tidying up tweaks in inkscape prior to uploading. There are some small problems with Wikipedia's SVG renderer (one-way arrows) More information at wikipedia:Wikipedia:WikiProject OpenStreetMap#'Export' Tab. Example SVG image on Wikipedia: wikipedia:File:Holborn-viaduct-map.svg

See also