How to Get Rid of Extra Space Below Svg in Div Element

How to get rid of extra space below svg in div element

You need display: block; on your svg.

<svg style="display: block;"></svg>

This is because inline-block elements (like <svg> and <img>) sit on the text baseline. The extra space you are seeing is the space left to accommodate character descenders (the tail on 'y', 'g' etc).

You can also use vertical-align:top if you need to keep it inline or inline-block

Why is there extra white space in this svg?

The viewBox area has a lot of blank space in it at the top. Adjusting the viewBox dimensions can fix that...

<div class="grey-curve-svg">  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 230 1440 320">    <path fill="#0099ff"           fill-opacity="1"           style="--darkreader-inline-fill:#007acc;"            data-darkreader-inline-fill=""           d="M0,320L120,298.7C240,277,480,235,720,234.7C960,235,1201,277,1320,298.7L1440,320L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"           ></path>  </svg></div>

How to remove spacing between div and svg and gap under svg

You can apply display: block (or anything not-inline) on SVG to remove gap.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

svg {
  display: block;
}

.section {
    background: rgb(43, 43, 43);
    margin: 0;
}

.section .wrapper {
    height: 330px;
    display: flex;
    flex-direction: row;
    padding: 40px 50px;
}

.section .left {
    display: flex;
}

.section .right {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: right;
}

.section .title {
    color: white;
    font-weight: 600;
    font-size: 80px;
    margin-bottom: 20px;
}

.section .description {
    color: white;
    margin-bottom: 50px;
}

.section .fa-solid {
    color: white;
}

svg.top {
    display: block;
}

svg.bottom {
    display: block;
}

<div class="top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="rgb(43, 43, 43)" fill-opacity="1" d="M0,128L80,149.3C160,171,320,213,480,202.7C640,192,800,128,960,90.7C1120,53,1280,43,1360,37.3L1440,32L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
  </svg>
</div>
<div class="section" id="section1">
  <div class="wrapper">
    <div class="left">
      <i class="fa-solid fa-language fa-10x"></i>
    </div>
    <div class="right">
      <h1 class="title">Title</h1>
      <p class="description">Description</p>
    </div>
  </div>
  <div class="bottom">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
      <path fill="#fff" fill-opacity="1" d="M0,128L80,149.3C160,171,320,213,480,202.7C640,192,800,128,960,90.7C1120,53,1280,43,1360,37.3L1440,32L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
    </svg>
  </div>
</div>

SVG element has too much extra space

When an inline replaced element has no width nor height explicitely set, it will default to 300px * 150px. (Actual rules are specified here)

Are concerned by this rule, <iframe> <video> <canvas> and <svg>.

To avoid that, set a width or height on your <svg> (eitehr through its attributes, or through CSS.

svg {  border: 1px solid;  width: 150px;  height: 150px;}

<svg viewBox="0 0 40 40">    <polygon points="0,0 20,5 0,10" style="fill: black; stroke: black;" />    <polygon points="20,0 40,5 20,10" style="fill: black; stroke: black;" /></svg>

white gap space with a svg

I assumed that you have no margins set on the h1 element.

Just add display: block; to the svg elements. It should do the trick.

Centering and removing white space from a SVG in an enclosing div

For that to happen, you need to do two things:

Make sure that your viewBox is correct. It needs to match the dimensions of your <path>. It currently doesn't.
Add the following attribute to your SVG to turn off the automatic aspect-ratio-preserving scaling that SVG does.
```
preserveAspectRatio="none"
```

If we check the bounding box of your path, we get the values:

x: 2.600
y: 2.895
width: 2984.740
height: 1650.893

So that is what your viewBox needs to be set to, if you want the path to touch all four sides of the SVG's parent container.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.example {
    width: 100%;
    height: 100vh;  
}

svg {
    width: 100%;
    height: 100%;  
}

.section-two {
    width: 100%;
    height: 100vh;
    background-color: black;
}

<div class="example">
    <svg viewbox="2.6 2.9 2984.7 1650.9" preserveAspectRatio="none">
        <path d="M2987.34,2.895l-2984.74,-0l0,1224.16l671.731,426.733l2313,-426.733l0,-1224.16Z" style="fill:#f8be46;"/>
    </svg>
</div>

<div class="section-two">

</div>

SVG set to 100% height causes overflow in div. Why?

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        svg {
            width: 100%;
            height: 100%; /* overflows */
            /* height: 99%; does not overflow*/
            display:block;
           /* margin-bottom:-5px;  will work also*/
        }

        div {
            background-color: aliceblue;
            width: 100vw;
            height: 100vh;
        }

<div id="chart-area">
    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="1" fill="yellow" />
    </svg>
    </div>

How to Get Rid of Extra Space Below Svg in Div Element