[Feature request] SVG export

[aguillien]

It would be super nice to have the ability to export the current map as svg instead of png.

Props for the work so far !

[ketz]

+1

[grmain]

I totally agree with this suggestion!

[acircleda]

Yes! If not SVG, vector PDF.

[Devetec]

Yes! This is needed.

[spidey000]

+1

[ktgvv]

Yeah, agreed. I'd like to do some graphic art with those clean maps.

[anvaka]

Hello Friends!

I've added experimental support for this feature. May I ask you to play with it and tell me how it goes?

To enable the feature just add ?svg=1 to the query string. I.e. click here https://anvaka.github.io/city-roads/?svg=1 - there should be a new item to export as SVG (trying to keep it hidden, so that if there are any issues we don't set wrong expectations)

Would this work? Anything else is missing?

[patzi]

Looks good to me, though I first couldn't see anything in inkscape. I had to zoom in or make the lines thicker, but it seems to work. Thanks

[grmain]

Looks good too! Opened it in Inkscape, selected all the objects and applied a 1 px-wide solid color to the lines, exported it to a png and it's sooooo gorgeous. Each step required some time to Inkscape to process it because there are many many many objets to deal with, that seems normal to me.
Many thanks anvaka, I really appreciate your work :)

[lagerkoller]

Works fine for me, thanks. However, the colors are ignored (always black and white). And there is no city label.

An additional rather small issue: at the end of each path's d attribute value there is an unnecessary space: ""

[acircleda]

The SVG pulls the view that I select (zoom level, placement), but its just black lines on a white bg.

[jeroentvb]

Downloading as svg doesn't work for me on Safari, macOS 10.15.2. I made sure ?svg=1 was in the url.
I tried it in chrome and it worked.

[nonoesp]

@jeroentvb make sure you're appending &svg=1 if there are other arguments in the URL (e.g. https://anvaka.github.io/city-roads/?q=malaga%2C%20spain&areaId=3605275848&svg=1 and not https://anvaka.github.io/city-roads/?q=malaga%2C%20spain&areaId=3605275848?svg=1).

[puchok]

this ist really cool with .svg! Many thanks. Testet with chrom - it works

[anvaka]

Thank you for the feedback! This is done now. Here is side by side rendering of city roads and an exported svg (both rendered by google chrome):

Still need to look into Safari export error, but otherwise this change supports colors and labels customization. Hope this works for you too! Please open a new issue if you find anything missing or broken.

Thanks again for the inspiration :).