SVG displaying problem with Firefox (after last udpate)

[grichka49]

Bug report notice

SVG are cropped in Firefox. It seems to be OK with Chrome
Animation (animated SVG) are not smooth. I seems to be OK with Chrome

• [X ] Yes, I'm sure that it is not a configuration mistake

Swiss Army Knife version

The problem appears with last update v2.4.4
All was functional before update.

Bug description

Some part of SVG are not displayed

To Reproduce

Display the card with Firefox browser

Screenshots

Firefox

Chrome

Desktop browser (please complete the following information):

• OS: Windows 11
• Firefox 113.0.1

[AmoebeLabs]

Nice energy dashboard!

Try disabling SVG injection:

  options:
    svginjection: false     # true (default) for injection,
                            # false for keeping the external file

see: https://swiss-army-knife-card-manual.amoebelabs.com/tools/usersvg-tool/#styling-injected-vs-external-svgs

I will check firefox to see if I can find the problem FF has with injected SVGs.

[jwaz73]

I'm having the same issue with FF (v113.0.1) on Windows 11. No issues with Chrome or Edge.

Where does the codeblock for disabling svgingection go? I tried it here with no change:

      - type: usersvg
      ...
        styles:
          usersvg:
            options:
              svginjection: false

[AmoebeLabs]

I'm having the same issue with FF (v113.0.1) on Windows 11. No issues with Chrome or Edge.

Where does the codeblock for disabling svgingection go? I tried it here with no change:

      - type: usersvg
      ...
        styles:
          usersvg:
            options:
              svginjection: false

On the same level as the styles.
So:

  - type:
    options:
      svginjection: false
    styles:

[AmoebeLabs]

Yup, FF does weird things with some of the SVGs:

• The first row shows a perfect AQI face. no clipping at all. I see that with more SVGs
• The first row shows clipping for some reason for the pollen SVGs. The SVGs don't have any clipping/masking region defined
• The second row shows NO clipping, other than the clipping/masking specified in the SAK card.

I must do more testing to find out what the problem is with FF when injecting SVGs. I have checked the CSS property overflow = visible, but that one is already defined as Safari needed that setting.

According to the inspector, FF does calculate the space for the SVG as it should:

The size of the actual SVG is also right:

This you can see from this image. They are identical:

So FF knows the exact - right - size of the SVG, but is clipping the image in some situations!

[AmoebeLabs]

FF seems to have a large history of clipping and masking problems if I browse the internet. That helped in understanding why Safari and Chromium (Chrome / Edge) render as expected, and FF not.

So, after some hours of experimenting and adapting the UserSVG tool, it works now in FF:

• first card is without any clipping/masking specified, but uses injected SVG's
• second card is using clipping/masking. AQI is an image, Tres and Grass are injected SVGs with some styling (Tres with a color invert filter, and Grass with opacity set to 0.5), and Weed is an external SVG (not injected).