Styling with border radius not always works.

[maroparo]

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:

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:

Here is a the code for the svg I found in the internet, maybe helps you see how they did it.
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"> <g stroke="none" fill="none"> <g> <circle fill="#F0F0F0" cx="256" cy="256" r="256" /> <g transform="translate(8.000000, 8.000000)" fill="#0052B4"> <path d="M44.92,92.142 C24.811,118.305 9.648,148.46 0.819,181.219 L133.997,181.219 L44.92,92.142 Z" /> <path d="M495.181,181.219 C486.352,148.461 471.188,118.306 451.08,92.143 L362.005,181.219 L495.181,181.219 Z" /> <path d="M0.819,314.784 C9.649,347.542 24.812,377.697 44.92,403.859 L133.994,314.784 L0.819,314.784 Z" /> <path d="M403.858,44.921 C377.695,24.812 347.541,9.649 314.782,0.819 L314.782,133.996 L403.858,44.921 Z" /> <path d="M92.142,451.079 C118.305,471.188 148.46,486.351 181.218,495.181 L181.218,362.005 L92.142,451.079 Z" /> <path d="M181.217,0.819 C148.459,9.649 118.304,24.812 92.142,44.92 L181.217,133.995 L181.217,0.819 Z" /> <path d="M314.783,495.181 C347.541,486.351 377.696,471.188 403.858,451.08 L314.783,362.005 L314.783,495.181 Z" /> <path d="M362.005,314.784 L451.08,403.86 C471.188,377.698 486.352,347.542 495.181,314.784 L362.005,314.784 Z" /> </g> <g fill="#D80027"> <path d="M509.833,222.609 L289.393,222.609 L289.392,222.609 L289.392,2.167 C278.461,0.744 267.317,0 256,0 C244.681,0 233.539,0.744 222.609,2.167 L222.609,222.607 L222.609,222.608 L2.167,222.608 C0.744,233.539 0,244.683 0,256 C0,267.319 0.744,278.461 2.167,289.391 L222.607,289.391 L222.608,289.391 L222.608,509.833 C233.539,511.256 244.681,512 256,512 C267.317,512 278.461,511.257 289.391,509.833 L289.391,289.393 L289.391,289.392 L509.833,289.392 C511.256,278.461 512,267.319 512,256 C512,244.683 511.256,233.539 509.833,222.609 Z" /> <path d="M322.783,322.783 L437.019,437.02 C442.273,431.768 447.285,426.277 452.067,420.585 L354.265,322.783 L322.783,322.783 Z" /> <path d="M189.217,322.784 L189.215,322.784 L74.98,437.019 C80.232,442.273 85.723,447.285 91.415,452.067 L189.217,354.263 L189.217,322.784 Z" /> <path d="M189.217,189.219 L189.217,189.217 L74.981,74.98 C69.727,80.232 64.715,85.723 59.933,91.415 L157.736,189.218 L189.217,189.219 Z" /> <path d="M322.783,189.219 L437.02,74.981 C431.768,69.727 426.277,64.715 420.585,59.934 L322.783,157.737 L322.783,189.219 Z" /> </g> </g> </g> </svg>

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

[gsgou]

Same issue with the rendering of SVGs with the popular skia framework.
mono/SkiaSharp#2220

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

this renders

while this does not

[gsgou]

@HatScripts as mentioned here #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]

@gsgou I've reverted back to using mask instead of border-radius as of v2.6.0 (07324c2), so this issue should now be fixed.

[gsgou]

Tks a lot for this 👌