SVG Post Image blurry

General
1

Description:

I’ve never seen this and thought this is not even possible. SVG images are blurry in Safari.
I use a custom taxonomy “countries”. To assign an Image to each term I created a custom image field. Each flag is uploaded as SVG.

Now when I want to display the flag in a Term Query the flag is blurry for some reason. Does this have something to do with the attribute styling? Depending on the settings in the editor the image gets width and height set to either “0” or “1” (see screenshot).

This is how the flag looks (text is sharp while the SVG image is blurry):
Bildschirmfoto 2023-09-02 um 17.59.51

Here is the HTML:

Bildschirmfoto 2023-09-02 um 18.00.33
Bildschirmfoto 2023-09-02 um 18.00.331072×268 78.7 KB

2

Hi @Jonas,

Sorry to hear you’re experiencing trouble with this.

Unfortunately, I haven’t been able to reproduce this issue on my end, as SVGs are sharp regardless of the browser.

Could you possibly provide more details on how you’re importing your SVG?
I ask this, as the image sizes are calculated by WordPress not Cwicly, which would suggest an error in the calculation at the time of import.

Thank you in advance.

3

Hi @Araminta,

I just found out what caused this. I had this CSS applied to the SVG image:

.blockclass {
  -webkit-filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.25));
}

for some reason this leads to blurry SVGs in Safari. So nothing wrong with Cwicly in this case as well :slight_smile:

1 Like
4

Thank you for getting back to me on this, @Jonas.

That explains it!

Indeed, SVGs in Safari unfortunately experience problems when applying drop shadows within img tags, resulting in SVG resizing and rasterisation which causes the blurriness.

A hack I found was to enlarge your SVG, and then scale it back down to its intended size.

Hope this helps!

1 Like