CODEWITHSUNDEEP
htmlcsssvg
MINJA KIM
MINJA KIM

Reputation: 1028

Small space between svg and path

This is my path tag size (g tag is same size)

enter image description here

And this is my SVG tag size

enter image description here

There is space between them

These are the inline attributes...

<svg preserveAspectRatio="none" class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-baseline="central" version="1.1" data-tip="false" viewBox="0 0 64 64">
<g>
<path d="M56.562,6.875 L3.437,6.875 C1.539,6.875 -0.000,5.336 -0.000,3.437 C-0.000,1.539 1.539,-0.000 3.437,-0.000 L56.562,-0.000 C58.461,-0.000 60.000,1.539 60.000,3.437 C60.000,5.336 58.461,6.875 56.562,6.875 ZM3.437,24.062 L32.656,24.062 C34.555,24.062 36.094,25.601 36.094,27.500 C36.094,29.398 34.555,30.937 32.656,30.937 L3.437,30.937 C1.539,30.937 -0.000,29.398 -0.000,27.500 C-0.000,25.601 1.539,24.062 3.437,24.062 ZM43.437,30.937 C41.539,30.937 40.000,29.398 40.000,27.500 C40.000,25.601 41.539,24.062 43.437,24.062 L43.562,24.062 C45.461,24.062 47.000,25.601 47.000,27.500 C47.000,29.398 45.461,30.937 43.562,30.937 L43.437,30.937 ZM3.437,47.125 L56.562,47.125 C58.461,47.125 60.000,48.664 60.000,50.562 C60.000,52.461 58.461,54.000 56.562,54.000 L3.437,54.000 C1.539,54.000 -0.000,52.461 -0.000,50.562 C-0.000,48.664 1.539,47.125 3.437,47.125 Z">
</path>
</g>
</svg>

This is css for svg

{
    width: 1.8rem;
    height: 1.8rem;
}

I am trying to figure out why this space exists.

https://codepen.io/colton123/pen/qBEGwLL

Upvotes: 0

Views: 1903

Answers (2)

alirizvi19
alirizvi19

Reputation: 167

Hello please see this and solve your issue of SVG. Thanks

svg {
  width: 2rem;
  height: auto;
}
<svg class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-baseline="central" version="1.1" data-tip="false" viewBox="0 0 62 56"><g><path d="M56.562,6.875 L3.437,6.875 C1.539,6.875 -0.000,5.336 -0.000,3.437 C-0.000,1.539 1.539,-0.000 3.437,-0.000 L56.562,-0.000 C58.461,-0.000 60.000,1.539 60.000,3.437 C60.000,5.336 58.461,6.875 56.562,6.875 ZM3.437,24.062 L32.656,24.062 C34.555,24.062 36.094,25.601 36.094,27.500 C36.094,29.398 34.555,30.937 32.656,30.937 L3.437,30.937 C1.539,30.937 -0.000,29.398 -0.000,27.500 C-0.000,25.601 1.539,24.062 3.437,24.062 ZM43.437,30.937 C41.539,30.937 40.000,29.398 40.000,27.500 C40.000,25.601 41.539,24.062 43.437,24.062 L43.562,24.062 C45.461,24.062 47.000,25.601 47.000,27.500 C47.000,29.398 45.461,30.937 43.562,30.937 L43.437,30.937 ZM3.437,47.125 L56.562,47.125 C58.461,47.125 60.000,48.664 60.000,50.562 C60.000,52.461 58.461,54.000 56.562,54.000 L3.437,54.000 C1.539,54.000 -0.000,52.461 -0.000,50.562 C-0.000,48.664 1.539,47.125 3.437,47.125 Z"></path></g></svg>

Your should be viewBox="0 0 62 54" instead of viewBox="0 0 62 62"

Upvotes: 1

Mohammed Ibrahim
Mohammed Ibrahim

Reputation: 418

Two things: Your icon is not a perfect square, and there is a gap in the icon itself on the right side.

First, with the <svg> set to 1.8rem (32px in CodePen) the <g> is 30x27px. If you changed the height and width of <svg> to 3rem (48px in CodePen) the <g> would be 45x40.5px. Since you are forcing <svg> into a square, there will be a gap.

Second, the width of <g> should match the width of <svg>, but it is always 93.75% of the width. This means there is a 6.25% gap in the icon itself.

Upvotes: 2

Related Questions