How can I remove the thin grey border on this SVG UK union flag?

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP











up vote
2
down vote

favorite












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..?






svg







share|improve this question





















  • Have you tried opening the file in a graphic application? That would make it easier to figure out how the image is constructed.
    – Luciano
    3 hours ago










  • That SVG looks quite uggly to me. Using paths for rectangles, using a clip-path instead of just setting the coordinates correctly, etc.
    – DarkWiiPlayer
    3 hours ago














up vote
2
down vote

favorite












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..?






svg







share|improve this question





















  • Have you tried opening the file in a graphic application? That would make it easier to figure out how the image is constructed.
    – Luciano
    3 hours ago










  • That SVG looks quite uggly to me. Using paths for rectangles, using a clip-path instead of just setting the coordinates correctly, etc.
    – DarkWiiPlayer
    3 hours ago












up vote
2
down vote

favorite









up vote
2
down vote

favorite











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..?






svg







share|improve this question













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..?






svg




svg






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked 4 hours ago









Codemonkey

232125




232125











  • Have you tried opening the file in a graphic application? That would make it easier to figure out how the image is constructed.
    – Luciano
    3 hours ago










  • That SVG looks quite uggly to me. Using paths for rectangles, using a clip-path instead of just setting the coordinates correctly, etc.
    – DarkWiiPlayer
    3 hours ago
















  • Have you tried opening the file in a graphic application? That would make it easier to figure out how the image is constructed.
    – Luciano
    3 hours ago










  • That SVG looks quite uggly to me. Using paths for rectangles, using a clip-path instead of just setting the coordinates correctly, etc.
    – DarkWiiPlayer
    3 hours ago















Have you tried opening the file in a graphic application? That would make it easier to figure out how the image is constructed.
– Luciano
3 hours ago




Have you tried opening the file in a graphic application? That would make it easier to figure out how the image is constructed.
– Luciano
3 hours ago












That SVG looks quite uggly to me. Using paths for rectangles, using a clip-path instead of just setting the coordinates correctly, etc.
– DarkWiiPlayer
3 hours ago




That SVG looks quite uggly to me. Using paths for rectangles, using a clip-path instead of just setting the coordinates correctly, etc.
– DarkWiiPlayer
3 hours ago










1 Answer
1






active

oldest

votes

















up vote
4
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






share|improve this answer






















  • 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
    4 hours ago






  • 2




    Answer updated with a solution
    – Danielillo
    4 hours ago






  • 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
    4 hours ago






  • 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
    4 hours ago










Your Answer







StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "174"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













 

draft saved


draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgraphicdesign.stackexchange.com%2fquestions%2f116188%2fhow-can-i-remove-the-thin-grey-border-on-this-svg-uk-union-flag%23new-answer', 'question_page');

);

Post as a guest

















1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
4
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






share|improve this answer






















  • 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
    4 hours ago






  • 2




    Answer updated with a solution
    – Danielillo
    4 hours ago






  • 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
    4 hours ago






  • 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
    4 hours ago














up vote
4
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






share|improve this answer






















  • 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
    4 hours ago






  • 2




    Answer updated with a solution
    – Danielillo
    4 hours ago






  • 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
    4 hours ago






  • 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
    4 hours ago












up vote
4
down vote



accepted







up vote
4
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






share|improve this answer














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







share|improve this answer














share|improve this answer



share|improve this answer








edited 2 hours ago

























answered 4 hours ago









Danielillo

15.3k12257




15.3k12257











  • 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
    4 hours ago






  • 2




    Answer updated with a solution
    – Danielillo
    4 hours ago






  • 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
    4 hours ago






  • 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
    4 hours ago
















  • 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
    4 hours ago






  • 2




    Answer updated with a solution
    – Danielillo
    4 hours ago






  • 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
    4 hours ago






  • 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
    4 hours ago















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
4 hours ago




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
4 hours ago




2




2




Answer updated with a solution
– Danielillo
4 hours ago




Answer updated with a solution
– Danielillo
4 hours ago




1




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
4 hours ago




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
4 hours ago




2




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
4 hours ago




I think Inkscape is a valid option, I usually work with Illustrator. But I guess for this kind of jobs both are similar.
– Danielillo
4 hours ago

















 

draft saved


draft discarded















































 


draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgraphicdesign.stackexchange.com%2fquestions%2f116188%2fhow-can-i-remove-the-thin-grey-border-on-this-svg-uk-union-flag%23new-answer', 'question_page');

);

Post as a guest
































































Comments

Post a Comment

Popular posts from this blog

What does second last employer means? [closed]

Image
Clash Royale CLAN TAG #URR8PPP .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0; up vote -3 down vote favorite Say, for example I have worked in the following companies, Company A => 2010 - 2011 Company B => 2011 - 2012 Company C => 2012 - Till Date Company D => Have offer Now assume Company D is asking to submit documents from my second last employer. So from the list of companies given, which company would be qualified as second last employer? software-industry employer share | improve this question asked Aug 10 '14 at 5:16 Rajaprabhu Aravindasamy 559 1 6 13 closed as off-topic by Jim G., jmort253 ♦ Aug 11 '14 at 1:58 This question appears to be off-topic. The users who voted to close gave this specific reason: "Questions seeking advice on company-specific regulations, agreements, or policies should be directed to your manager or HR department. Questions that address...
Read more

Installing NextGIS Connect into QGIS 3?

Image
Clash Royale CLAN TAG #URR8PPP .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0; up vote 1 down vote favorite Just acquired free version of NEXTGIS and trying to install the plugin for QGIS. It tells me it was not designed for version 3 of QGIS. How do I set up the QGIS-NEXTGIS interface then? qgis qgis-plugins nextgis share | improve this question edited 3 hours ago PolyGeo ♦ 51.9k 17 77 233 asked 4 hours ago IanGS 16 4 New contributor IanGS is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. add a comment  |  up vote 1 down vote favorite Just acquired free version of NEXTGIS and trying to install the plugin for QGIS. It tells me it was not designed for version 3 of QGIS. How do I set up the QGIS-NEXTGIS interface then? qgis qgis-plugin...
Read more

One-line joke

A one-liner is a joke that is delivered in a single line. A good one-liner is said to be pithy - concise and meaningful. [1] Comedians and actors use this comedic method as part of their act, e.g. Jimmy Carr, Tommy Cooper, Rodney Dangerfield, Norm Macdonald, Ken Dodd, Stewart Francis, Zach Galifianakis, Mitch Hedberg, Anthony Jeselnik, Milton Jones, Shappi Khorsandi, Jay London, Mark Linn-Baker, Demetri Martin, Groucho Marx, Dan Mintz, Emo Philips, Tim Vine, Steven Wright and Henny Youngman and Arnold Schwarzenegger. [ citation needed ] Many fictional characters are also known to deliver one-liners, including James Bond, who usually includes pithy and laconic quips after disposing of a villain. [ citation needed ] Examples "A baby seal walks into a club." "A dyslexic man walks into a bra." (Anonymous) "There are three types of people, those who can count and those who can't." "Venison's dear, isn't it?" (Jimmy Carr) "An escala...
Read more