How to trim the redundant part of SVG when having a path

I am trying to create a wavy SVG to separate the Hero section of the landing page and the other section. while doing so, I noticed SVG is showing much bigger than the path itself(which is the wave part). How can I remove the redundant whitespace parts below so that SVG is only of enough size that contains the wave? I have added a code snippet below with a red border to show the redundant white space below.

svg {
  border: 1px solid red;
}

<svg viewBox="0 0 500 500" background="red">
   <path d="M0,50 C100,150 250,0 500,70 L500,00 L0,0 Z"></path>
</svg>

Thank you!

Solution 1:

Just change the viewbox values

svg {
  border: 1px solid red;
}

<svg viewBox="0 40 500 70" background="red">
   <path d="M0,50 C100,150 250,0 500,70 L500,00 L0,0 Z"></path>
</svg>

How to trim the redundant part of SVG when having a path

Solution 1:

Related

Recent Posts