Safari blurry icons

[kostyukdg]

Hi,

Your library is awesome. It works perfectly on any device except for safari(iOS and desktop). The flags are blurry.

device screenshot

It happens when you load an image from url <img src="https://hatscripts.github.io/circle-flags/flags/br.svg" width="48">

I found solutions but looks tricky <object type="image/svg+xml" data={path} />

It only affects icons from this library. That's why I guess it has some problems with svg structure.

Thanks again for your work!

[HatScripts]

Hi @kostyukdg, I'm glad you like the library. Could you please elaborate or provide more screenshots? Unless I am missing something, the screenshot you provided doesn't appear to show obviously blurry flag icons. Thanks!

[waldyrious]

I think he may mean the borders around the icons:

Maybe Safari is not able to properly render the alpha masks (#11/#18)? I wonder if using <clipPath> instead of <mask> might work better. After all, we only need a binary mask (which is what clipPath provides), not a gradual transparency as mask allows (and we're not using, since the mask path we're using is filled with solid white).

In #18, @climech said that

<mask> was chosen over <clipPath> because the former results in slightly smaller file sizes (exactly 1 byte smaller 🙃).

So if <clipPath> is better supported by renderers (to be determined!), maybe the extra 1 byte would be an acceptable workaround.

[HatScripts]

This should be fixed now: https://github.com/HatScripts/circle-flags/releases/tag/v2.5.0

Replace mask with border-radius across all flags:

<svg ...><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)">...</g></svg>

...becomes:

<svg ... style="border-radius:50%">...</svg>

[waldyrious]

Nice, @HatScripts! Out of curiosity, why did you go with border-radius instead of clipPath? Smaller files?

Edit: either way, it's nice that it was done via CSS, since now the clipping of the flags to different shapes can be done without tweaking the SVG — see #51!

[waldyrious]

Cross-referencing #52 and #53 for future reference. It seems like it might be a good idea to pick (and document) the list of platforms/software we want to target and guarantee proper rendering.

In any case, I'd say that, assuming we want to support the platforms where border-radius doesn't work, it's preferable to have blurry borders in Safari (which might even be solved with using a <clipPath> instead of <mask>), than non-round icons at all elsewhere.