How do I remove the blank space in the svg file?

I created a waves png file using Haikei and it also created a blank space on top of it creating format issues. How do I remove it?

Here is the svg code for it:

<svg id="visual" viewBox="0 0 900 600" width="900" height="600" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  version="1.1">
  <path 
    d="M0 497L10 499.5C20 502 40 507 60 504.7C80 502.3 100 492.7 120 496.8C140 501 160 519 180 529.2C200 539.3 220 541.7 240 541.5C260 541.3 280 538.7 300 529.8C320 521 340 506 360 506.2C380 506.3 400 521.7 420 530.7C440 539.7 460 542.3 480 537.2C500 532 520 519 540 511.7C560 504.3 580 502.7 600 509C620 515.3 640 529.7 660 531.7C680 533.7 700 523.3 720 513.7C740 504 760 495 780 500.8C800 506.7 820 527.3 840 535.7C860 544 880 540 890 538L900 536L900 601L890 601C880 601 860 601 840 601C820 601 800 601 780 601C760 601 740 601 720 601C700 601 680 601 660 601C640 601 620 601 600 601C580 601 560 601 540 601C520 601 500 601 480 601C460 601 440 601 420 601C400 601 380 601 360 601C340 601 320 601 300 601C280 601 260 601 240 601C220 601 200 601 180 601C160 601 140 601 120 601C100 601 80 601 60 601C40 601 20 601 10 601L0 601Z"
    fill="#00b5f5" 
  />
  <path 
    d="M0 564L10 559.2C20 554.3 40 544.7 60 536.5C80 528.3 100 521.7 120 523.7C140 525.7 160 536.3 180 537.2C200 538 220 529 240 523.3C260 517.7 280 515.3 300 516.5C320 517.7 340 522.3 360 532.2C380 542 400 557 420 558.5C440 560 460 548 480 542.5C500 537 520 538 540 543.3C560 548.7 580 558.3 600 557C620 555.7 640 543.3 660 537.7C680 532 700 533 720 539.7C740 546.3 760 558.7 780 558.7C800 558.7 820 546.3 840 545C860 543.7 880 553.3 890 558.2L900 563L900 601L890 601C880 601 860 601 840 601C820 601 800 601 780 601C760 601 740 601 720 601C700 601 680 601 660 601C640 601 620 601 600 601C580 601 560 601 540 601C520 601 500 601 480 601C460 601 440 601 420 601C400 601 380 601 360 601C340 601 320 601 300 601C280 601 260 601 240 601C220 601 200 601 180 601C160 601 140 601 120 601C100 601 80 601 60 601C40 601 20 601 10 601L0 601Z"
    fill="#007ac4"
  />
  <path 
    d="M0 595L10 590.5C20 586 40 577 60 573.3C80 569.7 100 571.3 120 571.5C140 571.7 160 570.3 180 568.5C200 566.7 220 564.3 240 567.5C260 570.7 280 579.3 300 578.8C320 578.3 340 568.7 360 563.2C380 557.7 400 556.3 420 557.8C440 559.3 460 563.7 480 562C500 560.3 520 552.7 540 549.2C560 545.7 580 546.3 600 553.8C620 561.3 640 575.7 660 581.5C680 587.3 700 584.7 720 585.3C740 586 760 590 780 588.2C800 586.3 820 578.7 840 576.7C860 574.7 880 578.3 890 580.2L900 582L900 601L890 601C880 601 860 601 840 601C820 601 800 601 780 601C760 601 740 601 720 601C700 601 680 601 660 601C640 601 620 601 600 601C580 601 560 601 540 601C520 601 500 601 480 601C460 601 440 601 420 601C400 601 380 601 360 601C340 601 320 601 300 601C280 601 260 601 240 601C220 601 200 601 180 601C160 601 140 601 120 601C100 601 80 601 60 601C40 601 20 601 10 601L0 601Z"
    fill="#fff" 
  />
</svg>

I tried changing the view box but it didn't work, the image shrank out or proportion or it is disappearing. I tried to make it work with negative margin but the empty space wouldn't let me click a button below it.

Solution

The reason for the presence of free fields is incorrectly set parameters viewBox="0 0 900 600" and fixed canvas height SVG height="600"

To see how empty fields are located around SVG shapes, add a red border:

style="border 1px solid"

<svg 
  id="visual" 
  viewBox="0 0 900 600" 
  width="900" 
  height="600" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  version="1.1"
  style="border:1px solid red;"
>
 
  <path 
    d="M0 497L10 499.5C20 502 40 507 60 504.7C80 502.3 100 492.7 120 496.8C140 501 160 519 180 529.2C200 539.3 220 541.7 240 541.5C260 541.3 280 538.7 300 529.8C320 521 340 506 360 506.2C380 506.3 400 521.7 420 530.7C440 539.7 460 542.3 480 537.2C500 532 520 519 540 511.7C560 504.3 580 502.7 600 509C620 515.3 640 529.7 660 531.7C680 533.7 700 523.3 720 513.7C740 504 760 495 780 500.8C800 506.7 820 527.3 840 535.7C860 544 880 540 890 538L900 536L900 601L890 601C880 601 860 601 840 601C820 601 800 601 780 601C760 601 740 601 720 601C700 601 680 601 660 601C640 601 620 601 600 601C580 601 560 601 540 601C520 601 500 601 480 601C460 601 440 601 420 601C400 601 380 601 360 601C340 601 320 601 300 601C280 601 260 601 240 601C220 601 200 601 180 601C160 601 140 601 120 601C100 601 80 601 60 601C40 601 20 601 10 601L0 601Z"
    fill="#00b5f5" 
  />
  <path 
    d="M0 564L10 559.2C20 554.3 40 544.7 60 536.5C80 528.3 100 521.7 120 523.7C140 525.7 160 536.3 180 537.2C200 538 220 529 240 523.3C260 517.7 280 515.3 300 516.5C320 517.7 340 522.3 360 532.2C380 542 400 557 420 558.5C440 560 460 548 480 542.5C500 537 520 538 540 543.3C560 548.7 580 558.3 600 557C620 555.7 640 543.3 660 537.7C680 532 700 533 720 539.7C740 546.3 760 558.7 780 558.7C800 558.7 820 546.3 840 545C860 543.7 880 553.3 890 558.2L900 563L900 601L890 601C880 601 860 601 840 601C820 601 800 601 780 601C760 601 740 601 720 601C700 601 680 601 660 601C640 601 620 601 600 601C580 601 560 601 540 601C520 601 500 601 480 601C460 601 440 601 420 601C400 601 380 601 360 601C340 601 320 601 300 601C280 601 260 601 240 601C220 601 200 601 180 601C160 601 140 601 120 601C100 601 80 601 60 601C40 601 20 601 10 601L0 601Z"
    fill="#007ac4"
  />
  <path 
    d="M0 595L10 590.5C20 586 40 577 60 573.3C80 569.7 100 571.3 120 571.5C140 571.7 160 570.3 180 568.5C200 566.7 220 564.3 240 567.5C260 570.7 280 579.3 300 578.8C320 578.3 340 568.7 360 563.2C380 557.7 400 556.3 420 557.8C440 559.3 460 563.7 480 562C500 560.3 520 552.7 540 549.2C560 545.7 580 546.3 600 553.8C620 561.3 640 575.7 660 581.5C680 587.3 700 584.7 720 585.3C740 586 760 590 780 588.2C800 586.3 820 578.7 840 576.7C860 574.7 880 578.3 890 580.2L900 582L900 601L890 601C880 601 860 601 840 601C820 601 800 601 780 601C760 601 740 601 720 601C700 601 680 601 660 601C640 601 620 601 600 601C580 601 560 601 540 601C520 601 500 601 480 601C460 601 440 601 420 601C400 601 380 601 360 601C340 601 320 601 300 601C280 601 260 601 240 601C220 601 200 601 180 601C160 601 140 601 120 601C100 601 80 601 60 601C40 601 20 601 10 601L0 601Z"
    fill="#fff" 
  />
  
</svg>

We use the JS getBBox() method; to find the correct values viewBBox();
Replace the viewBox parameters with values from the JS console, also replace the SVG canvas fixed height values from 600 to 105

<svg 
  id="visual" 
  viewBox="0 495 900 105" 
  width="900" 
  height="105" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  version="1.1"
  style="border:1px solid red;"
>
 <g id="wave">
  <path 
    d="M0 497L10 499.5C20 502 40 507 60 504.7C80 502.3 100 492.7 120 496.8C140 501 160 519 180 529.2C200 539.3 220 541.7 240 541.5C260 541.3 280 538.7 300 529.8C320 521 340 506 360 506.2C380 506.3 400 521.7 420 530.7C440 539.7 460 542.3 480 537.2C500 532 520 519 540 511.7C560 504.3 580 502.7 600 509C620 515.3 640 529.7 660 531.7C680 533.7 700 523.3 720 513.7C740 504 760 495 780 500.8C800 506.7 820 527.3 840 535.7C860 544 880 540 890 538L900 536L900 601L890 601C880 601 860 601 840 601C820 601 800 601 780 601C760 601 740 601 720 601C700 601 680 601 660 601C640 601 620 601 600 601C580 601 560 601 540 601C520 601 500 601 480 601C460 601 440 601 420 601C400 601 380 601 360 601C340 601 320 601 300 601C280 601 260 601 240 601C220 601 200 601 180 601C160 601 140 601 120 601C100 601 80 601 60 601C40 601 20 601 10 601L0 601Z"
    fill="#00b5f5" 
  />
  <path 
    d="M0 564L10 559.2C20 554.3 40 544.7 60 536.5C80 528.3 100 521.7 120 523.7C140 525.7 160 536.3 180 537.2C200 538 220 529 240 523.3C260 517.7 280 515.3 300 516.5C320 517.7 340 522.3 360 532.2C380 542 400 557 420 558.5C440 560 460 548 480 542.5C500 537 520 538 540 543.3C560 548.7 580 558.3 600 557C620 555.7 640 543.3 660 537.7C680 532 700 533 720 539.7C740 546.3 760 558.7 780 558.7C800 558.7 820 546.3 840 545C860 543.7 880 553.3 890 558.2L900 563L900 601L890 601C880 601 860 601 840 601C820 601 800 601 780 601C760 601 740 601 720 601C700 601 680 601 660 601C640 601 620 601 600 601C580 601 560 601 540 601C520 601 500 601 480 601C460 601 440 601 420 601C400 601 380 601 360 601C340 601 320 601 300 601C280 601 260 601 240 601C220 601 200 601 180 601C160 601 140 601 120 601C100 601 80 601 60 601C40 601 20 601 10 601L0 601Z"
    fill="#007ac4"
  />
  <path 
    d="M0 595L10 590.5C20 586 40 577 60 573.3C80 569.7 100 571.3 120 571.5C140 571.7 160 570.3 180 568.5C200 566.7 220 564.3 240 567.5C260 570.7 280 579.3 300 578.8C320 578.3 340 568.7 360 563.2C380 557.7 400 556.3 420 557.8C440 559.3 460 563.7 480 562C500 560.3 520 552.7 540 549.2C560 545.7 580 546.3 600 553.8C620 561.3 640 575.7 660 581.5C680 587.3 700 584.7 720 585.3C740 586 760 590 780 588.2C800 586.3 820 578.7 840 576.7C860 574.7 880 578.3 890 580.2L900 582L900 601L890 601C880 601 860 601 840 601C820 601 800 601 780 601C760 601 740 601 720 601C700 601 680 601 660 601C640 601 620 601 600 601C580 601 560 601 540 601C520 601 500 601 480 601C460 601 440 601 420 601C400 601 380 601 360 601C340 601 320 601 300 601C280 601 260 601 240 601C220 601 200 601 180 601C160 601 140 601 120 601C100 601 80 601 60 601C40 601 20 601 10 601L0 601Z"
    fill="#fff" 
  />
  </g>
</svg>
 
<script>
  console.log(wave.getBBox());
</script>

If there is a need to make the waves adaptive, then you need to replace the fixed values of height and width with relative units, for example vh and vw

.container {
  width:50vw;
  height:50vh;
 }

<div class="container">
<svg 
  id="visual" 
  viewBox="0 495 900 105" 
   xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  version="1.1"
  style="border:1px solid red;"
>
 <g id="wave">
  <path 
    d="M0 497L10 499.5C20 502 40 507 60 504.7C80 502.3 100 492.7 120 496.8C140 501 160 519 180 529.2C200 539.3 220 541.7 240 541.5C260 541.3 280 538.7 300 529.8C320 521 340 506 360 506.2C380 506.3 400 521.7 420 530.7C440 539.7 460 542.3 480 537.2C500 532 520 519 540 511.7C560 504.3 580 502.7 600 509C620 515.3 640 529.7 660 531.7C680 533.7 700 523.3 720 513.7C740 504 760 495 780 500.8C800 506.7 820 527.3 840 535.7C860 544 880 540 890 538L900 536L900 601L890 601C880 601 860 601 840 601C820 601 800 601 780 601C760 601 740 601 720 601C700 601 680 601 660 601C640 601 620 601 600 601C580 601 560 601 540 601C520 601 500 601 480 601C460 601 440 601 420 601C400 601 380 601 360 601C340 601 320 601 300 601C280 601 260 601 240 601C220 601 200 601 180 601C160 601 140 601 120 601C100 601 80 601 60 601C40 601 20 601 10 601L0 601Z"
    fill="#00b5f5" 
  />
  <path 
    d="M0 564L10 559.2C20 554.3 40 544.7 60 536.5C80 528.3 100 521.7 120 523.7C140 525.7 160 536.3 180 537.2C200 538 220 529 240 523.3C260 517.7 280 515.3 300 516.5C320 517.7 340 522.3 360 532.2C380 542 400 557 420 558.5C440 560 460 548 480 542.5C500 537 520 538 540 543.3C560 548.7 580 558.3 600 557C620 555.7 640 543.3 660 537.7C680 532 700 533 720 539.7C740 546.3 760 558.7 780 558.7C800 558.7 820 546.3 840 545C860 543.7 880 553.3 890 558.2L900 563L900 601L890 601C880 601 860 601 840 601C820 601 800 601 780 601C760 601 740 601 720 601C700 601 680 601 660 601C640 601 620 601 600 601C580 601 560 601 540 601C520 601 500 601 480 601C460 601 440 601 420 601C400 601 380 601 360 601C340 601 320 601 300 601C280 601 260 601 240 601C220 601 200 601 180 601C160 601 140 601 120 601C100 601 80 601 60 601C40 601 20 601 10 601L0 601Z"
    fill="#007ac4"
  />
  <path 
    d="M0 595L10 590.5C20 586 40 577 60 573.3C80 569.7 100 571.3 120 571.5C140 571.7 160 570.3 180 568.5C200 566.7 220 564.3 240 567.5C260 570.7 280 579.3 300 578.8C320 578.3 340 568.7 360 563.2C380 557.7 400 556.3 420 557.8C440 559.3 460 563.7 480 562C500 560.3 520 552.7 540 549.2C560 545.7 580 546.3 600 553.8C620 561.3 640 575.7 660 581.5C680 587.3 700 584.7 720 585.3C740 586 760 590 780 588.2C800 586.3 820 578.7 840 576.7C860 574.7 880 578.3 890 580.2L900 582L900 601L890 601C880 601 860 601 840 601C820 601 800 601 780 601C760 601 740 601 720 601C700 601 680 601 660 601C640 601 620 601 600 601C580 601 560 601 540 601C520 601 500 601 480 601C460 601 440 601 420 601C400 601 380 601 360 601C340 601 320 601 300 601C280 601 260 601 240 601C220 601 200 601 180 601C160 601 140 601 120 601C100 601 80 601 60 601C40 601 20 601 10 601L0 601Z"
    fill="#fff" 
  />
  </g>
</svg>
 
</div>

Upd

Useful utility for generating wave code
SVG GENERATOR PATH

Upd2

Optimization utility SVGOMG by Jake Archibald

SVGOMG provides you several options to clean and compress your SVG files. Clean up, remove, merge, minify.

Upload or copy the source of your SVG to get started!

Compare file sizes before optimization ~3k and after 1.1k
Below is the code of the optimized file!

.container {
  width:75vw;
  height:75vh;
 }

<div class="container">
<svg 
  id="visual" 
  viewBox="0 495 900 105" 
   xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  version="1.1"
  >

  <path d="m0 497 10 2.5c10 2.5 30 7.5 50 5.2 20-2.4 40-12 60-7.9 20 4.2 40 22.2 60 32.4 20 10.1 40 12.5 60 12.3 20-.2 40-2.8 60-11.7 20-8.8 40-23.8 60-23.6 20 .1 40 15.5 60 24.5s40 11.6 60 6.5c20-5.2 40-18.2 60-25.5 20-7.4 40-9 60-2.7s40 20.7 60 22.7 40-8.4 60-18c20-9.7 40-18.7 60-12.9 20 5.9 40 26.5 60 34.9 20 8.3 40 4.3 50 2.3l10-2v65H0Z" fill="#00b5f5"/>
  <path d="m0 564 10-4.8c10-4.9 30-14.5 50-22.7s40-14.8 60-12.8 40 12.6 60 13.5c20 .8 40-8.2 60-13.9 20-5.6 40-8 60-6.8 20 1.2 40 5.8 60 15.7 20 9.8 40 24.8 60 26.3s40-10.5 60-16 40-4.5 60 .8c20 5.4 40 15 60 13.7 20-1.3 40-13.7 60-19.3 20-5.7 40-4.7 60 2 20 6.6 40 19 60 19s40-12.4 60-13.7c20-1.3 40 8.3 50 13.2l10 4.8v38H0Z" fill="#007ac4"/>
  <path d="m0 595 10-4.5c10-4.5 30-13.5 50-17.2 20-3.6 40-2 60-1.8 20 .2 40-1.2 60-3s40-4.2 60-1 40 11.8 60 11.3 40-10.1 60-15.6 40-6.9 60-5.4 40 5.9 60 4.2c20-1.7 40-9.3 60-12.8s40-2.9 60 4.6 40 21.9 60 27.7c20 5.8 40 3.2 60 3.8 20 .7 40 4.7 60 2.9 20-1.9 40-9.5 60-11.5s40 1.6 50 3.5l10 1.8v19H0Z" fill="#fff"/>
</svg>
</div>