Micro SVG output

[simonseddon]

Hey buddy. Great work on this utility. I'm having a little trouble with rendered dimensions. Basically, when I open up an outputted SVG in Illustrator, it's about a pixel wide/tall. If I scale it up (a lot) then it resembles the path (geo-coords) I'd expect (albeit rotated 90º). Have you came across this before?

My workflow is:

• Grab a polyline from a mapping API (I'm assured that this is using the Mercator Projection).
• Convert the polyline to geojson
• Feed the geojson in to geojson2svg
• Render

Output looks something like this (abbreviated): <svg viewBox="1.13495 103.33796 0.5846800000000001 0.5620300000000071" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2"><g><path class="linestring" d="M1.44589 103.62082L1.44583 103.62092L1.44577 103.62109L1.44575 103.62121L1.44576 103.62142L1.44579 103.62155L1.44599 103.622L1.44604 103.62221L1.44604 103.62251L1.44597 103.6228L1.44595 103.62295L1.44596 103.62302L1.44603 103.62316L1.44614 103.62325L1.44659 103.62349L1.44734 103.62394L1.4479 103.62433L1.44813 103.62454L1.44839 103.62473L1.44854 103.6248L1.44887 103.62484L1.44902 103.62491L1.44907 103.62496L1.44911 103.62502L1.44912 103.6251L1.44911 103.62517L1.44904 103.62531L1.44891........</svg>

As you can see, the path's points are all incredibly similar. I've had the same issue when over-writing the viewbox via. .extent

Pretty sure I'm doing something dumb.

[simonseddon]

I've changed a few things. Still got the same issue but the outputted SVG is now different to the above. I've saved the GeoJSON and the SVG to files (attached). I've ran the GeoJSON through a linter (http://geojsonlint.com/) and the results, there, are accurate. The outputted SVG, however, is tiny and flipped (upside down).

I've been able to calculate the bounds (lat, lng min/max), if that helps? Thinking 'projection' may be the answer? geojson2svg_files.zip

[brian-g]

Same problem. I ended up adding a projection() function that simply did:

Math.trunc(coord[0] * 10000)

Also found that the deep floating point numbers made rendering on Safari sketchy at best.

[philippeauriach]

Had the same problem, with a geojson in 4326 coordinates format, could not get a proper shape displaying. Playing with the weight property allows to adjust the stroke-width of the shape. In conjunction with a projection function to correct the vertical "mirror" effect:

geojson2svg()
        .projection((coord: [number, number]) => {
          return [Math.trunc(coord[0] * 1000), -Math.trunc(coord[1] * 1000)]
        })
        .data({
          type: 'Feature',
          geometry: geojson,
          properties: {
            stroke: 'green',
            weight: 0.1,
            opacity: 1,
          },
        })
        .render()

All this did the trick.