Remove Empty Space Below SVG

svg-remove-bottom=space

Your SVG image can leave a very small unwanted space at the bottom. In this tutorial we will learn how to remove this unwanted space from the bottom of SVG image or path. We can easily fix / remove this white space using CSS.

SVG Shape

Empty space at the bottom can be created either by SVG image or by SVG path code. Let’s say we have this SVG shape which is leaving a very small white space at the bottom.

1
2
3
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#00cba9" fill-opacity="1" d="M0,128L48,133.3C96,139,192,149,288,170.7C384,192,480,224,576,202.7C672,181,768,107,864,106.7C960,107,1056,181,1152,186.7C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>

Solution

We can easily fix this using one line of CSS code. Just add display: block; CSS property to your SVG image or path.

1
2
3
<div style="display: block;">
  <img src="path-to-image/name.svg" alt="image" />
</div>
1
<img style="display: block;" src="path-to-image/name.svg" alt="image" />
1
2
3
4
5
<div style="display: block;">
  <svg xmlns="http://www.w3.org/2000/svg">
    -- svg path codes --
  </svg>
</div>
1
2
3
<svg style="display: block;" xmlns="http://www.w3.org/2000/svg">
  -- svg path codes --
</svg>

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *