search

HatScripts / circle-flags

A collection of 400+ minimal circular SVG country, state and language flags
https://hatscripts.github.io/circle-flags
MIT License
1.04k stars 264 forks source link

Styling with border radius not always works. #53

Open maroparo opened 2 years ago

maroparo commented 2 years ago

Hi, First of all thanks for this awesome lib! Much appreciated. I have installed this package as a dependency in my project. I came across this weird issue where I've notice that the the styling of the border radius doesn't always work with border-radius:50%. I first noticed when trying to rasterize the flags for a PDF export. The preview of the doc looked fine, but in the file itself the flag came out as as a square. I navigated to the svg flag file in through my editor (WebStorm) and noticed the same thing, the flags are square there as well. When opening the same file in the browser though, the border-radius:50% style prop was correctly interpreted and the flag showed up as round. And then it hit me! Not all programs are able to recognize/interpret the CSS like syntax. 🤔

Here is a preview of what I mean, file found at circle-flags/flags/gb.svg, and notice border-radius:50% in the code side:

Screen Shot 2022-05-19 at 14 06 17

On the other hand, a svg image I found online, seems to by pass this issue in an another manner by adding some additional native svg elements which helps achieving a more universal compliance:

Screen Shot 2022-05-19 at 14 10 51

Here is a the code for the svg I found in the internet, maybe helps you see how they did it. ``

``

Sorry I couldn't be of more help but I'm not an svg expert myself.

gsgou commented 2 years ago

Same issue with the rendering of SVGs with the popular skia framework. https://github.com/mono/SkiaSharp/issues/2220

Noticed it by updating from the older flags with the mask to the new ones with border-style. See also: https://github.com/mono/SkiaSharp/issues/2220, https://github.com/wieslawsoltes/Svg.Skia/issues/114

this renders de

while this does not de-de

gsgou commented 2 years ago

@HatScripts as mentioned here https://github.com/HatScripts/circle-flags/issues/52, the issue is still happening with react native. So it is a real issue for at least three mobile development cross-platform environments. Currently Xamarin, Flutter and React-Native. The feature of circularity is significant versus other projects as https://github.com/lipis/flag-icons

Are you interested changing to the masked behaviour, in that case i can take the time and help create a PR.

HatScripts commented 2 years ago

@gsgou I've reverted back to using mask instead of border-radius as of v2.6.0 (https://github.com/HatScripts/circle-flags/commit/07324c28b709732e04c7caeee9eaa276a9b42fae), so this issue should now be fixed.

gsgou commented 2 years ago

Tks a lot for this 👌