Flickering SVG.icons on buttons

[SimonF]

Hi,
We want to switch to svg-icons because we are getting a lot more users with HiDPI screens. With a hidpi screen the 16px icons are looking blurry.


When hovering a button with a svg icon, the icon “flickers” or, in Firefox, even sometimes disappears completely until I hover the button again. See the attached code for reproduction.
This is reproducable with the latest downloadable version of version 11.1 (SmartClient_v111p_2018-04-07_Pro). Tested with the latest Chrome (65.0.3325.181) and Firefox builds - Edge behaves normally.

It seemt that this change was added between 11.1p_2018-02-23 Pro and 11.1p_2018-03-07 Pro.
Since then svgs are rendered in an "object" element instead of a img tag. This could lead to the flickering effect?

Canvas.resizeControls(4);
Canvas.resizeFonts(2);

isc.VLayout.create({
    ID: "layout",
    margin: 20,
    width: "100%",
    height: "100%",
    members: [
        isc.Button.create({
            ID: "button1",
            width: 200,
            title: "SVG Icon",
            icon: "https://upload.wikimedia.org/wikipedia/commons/8/86/Triforce.svg",
        }),
        isc.LayoutSpacer.create({
            height: 20
        }),
        isc.Button.create({
            ID: "button2",
            width: 200,
            title: "PNG Icon",
            icon: "https://cdn2.iconfinder.com/data/icons/font-awesome/1792/home-256.png",
        })
    ]
})

Regards,

[Blama]

Hi Isomorphic, Hi edulid,

this is the same issue.

Best regards
Blama

[Isomorphic]

If you just want the old behavior back, you can set Canvas.useImageForSVG: true so that SVG is once again rendered in an <image> tag. This was an undocumented attribute but we'll expose it now.

[SimonF]

Thanks, this fixed the issue for flickering svg-icons

[Blama]

Hi Isomorphic

This will be in the next build of SmartGWT as well, won't it? SimonF was able to use it already, because he is using JS?
I'll definitely also need this for all my non-colored icons. Right now this heavily extends the rendering time for me in Chromium and FF. This is surly a browser issue, but I have to mitigate anyway.

In the same area (sure you won't like it):
Right now I can't control if ListGrid.removeIcon get rendered as <object> or <img> when using SVG, right? Could you make this an autoChild? Here I also could use a fixed red PNG, but of course the other way would be better.
Same is true for other places where the icon is part of a control like SectionStackSection.setIcon or other places where you just give the URL and don't have an autoChild for the image.

Best regards
Blama

[Isomorphic]

This will be in the next build of SmartGWT as well, won't it? SimonF was able to use it already, because he is using JS?
I'll definitely also need this for all my non-colored icons. Right now this heavily extends the rendering time for me in Chromium and FF. This is surly a browser issue, but I have to mitigate anyway.

The property will be exposed, yes, but whether it impacts a specific icon will depend on the situation, as you point out below. Just because the icon is inside a Canvas doesn't mean that that Canvas' context is used when the icon is rendered.

In the same area (sure you won't like it):
Right now I can't control if ListGrid.removeIcon get rendered as <object> or <img> when using SVG, right? Could you make this an autoChild? Here I also could use a fixed red PNG, but of course the other way would be better.
Same is true for other places where the icon is part of a control like SectionStackSection.setIcon or other places where you just give the URL and don't have an autoChild for the image.

We'll have to consider the possible solutions - there are a few others.

[Blama]

Hi Isomorphic,

I changed the non-customer-specific icons to PNG for now. Once Canvas.useImageForSVG is there and the flickering from #1 is solved, the only visible deterioration for me is this minor one.
So of course I'm looking forward to the solutions you talk about in #6, but this is not urgent for me.

Best regards
Blama

[Isomorphic]

We've added the capability to control what tag is used for SVG images to SGWT 12.1d/SC12.1d in today's build (dated 2018-05-18). To do so, simply add a "tag" query param to the image URL, such as for example "circle.svg?tag=image". You can test its behavior in the latest showcase.

Note that Canvas.useImageForSVG has precedence, so you'll need to make ensure it's not set for your instance (or in the Canvas prototype if it has no controlling instance) for the query param to work.

[Blama]

Hi Isomorphic,

it seems that this was backported to 12.0p as well.
If so, can you please the 12.1 docs sentence also in the 12.0 docs?

If this property is not set, then you can also control whether an SVG image is rendered in an object or image tag by setting the query param "tag" on the image URL - see SCImgURL for details.

Thank you and Best regards
Blama

[Isomorphic]

The docs have been updated in 12.0. You will see the update as of tomorrow's builds (March 13).

Regards
Isomorphic Software