Repository navigation
Safari blurry icons #41
Description
Activity
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!
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 whatclipPathprovides), not a gradual transparency asmaskallows (and we're not using, since the mask path we're using isfilled with solid white).<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.Reacted by HatScriptsThis should be fixed now: https://github.com/HatScripts/circle-flags/releases/tag/v2.5.0
Replace
maskwithborder-radiusacross 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>
Nice, @HatScripts! Out of curiosity, why did you go with
border-radiusinstead ofclipPath? 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!
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-radiusdoesn'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.Reacted by HatScripts and Tolgahan
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!