Mixing
How can I remove the thin grey border on this SVG UK union flag?
Clash 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
asked 4 hours ago
Codemonkey
232125
add a comment |Â
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
asked 4 hours ago
Codemonkey
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. Usingpaths for rectangles, using aclip-pathinstead of just setting the coordinates correctly, etc.
– DarkWiiPlayer
3 hours ago
add a comment |Â
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
asked 4 hours ago
Codemonkey
232125
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
asked 4 hours ago
Codemonkey
232125
asked 4 hours ago
Codemonkey
232125
asked 4 hours ago
Codemonkey
232125
asked 4 hours ago
Codemonkey
232125
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. Usingpaths for rectangles, using aclip-pathinstead of just setting the coordinates correctly, etc.
– DarkWiiPlayer
3 hours ago
add a comment |Â
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. Usingpaths for rectangles, using aclip-pathinstead 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
add a comment |Â
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"/>-->
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.
answered 4 hours ago
Danielillo
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
add a comment |Â
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"/>-->
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.
answered 4 hours ago
Danielillo
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
add a comment |Â
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"/>-->
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.
answered 4 hours ago
Danielillo
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
add a comment |Â
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"/>-->
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.
answered 4 hours ago
Danielillo
15.3k12257
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"/>-->
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.
answered 4 hours ago
Danielillo
15.3k12257
edited 2 hours ago
answered 4 hours ago
Danielillo
15.3k12257
answered 4 hours ago
Danielillo
15.3k12257
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
add a comment |Â
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
add a comment |Â
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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 aclip-pathinstead of just setting the coordinates correctly, etc.– DarkWiiPlayer
3 hours ago