Why is there extra white space in this svg?

Profile picture for Pat8
Pat8

I how do I remove the extra whitespace in this svg? When I inspect the blue curve is is the path and the highlighted blue is the entire svg. I don't understand I tried adjusting the view box and a couple different properties it didn't work?

The .grey-curve-svg is just an empty div with no styles.

Here is the svg:

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> 
<div class="grey-curve-svg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 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>
<!-- end snippet -->

svg

The viewBox determines the visible dimensions in the SVG.

Yours is 0 0 1440 320 (min-x, min-y, width and height). You can alter it to crop the contents of the svg. Something like viewBox="0 230 1440 100" looks like it fits better

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> 
<div class="grey-curve-svg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 230 1440 100">
    <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>
<!-- end snippet -->