I'm trying to use this set of flags on my website:

https://lipis.github.io/flag-icon-css/

They're not perfect though, so I thought I'd help out and make some contributions to the project.

Since I live in the UK, this one stood out to me immediately:

https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg

Here's the code:

<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gb" viewBox="0 0 640 480">
  <defs>
    <clipPath id="a">
      <path fill-opacity=".7" d="M-85.3 0h682.6v512H-85.3z"/>
    </clipPath>
  </defs>
  <g clip-path="url(#a)" transform="translate(80) scale(.94)">
    <g stroke-width="1pt">
      <path fill="#006" d="M-256 0H768v512H-256z"/>
      <path fill="#fff" d="M-256 0v57.2L653.5 512H768v-57.2L-141.5 0H-256zM768 0v57.2L-141.5 512H-256v-57.2L653.5 0H768z"/>
      <path fill="#fff" d="M170.7 0v512h170.6V0H170.7zM-256 170.7v170.6H768V170.7H-256z"/>
      <path fill="#c00" d="M-256 204.8v102.4H768V204.8H-256zM204.8 0v512h102.4V0H204.8zM-256 512L85.3 341.3h76.4L-179.7 512H-256zm0-512L85.3 170.7H9L-256 38.2V0zm606.4 170.7L691.7 0H768L426.7 170.7h-76.3zM768 512L426.7 341.3H503l265 132.5V512z"/>
    </g>
  </g>
</svg>

I understand why he's cropped it (to keep all flags the same aspect ratio). I've fixed the colours already, but what I can't seem to do is shift that thin border that you can see around the edge of the image (specifically on the white parts).

Can anyone educate me/help? Is it in fact just a rendering bug/artefact in Chrome? Edge doesn't seem to show it, for example..?

  • Have you tried opening the file in a graphic application? That would make it easier to figure out how the image is constructed. – Luciano Oct 18 at 12:13
  • That SVG looks quite uggly to me. Using paths for rectangles, using a clip-path instead of just setting the coordinates correctly, etc. – DarkWiiPlayer Oct 18 at 12:40
up vote 8 down vote accepted

Problem

The thin gray border is not a thin gray border, it's the blue shape, a full rectangle, under the white shape. Editing the .svg in Codepen and hiding the blue part of the code, the thin border disappears

<!--<path fill="#006" d="M-256 0H768v512H-256z"/>-->

Codepen

Solution

Now the SVG is a blue rectangle below and the white and red pieces on top. It should be a white rectangle below and the red and blue pieces on top.

Flag

  • The frustrating thing is if you remove the clipPath you get the full-width flag, with, you guessed it, still a thin border. So given that the clip path clips both the white and the blue bit evenly, that means this has to be a rendering bug in Chrome, I think? – Codemonkey Oct 18 at 11:27
  • 2
    Answer updated with a solution – Danielillo Oct 18 at 11:31
  • 1
    Impressively quick work, thank you! What bit of software would you recommend I use for working on these flag files? I've got Inkscape installed, but I don't know if there's much better options. – Codemonkey Oct 18 at 11:41
  • 2
    I think Inkscape is a valid option, I usually work with Illustrator. But I guess for this kind of jobs both are similar. – Danielillo Oct 18 at 11:42
  • 1
    @Danielillo There's also Affinity Designer. – Lightness Races in Orbit Oct 18 at 18:12

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.