3

I've downloaded an .svg map of Finland from http://www.amcharts.com/svg-maps/?map=finland

I want to convert it to topojson to use it with d3.js. I first start with svg to geojson conversion, but it fails.

I tried:

ogr2ogr -f "GeoJSON" finland_kunta.json finlandHigh.svg

The error I get: 

FAILURE:
Unable to open datasource `finlandHigh.svg' with the following drivers.
  -> ESRI Shapefile
  -> MapInfo File
  -> UK .NTF
  -> SDTS
  -> TIGER
  -> S57
  -> DGN
  -> VRT
  -> REC
  -> Memory
  -> BNA
  -> CSV
  -> GML
  -> GPX
  -> KML
  -> GeoJSON
  -> GMT
  -> GPKG
  -> SQLite
  -> WAsP
  -> PCIDSK
  -> OpenFileGDB
  -> XPlane
  -> AVCBin
  -> AVCE00
  -> DXF
  -> Geoconcept
  -> GeoRSS
  -> GPSTrackMaker
  -> VFK
  -> PGDump
  -> OSM
  -> GPSBabel
  -> SUA
  -> OpenAir
  -> PDS
  -> WFS
  -> HTF
  -> AeronavFAA
  -> EDIGEO
  -> GFT
  -> GME
  -> SVG
  -> CouchDB
  -> Idrisi
  -> ARCGEN
  -> SEGUKOOA
  -> SEGY
  -> XLS
  -> ODS
  -> XLSX
  -> ElasticSearch
  -> PDF
  -> CartoDB
  -> SXF

I'm only starting to figure these tools out, so I'm not sure what exactly causes the error. When I open svg, it seems to look fine and have all the elements.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
Dmitry Smirnov
  • 462
  • 8
  • 22
  • You can't use SVG as a source. Use one of the formats listed in the error message. – Lars Kotthoff Dec 09 '15 at 19:27
  • I don't understand, in the error message list svg is also included. – Dmitry Smirnov Dec 09 '15 at 19:48
  • Ah, well spotted -- you need a very specific type of SVG though, see http://www.gdal.org/drv_svg.html – Lars Kotthoff Dec 09 '15 at 19:54
  • Ok, now I see! I'm just starting and quite naive with these technologies, but I was wondering if there is some approach to go from this kind of svg to topojson. If there is no obvious way, I guess I have to look for something else, it's just that I found quite a lot of svg maps, and I thought I could use them. Do you have an advice on where to look for correct maps, and whether I should even bother with svgs, or just start looking for something else? – Dmitry Smirnov Dec 09 '15 at 20:06
  • I ask because I find quite a lot of shapefiles, but I have problem finding something which has already been split into regions and also contains correct names for those regions. – Dmitry Smirnov Dec 09 '15 at 20:15
  • In general, I would use shapefiles as a starting point. If the names are not right you can always edit them yourself. – Lars Kotthoff Dec 09 '15 at 20:20

1 Answers1

4

Actually in most cases you can use the SVG image as is, no need to convert it to topojson or GeoJSON but there are a few issues to consider:

  1. Is the original SVG file size too big for your application ? If it is then you can optimize the SVG file (For example, with: http://petercollingridge.appspot.com/svg-editor). If that's not enough then you can get a shapefile from another source (For example: http://www.naturalearthdata.com/downloads/) and convert it to GeoJSON (Use ogr2ogr, either through their web interface at http://ogre.adc4gis.com/ or you download it with GDAL at http://trac.osgeo.org/gdal/wiki/DownloadingGdalBinaries). If the resulting file is still too big you can compress with mapshaper (http://www.mapshaper.org/ - it takes both shapefiles and GeoJSON formats!) and if necessary (if your file size is still an issue) convert the resulting map from GeoJSON to topojson (see: http://github.com/mbostock/topojson/wiki).

  2. Do you need to use location data in your map ? (for example, you may need to mark where a certain city is in you map but the city is not drawn on your original SVG) Then it is easier to get a shapefile and convert it to GeoJSON (using ogr2ogr) because most likely you do not have geolocation information on the downloaded SVG file.

  3. If you're creating a choropleth and have no geolocation requirements then you can simply add the SVG directy to your page and use D3 to map data to your image! Once you have the SVG in your page then you can even manually edit all path data to include classes and ids that will make your D3 job easier.

Roberto Stelling
  • 199
  • 1
  • 6
  • Is it possible add location data to existing svg? I have svg scheme with many indoor details. But only know coordinates of building edges. – pronevich Mar 27 '16 at 12:20
  • Hi, @pronevich. It is possible to add location data to existing svg, but it all depends of how much data do you need to add (meaning: add location manually vs. write a hack to add the location) and how you need to use the location data. But if there is a way to locate/select every object within your svg then you don't need to add the data directly to the svg, you can just add/join the locations on the fly. Open a new question with your scenario and I'll help you out. – Roberto Stelling Apr 14 '16 at 18:46