CODEWITHSUNDEEP
htmlcsssvg
Pat8
Pat8

Reputation: 1036

Why is there extra white space in this svg?

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:

<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>

svg

Upvotes: 5

Views: 2751

Answers (3)

Happy John
Happy John

Reputation: 67

Previous answers said to alter the viewBox, yet simply viewbox="0 0 1 1" worked for me as my child graphics superseded those dimensions.

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124059

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>

Upvotes: 2

KyleMit
KyleMit

Reputation: 29927

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

<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>

Upvotes: 3

Related Questions