SVG reload on hover

[claudiobosticco]

SmartClient Version: v13.1p_2025-12-02/AllModules Development Only (built 2025-12-02)

Safari, Chrome, Firefox on MacOS

Hi, I noticed in the svgImg example an effect that I'm also seeing in my own application:



Basically, you can see the SVGs reloading on hover. The browser console is closed. On version 14.1 it doesn’t seem to happen, while on 15.0 it seems to happen but less frequently.

[Isomorphic]

hi Claudio,

There are historical issues with flickering of .svg files when interacting with CSS.

In your app, are you also directly loading individual .svg files? It seems likely that you're instead using a custom skin from the Skin Editor? If so, are you using it directly from the database or did you export it, and which SVGs are you seeing flicker? Ones from stockIcons.svg, or elsewhere? Also, are the flickering images in particular widgets, like Img or FormItem, or just all of them?

[claudiobosticco]

Hi, actually I noticed the problem only while using isc.Img, and only when directly loading an svg file.
It happens even with an SVG that doesn’t include any CSS, I've tried a simplified test case in the showcase:

var svgPath = "../inlineExamples/html/svg/";

isc.Img.create({
    ID: "circle",
    left:20, top:75,
    width:100, height:100,
    overflow: "hidden",
    imageType: "normal",
    src: svgPath + "circle.svg"
})

and I've removed the CSS from the svg file:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%" viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="22" />
</svg>

[claudiobosticco]

Hi, any news about this issue?

[Isomorphic]

hi Claudio - we do see this caching issue and we're taking a look.

[Isomorphic]

hi Claudio,

It turns out, this isn't a caching issue at all - the flickering in the showcase sample is the known side-effect of changing an SVG src replacing the svg document node in the DOM.

The workaround for this is to set Img.useImageForSVG to true, or add "?tag=image" into the src-strings. - that will render out an <img> tag, rather than an svg document. While this may help with flickering SVGs, as documented it can't *guarantee* that result. And there's a downside - the SVG document is no longer in the DOM, instead rendered as an opaque image resource; it can no longer use external (or internal!) CSS classes - if you set this property in the sample you linked to, you'll see the images go black, because all the styling for them is in external CSS.

Alternatively, you could inline your SVGs in the page, or make <symbol>s out of them.

[Isomorphic]

hi Claudio,

Following up to clarify our previous advice - taking a deeper look, we found a bug that made isc.Img redraw on all state-changes, as if redrawOnStateChange were always set to true, which it isn't.

We've fixed that issue and an isc.Img showing a .svg will no longer redraw and potentially flicker when state changes, unless you set redrawOnStateChange to true, which would be needed if you want to replace one .svg file with another .svg file on state-changes.

When redrawOnStateChange is true, a flicker remains possible for .svg image-files, as redrawing replaces the SVG document node in the DOM - at some point, we may be able to modify the existing node and avoid the flicker but, for now, this case remains for .svg files. Other image-formats and SVG symbols shouldn't flicker.

You can try out the fix with upcoming builds, dated December 16 or later.

[claudiobosticco]

SmartClient Version: v13.1p_2025-12-17/Enterprise Deployment (built 2025-12-17)

I can confirm that it's working now, thank you very much!