SVG Path From Polygon Longitudes and Latitudes - issue - svg

Question

I have used the code verbatim from this post to dynamically create SVG paths from Lats & Lngs and for 80% of the time it's working very nicely but I have several polygons that are not rendering correctly in SVG
I have prepared an example in JSFiddle showing 1 that works & 1 that doesn't ...
<div style="padding:20px;">
<div>
Top SVG = NOT Working
<svg width="200" height="200" viewBox="227.131 154.886 0.007 0.006">
<path d="M227.125,154.881 227.125,154.881 227.131,154.881 227.132,154.881 227.132,154.882 227.132,154.886 227.132,154.886 227.131,154.886 227.131,154.886 227.129,154.884 227.126,154.881z"> </path>
</svg>
</div>
<div>
Bottom SVG = Working
<svg width="200" height="200" viewBox="227.136 154.905 0.009 0.014">
<path d="M227.145,154.907 227.140,154.905 227.141,154.910 227.138,154.914 227.136,154.919 227.141,154.919 227.145,154.919 227.145,154.916 227.145,154.912z M227.139,154.914 227.140,154.913 227.141,154.913 227.141,154.913 227.141,154.914 227.140,154.914 227.139,154.914z"> </path>
</svg>
</div>
</div>
I'd appreciate it if someone could point out my issue.
ALSO - I would like to know how and where to include a stroke color & width in this html. Thanks!!

Answer 1

I think there are a couple of problems with the first SVG:
The viewBox is incorrect. It doesn't match the shape. It should be more like:
viewBox="227.125 154.881 0.007 0.005"
The first two values (minX and minY) were wrong. How did this happen? I don't know. The code in that question looks alright at first glance, but I haven't attempted to debug it.
Secondly, I think there is likely a floating point issue. There are five orders of magnitude difference between the x and y offset of the shape, and its size. It seems you may be striking some floating point rounding issues, or something like that.
If you reduce the x and y coordinates, the shape renders correctly.
<div style="padding:20px;">
<div>
Top SVG = NOT Working
<svg width="200" height="200" viewBox="7.125 4.881 0.007 0.005">
<path d="M7.125,4.881 7.125,4.881 7.131,4.881 7.132,4.881 7.132,4.882 7.132,4.886 7.132,4.886 7.131,4.886 7.131,4.886 7.129,4.884 7.126,4.881z"
stroke="red" stroke-width=".0002"/>
</svg>
</div>
<div>
Bottom SVG = Working
<svg width="200" height="200" viewBox="227.136 154.905 0.009 0.014">
<path d="M227.145,154.907 227.140,154.905 227.141,154.910 227.138,154.914 227.136,154.919 227.141,154.919 227.145,154.919 227.145,154.916 227.145,154.912z M227.139,154.914 227.140,154.913 227.141,154.913 227.141,154.913 227.141,154.914 227.140,154.914 227.139,154.914z"> </path>
</svg>
</div>
</div>
To avoid this problem with other shapes, you could modify the code to subtract the minX and minY value from all the coordinates. After you fix issue #1, though, of course!

Answer 2

The first SVG is located outside the drawing area/viewBox, however You can add the stroke inside the <g> tag that wraps the graphic, as in the second SVG theres two shapes and I added stroke to one only.
Check this code:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g stroke-width="3" stroke="#00CF00">
<polygon points="15,81 113,9 170,172 52,189 "/>
</g>
</svg>
<br />
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<circle cx="96.3" cy="93" r="62.3"/>
<g stroke-width="3" stroke="#FFFFFF">
<polygon style="fill:#00CF00;" points="71.7,56 144,92 71.7,128.3 "/></g>
</svg>