search

hampusborgos / country-flags

SVG and PNG renders of all countries' flags.
3.45k stars 978 forks source link

Undesired hairline on some svgs #101

Open elrumordelaluz opened 3 years ago

elrumordelaluz commented 3 years ago

Probably due to a subpixel rendering related stuff, some flags renders with a hairline of the path which is placed on the back.

https://user-images.githubusercontent.com/784056/108232415-0bd22100-7143-11eb-9257-e45624948177.mp4

Here is the pen to play around.

As suggested by @aarongarciah a solution could be to use the shapes to fill only the space needed instead of fill the whole background of the svg.

I found a file with something like a list of sources for the flags, but seems that the base to create pngs is the /svgs folder, could help to make PRs to those flags that have the problem described above?

wyattoday commented 3 years ago

That's a interesting solution, and we'll happily accept pull requests for flags that "fix" this issue.

The real issue, however, is the rendering engines browsers use. Should browsers render things that are under other things? No. Do they? Yes, obviously, because it's easier to just render everything "as is" and scale it.

So, this is a bug in browsers, not in the SVG itself.