Custom .svg icons blurry in some places inside the editor

[bitbrain]

Godot version

4.0-rc2

System information

Windows 10, 4K monitor

Issue description

Custom .svg icons occur blurry in certain parts of the editor on higher resolution monitors (e.g. 4K) and 200% editor scaling and Scale With Editor Scale turned on. Note, that this only affects custom icons and native editor icons seem to be fine in the MRP.

Given a node defines something like this:

@icon("tree.svg")
class_name CustomNode extends Node2D

@export var node:Node2D

it will occur like this in the editor:

All the red circles are places where the icon seems to be blurry and does not scale correctly with the editor. Only the green circle shows the correct version of the icon.

Steps to reproduce

1. open MRP on a 4K monitor
2. set editor scaling to 200%

Minimal reproduction project

blurry-icons.zip

[bitbrain]

I cannot help but also find that the blurred versions look a bit... squashed?

Blurry version:

Sharp version:

[coppolaemilio]

I think there are a couple factors making it blurry. The source svg according to figma is: 16.88 x 15.06. Making a "frame" with it being 16 x 16 might result in less blurriness because it doesn't have to make those decimal calculations when rasterizing.
There's also the size of the source image. I usually get better results (might be psychological, haven't compared) when I make a bigger image, so instead of going for a 16x16 I try to use 32x32 or 64x64 on the svg file.
I tried making your icon on a 32x32 frame

And got better results in editor:

Here it's the tree2.svg if you want to try it out:

Hope that helps!

[DarkMessiah]

😁

[DricomDragon]

Icon displayed on the left of "BehaveTree" seems to be a bit oversized. May be related to #75845 ?

[coppolaemilio]

This was fixed recently with: #75472

[Zylann]

I found it's not just custom icons