Quantcast
Channel: GoJS - Northwoods Software
Viewing all articles
Browse latest Browse all 7069

Blurry Svgs when small

$
0
0

@Hochware wrote:

Hello,

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:
image

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:
image

It starts to get those cuts when diagram .scale <=1.71:
image
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):
image

I checked by changing the zoom by 0.01 with keys:
image

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:
image

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?

Best regards
Martin

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 7069

Trending Articles