Background: I'm letting users draw on a GoogleMap and I'm then pulling the points they draw from it to make an svg that the users can name and reference later. This seems to be working when those drawings are large enough, but I seem to have a problem when they are very small (like a polygon around a small park for example).

You can play with a version of this here: https://codepen.io/glenpierce/pen/MRqwmJ?editors=1010

When I go to inspect the actual polygons within the svgs, they appear to be placed within the viewBox and I think they should be visible, but I can't get them to appear. When I set the svgs stroke to any width above 0, the stroke completely takes over the entire viewBox. I thought svgs were "scalable". Are there some rules about very small decimal values or anything? If so, where can I find a reference to that?

Is there a way to scale (or otherwise fix) the polygon in this svg in vanilla JS to make it visible within this svg?

<svg
height="180px"
width="360px"
viewBox="
92.52881560431149
43.41319404777748
0.0024139881134033203
0.00027281812062796007

"><polygon points="
92.5290516387048,
43.41319404777748,
92.53095064268734,
43.4132456619112,
92.53122959242489,
43.413400504607246,
92.52903018103268,
43.41346686589811,
92.52881560431149,
43.4132087946678
"></polygon></svg>

note: I've edited the spacing on this to make it easier to read.

how it looks in codepen

See above how this works on the triangle in green, but you can see that I have highlighted the rectangle that is not visible in the other svg.

1 Answers

1
Glen Pierce On

It appears that svgs have precision limitations: "Using single-precision floats, SVG viewers are not expected to correctly draw differences between two values finer than 1/4,000,000 of the larger number (that’s 1 over 2 to the power of 22, approximately). In practice, very few achieve even that."

source: https://oreillymedia.github.io/Using_SVG/extras/ch08-precision.html