Etsy features numerous vendors selling map inspired pieces including wall hangings, greeting cards, screen prints and pillow cases. For artists that would like to use geographic or spatial data such as streets or neighborhoods as part of their artwork, they could trace this data by hand from Google maps or an atlas, but there’s a much easier way: converting spatial data to SVG format so it can be used in Illustrator, GIMP or other vector image processing tool.  This guide presents the steps to convert a GIS shapefile of streets or roads into an SVG file that can be viewed and manipulated in Adobe Illustrator or similar program.  We’ll use a file containing the streets of Philadelphia as the source data but these steps could also be applied to boundary files such as neighborhoods or states.

What is a Shapefile?

Before we discuss the conversion, it’s important to understand the source data. A shapefile is the most common data format in which you will find geographic or spatial data such as streets.  Shapefiles are a vector data format for storing geographic data including the data’s location, shape and attributes of the geographic features. It is stored as a set of related files which are displayed and manipulated as a single spatial layer in a desktop or web GIS program. Each file has a different function including defining the geographic features, the supporting attribute data, the metadata and the projection and coordinate information.

When you look at one shapefile in windows explorer it looks like this:

Download OpenStreetMap Shapefile Data

First, we need to get our hands on a shapefile.  For this example, we’ll use a shapefile of OpenStreetMap data.  OpenStreetMap is free international-scale geographic data contributed by volunteers. (Note: when using OpenStreetMap data for your project, be sure to read and understand the copyright agreement and required citations.)

Visit the Mapzen OSM Extract Tool to download OpenStreetMap data in shapefile format. For example, search for Philadelphia and click the download option titled IMPOSM SHP.  Unzip that folder to a local workspace. You will see several sets of shapefiles – each shapefile is a series of multiple files with the same name but different file extensions. For this project, the only shapefile of interest is roads:  philadelphia_pennsylvania_osm_roads.

 Download Other Shapefile Data

If the Mapzen Extract Tool does not have the geographic region or dataset that you need, you can also search the web for shapefiles to download.  To do this use a search term that includes [City] [Dataset] [Data Format].  So try “Philadelphia Streets Shapefile Download” or you can search for other data such as Neighborhoods: “Boston Neighborhoods Shapefile Download”.  Download the zipped shapefiles and extract to your working folder.  Additionally, many cities have open data portals which offer free geographic data in shapefile format. Just like OpenStreetMap Data, be sure to read the use limitations of the geographic data to determine that you do not violate any of these restrictions.

Add Shapefile to the Web Mapping Tool

IndieMapper is a free online tool that can be used to quickly explore and export shapefile data in various formats.  When you first visit the site, the application will launch in the browser and you will be prompted to add data.

Select the Browse for KML/SHP/GPX button. Navigate to where you extracted your shapefile data. For the OpenStreetMap Roads data, you’ll select the philadelphia_pennsylvania_osm_roads.shp file and select Open.  (Note: you can also upload KML and GPX data to this application.) Next, Select Skip DBF.

The shapefile will now be loaded into the browser.  Use the magnify tool to zoom to the area of the shapefile you are interested in.

Export the Shape to SVG

Select the Export button in the upper right hand corner.

 
Specify the page size and name of your SVG file.

Select Generate File.  After the file is generated, select Export to your Computer. Identify the location where you’d like this to be exported.

The file can now be added to a vector image editing program such as Adobe Illustrator or GIMP.  I hope you find these tips helpful the next time you need to extract geographic data for your map inspired art project!