strange spaceing under svg in html

Question

I have svg image inside achor:

<a href="/firm-profilepl/homepl/indexpl" style="
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: red;
    display: block;
    height: 100%;
">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" style="background: #FFF"><path d="M497.913,497.913c-18.782,18.782-49.225,18.782-68.008,0l-84.862-84.863c-34.889,22.382-76.13,35.717-120.659,35.717  C100.469,448.767,0,348.312,0,224.383S100.469,0,224.384,0c123.931,0,224.384,100.452,224.384,224.383  c0,44.514-13.352,85.771-35.718,120.676l84.863,84.863C516.695,448.704,516.695,479.131,497.913,497.913z M224.384,64.109  c-88.511,0-160.274,71.747-160.274,160.273c0,88.526,71.764,160.274,160.274,160.274c88.525,0,160.273-71.748,160.273-160.274  C384.657,135.856,312.909,64.109,224.384,64.109z"/></svg>
</a>

There is some additional space added under svg: https://i.stack.imgur.com/uG1eV.png

How to get rid of it?

Because of the ```path``` element it is happening. Inspect that. — aavrug, Apr 10 '17 at 07:05

score 0 · Answer 1 · answered Apr 10 '17 at 07:07

by default every html element take some garbase css, to removing this just use 'display:block' in SVG tag.

<a href="/firm-profilepl/homepl/indexpl" style="
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: red;
    display: block;
    height: 100%;
">
  <svg style="display:block" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" style="background: #FFF"><path d="M497.913,497.913c-18.782,18.782-49.225,18.782-68.008,0l-84.862-84.863c-34.889,22.382-76.13,35.717-120.659,35.717  C100.469,448.767,0,348.312,0,224.383S100.469,0,224.384,0c123.931,0,224.384,100.452,224.384,224.383  c0,44.514-13.352,85.771-35.718,120.676l84.863,84.863C516.695,448.704,516.695,479.131,497.913,497.913z M224.384,64.109  c-88.511,0-160.274,71.747-160.274,160.273c0,88.526,71.764,160.274,160.274,160.274c88.525,0,160.273-71.748,160.273-160.274  C384.657,135.856,312.909,64.109,224.384,64.109z"/></svg>
</a>

score 0 · Accepted Answer · edited May 23 '17 at 12:17

You can visit this link to know why img tag always has a white space at bottom.

In this case, just add style="display:block;overflow:hidden;background:white" attribute to your svg tag.

<a href="/firm-profilepl/homepl/indexpl" style="
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: red;
    display: block;
    height: 100%;
">
  <svg style="display:block;overflow:hidden;background:white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" style="background: #FFF"><path d="M497.913,497.913c-18.782,18.782-49.225,18.782-68.008,0l-84.862-84.863c-34.889,22.382-76.13,35.717-120.659,35.717  C100.469,448.767,0,348.312,0,224.383S100.469,0,224.384,0c123.931,0,224.384,100.452,224.384,224.383  c0,44.514-13.352,85.771-35.718,120.676l84.863,84.863C516.695,448.704,516.695,479.131,497.913,497.913z M224.384,64.109  c-88.511,0-160.274,71.747-160.274,160.273c0,88.526,71.764,160.274,160.274,160.274c88.525,0,160.273-71.748,160.273-160.274  C384.657,135.856,312.909,64.109,224.384,64.109z"/></svg>
</a>

no need to put `overflow & background` in svg tag, only `display: block` will work here — Super User, Apr 10 '17 at 07:10
Thanks, worked as u pointed. Red back is only for problem illustration propose so display:block is enough in this case. — IT Man, Apr 10 '17 at 07:19

strange spaceing under svg in html

2 Answers2