Support for scaling SVGs

[bjornarhagen]

trafficstars

Is your feature request related to a problem? Please describe.

SVGs are seemingly treated as bitmap instead of as vectors. When opening a SVG a small viewBox (like 24px) the image becomes very pixelated when zooming in.

Describe the solution you'd like

I'd like to see SVGs scale without becoming pixelated.

Is this possible to do, or is it way to hard because of limitations with ImageMagick and whatnot?

[d2phap]

Hi @bearhagen

This feature is in my todo list.

ImageMagick supports reading SVG in vary dimensions. ImageGlass will just need to load a new image data when user zooms in/out.

However, the current structure of image list stored in memory needs much resource to do it. The team planned to rewrite the ImageGlass.Core.dll, and will be able to do more with multiple-page image formats as well as scallable ones.

Thanks for the post, please keep on following for later update.

[Luvideria]

Hi, I see I'm not the only one with this issue, any plans for 2020 regarding this issue?

[d2phap]

Hi @Luvideria I did some investigations for supporting scaling SVG, but I haven't found an optimal way to implement it. Some of the problems I had are:

• High CPU and RAM consumption
• Poor performance

I will need to try more solutions. Thanks for asking :)

[mcorossigo]

Hello @d2phap If you're actively working on this, it would be awesome if could put out a blog post discussing what you tried and what other options are. It would be at least as interesting as the multi-page TIF format one. Even better if you can go a little more technical. Anyway thank you!

[Luvideria]

I know that SVG computation is a hot topic even now in research: in HPG 2019: https://diglib.eg.org/handle/10.1111/cgf13757 SigAsia 2014: http://w3.impa.br/~diego/projects/GanEtAl14/

Though many approaches focus on GPU here.

Some other svg implementations are listed here (CPU): https://github.com/RazrFalcon/resvg

[skycommand]

I did some investigations for supporting scaling SVG, but I haven't found an optimal way to implement it. Some of the problems I had are:

• High CPU and RAM consumption
• Poor performance

Hi. Why not have CEF do the SVG rendering for you? Since this project is written C#, you might want to take a look at CefSharp.

Whatever you decide, good luck! 👍

[Riajyuu]

Hi. Why not have CEF do the SVG rendering for you? Since this project is written C#, you might want to take a look at CefSharp.

CEF, electron, or any UI framework based on V8, literally means poor performance, espcially on Windows

[skycommand]

Hi. Why not have CEF do the SVG rendering for you? Since this project is written C#, you might want to take a look at CefSharp.

CEF, electron, or any UI framework based on V8, literally means poor performance, espcially on Windows

Strange. Experience tells me that CEF is blazing fast. My current SVG viewer is based on CEF. (Too bad it does not have the convenient features of ImageGlass.)

Besides, the SVG rendering in CEF is based on Blink, not V8.

[bjornarhagen]

@Riajyuu SVG rendering with bad performance would still be better than the current pixelated rendering though

[Riajyuu]

Strange. Experience tells me that CEF is blazing fast. My current SVG viewer is based on CEF. (Too bad it does not have the convenient features of ImageGlass.)

Besides, the SVG rendering in CEF is based on Blink, not V8.

@skycommand

Sorry if there is any misunderstanding.

Pls allow me rephrase it a bit:

on Windows, if you are rendering any UI component via anything relvant with Blink, V8, Chromium, or whatever similar (like CEF, electron, nodejs), the finally product you get will be really laggy unless users have full SSD.

If your experience was on Mac/Linux, you can expect a totally different story on Windows.

@bjornarhagen

I see you point here. But I just assume it may be spoiling the soup.

[Unknow0059]

You could look into how browsers implement this, such as Internet Explorer 11.

[d2phap]

I have been recently looking into changing framework of ImageGlass from WinForms to WPF which is easier to support for scaling SVG and hardware acceleration. It's also better than using chromium embedded. However, i will need to rewrite almost 70% of ImageGlass code, this is huge work. There will be alpha / beta / moon versions of this new ImageGlass. The final and official release may be landed in a year or two.

[Luvideria]

I see the version 8.0 of ImageGlass is out. Is there a roadmap for the integration of the new SVG loader? Is there a branch?

[d2phap]

@Luvideria I have been developing a simple viewer using HTML/JavaScript (for experiment purpose), I may embed a Webview into ImageGlass for some specific formats, including SVG

[Riajyuu]

I may embed a Webview into ImageGlass for some specific formats, including SVG

Why not Edge WebView2 (if possible), which is already OS built-in since 20H2

[skycommand]

I may embed a Webview into ImageGlass for some specific formats, including SVG

Why not Edge WebView2 (if possible), which is already OS built-in since 20H2

WebView2 does not ship with any OS, not even 20H2. To use it, either the app must ship with WebView2 Runtime, or the customer must have Microsoft Edge non-stable (Canary) version 82 and later installed. (See: Prerequisites) This is good, because that makes WebView2 available for Windows 7 and later.

Of course, WebView2's SVG rendering is blazing fast.

[nathanielcwm]

Hi. Why not have CEF do the SVG rendering for you? Since this project is written C#, you might want to take a look at CefSharp.

Whatever you decide, good luck! 👍

Yuck @skycommand, I already have 10+ instances of Google Chrome/Chromium/CEF/Electron on my system. I don't need another one.

[skycommand]

@nathanielcwm That doesn't seem like something that needs my attention.

You and many other people observe that Electron uses Chromium and Chromium uses CEF, but incorrectly conclude that to use CEF, you must use Electron and Chromium too! In reality, to take advantage of CEF's SVG parser, you don't need the whole CEF. You only need one of its DLLs.

Oh, I'm sorry, am I rambling? Well, in the future, please refrain from pinging me unless you want me to ramble.

[shockergit]

@Luvideria I have been developing a simple viewer using HTML/JavaScript (for experiment purpose), I may embed a Webview into ImageGlass for some specific formats, including SVG

I was using one of the old versions and scalable svg worked fine. I think it was 1 of these ImageGlass 8.2.5.16 - June ImageGlass 8.2.6.6 - June Have you removed it in latest update.

[d2phap]

I was using one of the old versions and scalable svg worked fine. I think it was 1 of these ImageGlass 8.2.5.16 - June ImageGlass 8.2.6.6 - June Have you removed it in latest update.

It just does not support from the first version. The "scaling" or "blur" you mean maybe the Zoom Optimization option in settings:

Btw, I'm working on ImageGlass v9 which will use Webview2 to resolve all of these problems for SVG, APNG, WEBP,...

[shockergit]

I was using one of the old versions and scalable svg worked fine. I think it was 1 of these ImageGlass 8.2.5.16 - June ImageGlass 8.2.6.6 - June Have you removed it in latest update.

It just does not support from the first version. The "scaling" or "blur" you mean maybe the Zoom Optimization option in settings:

Btw, I'm working on ImageGlass v9 which will use Webview2 to resolve all of these problems for SVG, APNG, WEBP,...

Well thats nice waiting for v9

[sguergachi]

@d2phap with beta 4 it seems we have WebView running but I noticed svg scaling isnt running. Will we be seeing it in a future beta, or is WebView not able to do it like you expected?

[d2phap]

@sguergachi Yes, I created https://github.com/d2phap/happlajs - a core image viewer library 2 years ago to use in the new ImageGlass 9. It works great.

v9.0 beta 4 starts using Webview2 for the About and Check for update dialog. The next beta 5 will use Webview2 for Settings window which has been missing.

The native viewer component has a lot more features: cropping, playing / pausing frame animation, displaying text message, navigation arrow buttons, image interpolations, ... which are missing from happlajs. I plan to only add basic integration for Webview2 as a alternative viewer component with basic features: zooming, panning,... to v9.0 beta 5. Other features for Webview2-based viewer will be added once the official v9.0 released.

I am also trying using SVG rendering feature from Direct2D instead. But it has more limitations than the web technology.

[d2phap]

The upcoming IG v9.0 beta 5 will introduce "Webview2 viewer component" to add support for scaling SVG including animated SVG, and interactive SVG files. Webview2 runtime is required. It has some limits as I mentioned earlier. Here are the supported features:

• Supports scaling SVG, animated SVG, interactive SVG files
• Supports opening image by dropping files from desktop
• Supports navigation arrow buttons according to the setting
• Supports showing in-app message
• Supports customizing MouseWheel action
• Supports customizing MouseClick action (right button)
• Supports zooming features:
  • All zoom modes
  • Zoom by hotkeys
  • Set custom zoom
  • Follow zoom levels setting
• Support panning features:
  • Pan by hotkeys
  • Follow pan speed setting

Other features MAY just work, except for Rotation, Flipping, Color picker, Cropping, Page navigation, Copy image data, Print, Set as Desktop/Lock screen, View image channels, Export image frames,...

You can switch back to the native viewer component by opening Settings > Viewer, uncheck the option Use Webview2 for viewing SVG format.

When you minimize the window, the Webview2 viewer component will be suspended to consume less memory as same as MS Edge's sleep mode.

[d2phap]

Published ImageGlass 9.0 beta 5