1

So I have an SVG file that has paths for a floor in a building.

I want to convert these polygons into something like GeoJSON so that I can draw them in Mapbox.

I already know the geo coordinates and dimensions of the building Im trying to map.

To start I've been following the solution in This Answer

I got as far as creating the shapefile image but I'm stuck after that. The Affine transformations plugin is incompatible with my version of QGIS3.

Can you suggest another way I can try to convert my SVG polygons into Geo Coordinates?

Improve this question

2 Answers 2

Reset to default
1

I could convert SVG to geoJSON using svg-to-geojson linked to by @dubbeat. As we found out in the comments, the node.js package cannot be installed on Windows, but you can simply run it in a web browser. I came up with an HTML file. You only need to insert the text content of your svg file and adjust the extent coordinates.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="svg-to-geojson.min.js"></script>
  </head>
  <body>
    <svg id="mysvg" ...>
      <!-- Your svg goes here -->
    </svg>
    <script type="text/javascript">

      //Adjust coordinates according to https://github.com/davecranwell/svg-to-geojson#usage
      var geoJson = svgtogeojson.svgToGeoJson(
                      [[10.68916667, 153.63722222], [43.64444444, 113.15500000]],
                      document.getElementById('mysvg'),
                      3);

      //Downloading file (source: https://stackoverflow.com/a/34156339/9778755)
      var file = new Blob([JSON.stringify(geoJson)], {type: "text/plain"})
      var a = document.createElement('a');
      a.setAttribute('href', URL.createObjectURL(file))
      a.setAttribute('download', "mysvg.geo.json");
      a.click()
    </script>
  </body>
</html>

Paste the code into a file called index.html and put both the HTML file and svg-to-geojson.min.js into the same directory. Then open the index.html in your browser. It will download the geoJSON created by the script.

Here is my result:

Screenshot of geoJSON in QGIS 3.2

Unfortunately there seems to be some issue with projections or with the source file... ;-) I hope you are more lucky. Edit: I confounded north-east and north-west/south-west and south-east...

Improve this answer
3
  • As I commented under my answer, looks like your using a large scale or non local co-ordinate system :-)
    – shawty
    Commented Nov 2, 2018 at 0:02
  • Could also be that I mixed up the corners of the geobounds (given that Australia is turned by 180°). Documentation says that svg-to-geojson expects north-east and south-west coordinates. I provided north-west and south-east.
    – StefanBrand_EOX
    Commented Nov 2, 2018 at 11:06
  • ha ha, yep that would cause problems too :-)
    – shawty
    Commented Nov 2, 2018 at 12:24
0

Since an SVG file is just a simple text file (ok, maybe not so simple, it's XML after all), you should be able to just load the entire thing into a plain text editor.

You state you already know what the co-ordinates should be, and you know the dimensions, so all you need is to figure out which co-ordinates are which in the SVG file and you should be able to manually change them.

The only difficulty you might have is with the path command.

Paths are defined as a long string containing commands such "M x y" for Move, and "L x y" for line.

For example

"M 1 1 L 1 2 L 2 2"

Which will MOVE to 1,1 then LINE to 1,2 and LINE to 2,2

The SVG page at the Mozilla Developer Network is a great reference, to all this stuff:

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Once you've adjusted all your co-ordinates, you should then just be able to load the SVG into any package that can load it, and then produce a GeoJson.

QGis 3 understands how to load SVG files, Just use the "Vector" layer in the Data Source Manager:

QGis 3 Data Source Manager

Beacuse QGis is geospatial aware, it shouldn't change your co-ordinates, and it might even be helpfull by asking you to tell it what your co-ordinate system is.

Once you have your layer loaded, all you then need to do is just right click on it in the layer manager, left click on export, and set the output type in the export dialog as "GeoJSON"

Export Menu on a layer

Export Dialog

Improve this answer
6
  • When I say I know the coordinates I mean that I know the the coordinates of corners of the building and its width and height in meters. Is there a common algorithm to process the array of polygons in the SVG with these 'geo bounds'? For example I came across this npm package but unfortunately its not compatible with windows npmjs.com/package/svg-to-geojson
    – dubbeat
    Commented Nov 1, 2018 at 21:05
  • Why should it not work in Windows? Afaik node.js can be installed on any platform? (I have it here on my computer.)
    – StefanBrand_EOX
    Commented Nov 1, 2018 at 21:41
  • 1
    @dubbeat Yes and No, what you have to remember about "Geo Bounds" is they are usually tied to a co-ordinate system, most folks are used to seeing "WGS84" which is what most consumer GPS units and smart phones spit out, but WGS is far to un-accurate to represent buildings and other small structures, take the UK for example where I am, we use a system based on the British Grid called OSGB36, these are expressed in meters with a 0,0 location somewhere down near bell rock light house.
    – shawty
    Commented Nov 1, 2018 at 23:54
  • 1
    Using that 0,0 location and knowing that my building starts however many meters north, and however many meters east (North = X, East = Y) from that location, means I can start to plot from there, then just measure distances in meters to the next point. Problem is, different areas of the world, use different co-ordinate systems, and thier concept of 0,0 as an origin are in all sorts of different places. Unless you know where the 0,0 location is of your local co-ordinate system, you can't just go adding offsets other wise your geo co-ordinates will appear goodness knows where.
    – shawty
    Commented Nov 1, 2018 at 23:58
  • 2
    as for the NPM package, it's easy to add the "RM" command to windows, just goto : gnuwin32.sourceforge.net , install the core utils package, add c:\program files(x86)\gnu32\bin to your system path and you'll have all the main basic linux command line tools on your windows system.
    – shawty
    Commented Nov 2, 2018 at 0:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.