In my application, it is possible to add SVGs to the canvas. They can be resized. Oddly, when I make those SVGs very small, this happens:
Notice that the circle around the rectangle has this strange cuts in it.
I experimented with diagram.scale and this is what I found out:
The SVG always has the size 26.
It looks fine with diagram.scale>=1.72:
It starts to get those cuts when diagram .scale <=1.71:
In the image above you can see that those cuts in the outer circle start to appear in the bottom left and top left “corners” of the circle.
If you zoom out even more, this happens: (diagram.scale==1):
I checked by changing the zoom by 0.01 with keys:
And I can for sure say that it will always have those cuts when the scale is smaller than 1.72 (only for this element which has a size of 26 units)
For elements with size 100, it starts to get those cuts after diagram.scale<=0.44:
But here, it behaves differently. It might be difficult to see, but the left and right corners of the triangle have some kind of edge which should not be there. For this scenario, it also will always have some kind of cuts after scale=0.45.
I read this topic:Blurriness in all browsers
But I am pretty sure this is some SVG-specific behaviour.
Here is the SVG: https://svgur.com/s/GfK
I had to manually edit the SVG, because as you state here:https://gojs.net/latest/intro/pictures.html
The SVG has to have “width” and “height” attributes defined, otherwise it will not display properly. Maybe it has to do with this?