Create square-flags directory and a script to generate them #51
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Also add a gallery of square flags (rendered here).
Background
In commit db685c5, the strategy used to make the flags circular was changed from a
<mask>
to aborder-radius
style attribute.I assumed this would allow users to dynamically change the shape of the flags using just CSS to edit the border radius (perhaps even animating it!).
However, it doesn't seem to be possible to change the border radius of SVG files at embed time in an HTML file. (Expand this for details of what I tried.)
So I went ahead and generated square versions of the flags (which are simply the same files without the
border-radius
style hardcoded into the SVG), tucked into a separate directory, so that people can use them and apply theborder-radius
themselves. So doing e.g.would yield:
I've tested these square icons, and changing the
border-radius
via CSS now properly applies to all four methods of embedding the images (<svg>
,<img>
,<object>
and<embed>
)! 🎉If this PR is accepted, we would support users to generate all sorts of extra shapes, like e.g. the rounded square look (
border-radius: 25%
) hinted here.