Custom SVG icons rendering incorrectly (no anti-alias)

[victmo]

Issue

Custom icons are being rendered incorrectly on the settings screen. However, after saving, IDE icons are shown correctly. File icons, on the other hand, are being rendered incorrectly, as shown in the screenshot below.

This started happening when I updated Rider to the current version.

I'm using SVG icons set to 16x16, as shown in the screenshot.

Regular vs HiDPI (retina) display, zoomed in:

HiDPI (retina) Settings

HiDPI (retina) Explorer

Plugin version

2023.2.5-231 (2023/05/24)

OS and IDE version

JetBrains Rider 2023.1.2

``` Build #RD-231.9011.39, built on May 17, 2023 Runtime version: 17.0.6+10-b829.9 x86_64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o. macOS 13.4 .NET 7.0.2 (Server GC) GC: G1 Young Generation, G1 Old Generation Memory: 1500M Cores: 16 Metal Rendering is ON Registry: editor.focus.mode.color.light=415967 ide.editor.tab.selection.animation=true ide.mac.bigsur.window.with.tabs.enabled=false ide.new.editor.tabs.vertical.borders=true ide.experimental.ui=true ide.balloon.shadow.size=0 editor.focus.mode.color.dark=415967 rdclient.asyncActions=false database.show.search.tab=false ide.new.project.model.index.case.sensitivity=true vcs.empty.toolwindow.show=false Non-Bundled Plugins: ru.adelf.idea.dotenv (2023.1) fr.socolin.application-insights-debug-log-viewer (1.8.0) com.github.copilot (1.2.8.2631) net.seesharpsoft.intellij.plugins.file-preview (1.6.4) lermitage.intellij.extra.icons (2023.2.5-231) some.awesome (1.14) com.chrisrm.idea.MaterialThemeUI (8.6.4) unreal-link (2023.1.0.282) ```

[jonathanlermitage]

Hi,
I confirm there is a problem with SVG icons preview in settings panel. JetBrains used to bundle some Apache Batik libraries, which were used to render SVG files. They replaced Batik by JSVG, which is smaller, faster, and consumes less memory. Unfortunately, it does not fully support some SVG attributes, which affects icons rendering.
So, I had two solutions:

• use JSVG for SVG icons rendering in settings panel.
• add Batik libraries to my plugins.

I choosed option 1 because Batik (and its dependencies) takes ~5MB. JSVG is about 450KB only. But yeah, I am not super happy with that 😅. From my point of view, Batik is more mature, but some users experienced dramatic performance issues. I think this is why JetBrains moved to JSVG.
I can try to use Batik again (I only have to revert some commit, this is super easy), but I cannot say it will fix this issue, as IDE may still use its own SVG renderer (now based on JSVG) in order to display SVG icons.
Meanwhile, JSVG is a young project, and it's very active. They published the 1.0.0 release recently. I guess they will improve SVG support.

[victmo]

Great, thanks for looking into this!

It really doesn't bother me if the settings panel doesn't render the SVG icons correctly. The problem is that they don't render correctly in the IDE's UI (file exploded, tabs, etc).

The interesting thing is that this only happens to icons of type "File" and possibly "Directory" (haven't tested those). "Icon" icons (the ones that require a restart) render just fine as you can see in my last screenshot, which tells me that JSVG is capable of rendering SVGs correctly.

Again, thanks for taking a look.

[weisJ]

Hi jsvg creator here. Antialiasing isn’t enabled by default in jsvg, as it doesn’t own the graphics object being painted to (as opposed to Batik). You’ll have to setup the appropriate rendering hints when painting to an image. If you encounter any other issues please feel free to submit it to the jsvg repo :)

[jonathanlermitage]

The problem is that they don't render correctly in the IDE's UI (file exploded, tabs, etc).

Ho, ok, this is bad news 😁. As a workaround, I will provide an option to choose between JSVG (default) and Batik.

@victmo can you please send some SVG files that does not render correctly? I would like to add them to my unit test, and, if necessary, open an issue/discussion on the JSVG repo. Thanks!

[victmo]

Of course! Here you go... Hopefully we can find a workaround :)

Let me know if you want me to send more. These are very basic, they don't have any crazy SVG properties/attributes.

[jonathanlermitage]

Thank you, @weisJ ! I enabled antialiasing and now the result is much better.
@victmo Here is how it looks like on my computer:

I will publish a new release soon.

Also, I said I wanted to let the user chose between Batik and jsvg. Unfortunately, I will abandon Batik. I tried to enable Batik + jsvg, but, I don't know if this is a problem with the IDE, classloader issues... -> if I add Batik to my plugin, I can no longer work with jsvg. When invoking new SVGLoader() (from jsvg), it cannot find a method javax.xml.stream.XMLInputFactory.newFactory(), even if it actually exists. It happens only in the IDE (maybe a problem with JetBrains' JBR...), not in unit tests, which use a regular JDK. I had so many issues with classloader in IJ in the past, so, I will continue with jsvg 😁
I will try to make it more reproducible it in order to submit an issue, but for now it happens only in my plugin, in an IDE.

[jonathanlermitage]

Plugin release 2023.2.6 published to the marketplace. It should be available in ~2 days.

[victmo]

Also, I said I wanted to let the user chose between Batik and jsvg. Unfortunately, I will abandon Batik. I tried to enable Batik + jsvg, but, I don't know if this is a problem with the IDE, classloader issues... -> if I add Batik to my plugin, I can no longer work with jsvg.

That's ok! You figured out how to make JSVG work, which in my opinion sounds like the better solution, so there's not need to add Batik as far as I can tell.

Thanks for taking care of this and for building this cool extension.

@weisJ, thanks for jumping in to help!