My SVG pictures are sliced, deform on Mozilla Firefox Only

Well I have a problem with my website, I set pictures on it in SVG for the render quality,

pheraps pictures are loading well on Chrome and Edge, but when I use firefox that’s like pictures are

sliced. For exemple :

same normal picture working on Chrome and edge :

The “star” item on it disapear and background become sliced.

The problem happens only in firefox, whatever device. Do someone knows why ?

thanks a lot

Hi @Toxut

You may want to consider using an alternative lossless image format like PNG for the problematic elements. While this might result in slightly lower image quality, it should resolve any browser compatibility issues.

Hi, thanks for the answer!

The problem with PNG is about blurry quality that’s why I used SVG.. Same for logo if I set a PNG logo that’s so blurry If I zoom a lil bit. My SVG pic are directly added in theme library not from css settings. Is there a way to use sharpness PNG?

Hi @Toxut

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

Of course I just sent you in private.

Hi @Toxut ,

We don’t know if you have any third-party apps installed, but it seems that the properties of that image are not changed properly like other images.

Because we just observe from the outside, we won’t know exactly what is happening, so if you are using a 3rd party app, try disabling/uninstalling that app and check the results. If not, you can also try to change another image and check if the error is still there.

We hope this can help you.