SVG

This page has been suggested for clean-up. Please Discuss.

Scaleable Vector Grapics. XML format for representing vector graphics.

XML & XSLT pages contain closely related matters

There are several ways to create an SVG map from OpenStreetMap

• Easiest method is to use the Export tab on the frontpage. Use options Format to export=Mapnik Image and Format=SVG.

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)

• Maperitive can produce high quality (and small-size) SVG rendering. It separates map features into SVG layers, takes care of not duplicating shapes and also renders text as normal letters (and not as graphic paths like Mapnik does). It can render SVG in two modes: Inkscape mode and Adobe Illustrator mode (since Illustrator requires certain modifications to be able to properly import SVGs). A sample SVGZ map of the center of Dublin: http://maperitive.net/samples/Dublin_center_AI.svgz (NOTE: you cannot open it in browser, use Inkscape or Illustrator instead). There's also a tutorial on how to generate SVGs in Maperitive: http://braincrunch.tumblr.com/post/9947074703/maperitive-tutorial-generating-osm-map-for-adobe
  

  

  Screenshot of Adobe Illustrator showing a Maperitive-generated SVG map.

• With Osmarender. See Osmarender/SVG
• cloudmade's vector map API - very pre-alpha at the moment. It gives you an unstyled SVG file with 'cm' namespace with the OSM tag data.

• Serices as: http://sharemap.org or http://flosm.de

Software for working with SVG files includes:

• Inkscape (http://www.inkscape.org/) 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
• Firefox is 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 favorite text-editor.

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:Image:Holborn-viaduct-map.svg

See also

• wikipedia:SVG wikipedia article about SVG
• Commons:SVG special project page for Wikipedia SVG upload