Excess white space on SVG graphic

codeispoetry · December 18, 2018, 9:08am

Since the question is concerned with the same link. so I am posting it here. I hope I am not violating anything. If I do then please let me know I will post in a new thread.

This is the svg code:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 155.139 155.139" style="enable-background:new 0 0 155.139 155.139; border: 2px solid red;" xml:space="preserve" width="250px" height="250px" class="">
	<g transform="matrix(0.0887325 0 0 0.0887325 70.6866 75.6866)">
		<g>
	<path id="f_1_" d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184   c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452   v20.341H37.29v27.585h23.814v70.761H89.584z" data-original="#010002" class="active-path" data-old_color="#4267b2" fill="#4267b2"/>
		</g>
	</g>
</svg>

Why is this SVG having a border?

http://html.trafficopedia.com/RF%202/

ronpat · December 18, 2018, 9:42am

I don’t know anything about svgs but I can read CSS fairly well, so let me take a guess…

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 155.139 155.139"
     style="enable-background:new 0 0 155.139 155.139;  border: 2px solid red;"
     xml:space="preserve" width="250px" height="250px" class="">
    <g transform="matrix(0.0887325 0 0 0.0887325 70.6866 75.6866)">
        <g>
	    <path id="f_1_" d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184   c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452   v20.341H37.29v27.585h23.814v70.761H89.584z" data-original="#010002" class="active-path" data-old_color="#4267b2" fill="#4267b2"/>
        </g>
    </g>
</svg>

Do you see anything like this in the code for the svg?:

style="border: 2px solid red;"

Maybe this is the red border? Try deleting the border property or overriding it and let us know what happens.

codeispoetry · December 18, 2018, 12:40pm

That make no difference. I have created the border only for other readers here. let me un do that still the same.
It is quite possible that its design is like that only.

TechnoBear · December 18, 2018, 12:52pm

In the link which you posted above, I do not see any red border.

no-red-border

codeispoetry · December 18, 2018, 1:03pm

I have deleted on the request of @ronpat

You can see it there again →

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 155.139 155.139" style="enable-background:new 0 0 155.139 155.139; border: 2px solid red;" xml:space="preserve" width="250px" height="250px" class="">
	<g transform="matrix(0.0887325 0 0 0.0887325 70.6866 75.6866)">
		<g>
	<path id="f_1_" d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184   c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452   v20.341H37.29v27.585h23.814v70.761H89.584z" data-original="#010002" class="active-path" data-old_color="#4267b2" fill="#4267b2"/>
		</g>
	</g>
</svg>

TechnoBear · December 18, 2018, 1:09pm

OK, sorry, but I don’t understand your question. If you add a red border to the SVG, it shows a red border on the site. If you remove the red border, it doesn’t show one. What is the puzzle?

(I’m also going to split this to a new topic, because it has nothing to do with flex columns.)

codeispoetry · December 18, 2018, 1:43pm

Puzzle is there is so much unwanted space around the facebook icon, which is not needed.

TechnoBear · December 18, 2018, 1:52pm

OK - that’s not the question you originally asked.

You can see why I was puzzled.

You have set your image dimensions to 250px for both width and height, which explains why it is displaying at that size.

Ray.H · December 18, 2018, 1:53pm

I believe that extra space is from your viewbox size in the svg

viewBox="0 0 155.139 155.139"

That’s exactly what shows at your link, 155px x 155px box with a smal “f” in the center

TechnoBear · December 18, 2018, 1:57pm

That’s interesting. Firefox gives the image dimensions as 250px, which matches the stated dimensions in the SVG.

Ray.H · December 18, 2018, 2:04pm

It’s scaling up to 250px, my mistake

It’s an SVG ( Scalable Vector Graphic) so it will scale if not controlled in the CSS.
The problem is still the extra space built into the image

Ray.H · December 18, 2018, 2:07pm

If you look at the image here and then view page source you will also find dimensions set on the svg…

xml:space="preserve" width="250px" height="250px" class="">

Those dimensions have scaled the viewbox up

The image needs to be edited to remove the extra space

TechnoBear · December 18, 2018, 2:09pm

Yes - that was what I meant:

Ray.H · December 18, 2018, 2:30pm

Here’s one I just pulled down from a google search. It has the extra space removed from around the “f”.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
div {text-align:center}

</style>

</head>
<body>

<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 224 224" width="48px" height="48px" style="border: 2px solid red;">
  <g stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal">
    <path d="M0,224v-224h224v224z" fill="none"/>
    <g fill="#3498db">
      <path d="M163.56667,84h-32.9v-18.66667c0,-9.632 0.784,-15.69867 14.588,-15.69867h17.43467v-29.68c-8.484,-0.87733 -17.01467,-1.30667 -25.55467,-1.288c-25.32133,0 -43.80133,15.46533 -43.80133,43.85733v21.476h-28v37.33333l28,-0.00933v84.00933h37.33333v-84.028l28.616,-0.00933z"/>
    </g>
  </g>
</svg>
</div>

</body>
</html>

fbook

codeispoetry · December 18, 2018, 7:32pm

That means issue was in image.

codeispoetry · December 19, 2018, 4:30pm

How can a font create a design/padding issue →

As soon as I implement this →
font-family: 'Source Sans Pro', sans-serif;

The issue is created. whats the solution?

N.B. Please open the GIF in new window.

Ray.H · December 19, 2018, 6:12pm

Well it looks like the font is shorter and wider with that font family.
It has nothing to do with padding, it is the font that changes the size.

Yes

PaulOB · December 19, 2018, 6:14pm

It’s because the font is a different size and takes up more room.

The span is an inline element that does not take dimensions (although you told it to be 100px !!) and therefore when you add a bigger font the content area changes.

If you want them exact you can force the issue like this.

.social-share span{
    display:inline-block;
    padding:0 10px;
    line-height:41px;
    height:41px;
}

Of course if the font exceeds the allocated height it will overlap but you would need to increase it quite a bit before it did.

You could create non-height dependent elements that match height using the flexbox approach where equal height can be guaranteed no matter the size of either element.
e.g.

.social-share >  div,
.social-share a {
    display:flex;
}
.social-share span{
    padding:10px;
    height:auto;
    width:auto;
    display:flex;  
    align-items: center; 
}

system · March 21, 2019, 1:14am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.