100 Percent width to SVG in webdesign

I have created SVG which has an image in background.

When I show this svg in browser it does not have full width.

I need to have full width of svg I set its width to 100% but It didn't work.

Here is what I made.

CODE

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1584 430.07">
            <defs>
              <style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:url(#linear-gradient);}
              </style>
              <clipPath id="clip-path" transform="translate(55.4 -492.58)">
                <path class="cls-1" d="M-27,636C84.25,567.54,343.82,469.55,512.2,527.7c68.3,23.59,137.95,66.7,411.2,84.26,194.2,14.95,352.85,3.84,585.6-30.37V900.5H-27Z"/>
              </clipPath>
              <linearGradient id="linear-gradient" x1="28.8" y1="212.55" x2="1564" y2="212.55" gradientUnits="userSpaceOnUse">
                <stop offset="0.14" stop-color="#662d91" stop-opacity="0.72"/>
                <stop offset="0.26" stop-color="#5f3194" stop-opacity="0.76"/>
                <stop offset="0.44" stop-color="#4d3d9c" stop-opacity="0.86"/>
                <stop offset="0.44" stop-color="#4c3e9c" stop-opacity="0.86"/>
                <stop offset="0.56" stop-color="#3051a8" stop-opacity="0.8"/>
                <stop offset="0.73" stop-color="#0071bc" stop-opacity="0.7"/>
                <stop offset="0.93" stop-color="#096bb8" stop-opacity="0.9"/>
              </linearGradient>
            </defs>
            <title>Untitled-2</title>
            <g class="cls-2"><image width="500" height="245" transform="scale(3.17 1.76)" xlink:href="data:image/jpeg;base64,/(**ByteCode for Image**)"/>
              <rect class="cls-3" x="28.8" y="17.42" width="1535.2" height="390.25"/>
            </g>
          </svg>

Here is The Latest PNG What I needed.

New SVG CODE

 <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 1502.1 1320.3" style="enable-background:new 0 0 1502.1 1320.3;" xml:space="preserve">
    <style type="text/css">
    	.st0{clip-path:url(#SVGID_2_);fill:url(#SVGID_3_);}
    </style>
    <g>
    	<defs>
    		<path id="SVGID_1_" d="M0,26.9c134.3,4.6,658.6,50.7,732.3,57.7c0-2.2,769.8-27.1,769.8-24.9c0.2,13.7,0,1260.6,0,1260.6L0,1320.3
    			C0,1320.3,0,26.9,0,26.9z"/>
    	</defs>
    	<clipPath id="SVGID_2_">
    		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
    	</clipPath>
    	<g style="clip-path:url(#SVGID_2_);">
    		
    			<image style="overflow:visible;" width="1476" height="692" xlink:href="86E00C1C.jpg"  transform="matrix(1.4941 0 0 1.8796 -349.3057 19.601)">
    		</image>
    	</g>
    	
    		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="28.1822" y1="-181.5918" x2="1530.3799" y2="-181.5918" gradientTransform="matrix(1 0 0 -1 0 492)">
    		<stop  offset="0.14" style="stop-color:#662D91;stop-opacity:0.72"/>
    		<stop  offset="0.26" style="stop-color:#5F3194;stop-opacity:0.76"/>
    		<stop  offset="0.44" style="stop-color:#4D3D9C;stop-opacity:0.86"/>
    		<stop  offset="0.44" style="stop-color:#4C3E9C;stop-opacity:0.86"/>
    		<stop  offset="0.56" style="stop-color:#3051A8;stop-opacity:0.8"/>
    		<stop  offset="0.73" style="stop-color:#0071BC;stop-opacity:0.7"/>
    		<stop  offset="0.93" style="stop-color:#096BB8;stop-opacity:0.9"/>
    	</linearGradient>
    	<rect x="0" y="26.9" class="st0" width="1502.2" height="1293.4"/>
    </g>
    <title>backSVG</title>
    </svg>

Solution

The SVG canvas has a width of 100%. The problem is that the clipping path is smaller than the SVG canvas. I've made a few changes to your code and now the clipping path spans the full width of the SVG canvas.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1536 408">
        <defs>
          <style>
            .cls-1{fill:none;}
            .cls-2{clip-path:url(#clip-path);}
            .cls-3{fill:url(#linear-gradient);}
          </style>
          <clipPath id="clip-path" transform="translate(27 -492.58)">
            <path class="cls-1" d="M-27,636C84.25,567.54,343.82,469.55,512.2,527.7c68.3,23.59,137.95,66.7,411.2,84.26,194.2,14.95,352.85,3.84,585.6-30.37V900.5H-27Z"/>
          </clipPath>
          <linearGradient id="linear-gradient">
            <stop offset="0.14" stop-color="#662d91" stop-opacity="0.72"/>
            <stop offset="0.26" stop-color="#5f3194" stop-opacity="0.76"/>
            <stop offset="0.44" stop-color="#4d3d9c" stop-opacity="0.86"/>
            <stop offset="0.44" stop-color="#4c3e9c" stop-opacity="0.86"/>
            <stop offset="0.56" stop-color="#3051a8" stop-opacity="0.8"/>
            <stop offset="0.73" stop-color="#0071bc" stop-opacity="0.7"/>
            <stop offset="0.93" stop-color="#096bb8" stop-opacity="0.9"/>
          </linearGradient>
        </defs>
        <title>Untitled-2</title>
          <g class="cls-2"><image width="500" height="245" transform="scale(3.17 1.76)" xlink:href="data:image/jpeg;base64,/(**ByteCode for Image**)"/>
          <rect class="cls-3" width="1536" height="408"/>
        </g>
      </svg>

Main changes:
- the width of the viewBox is now 1536 instead of 1584. If a width of 1584 is important, this should be approached differently.
- since the clipping path begins at x = -27 the transform for the clipping path is now transform="translate(27 -492.58)" instead of transform="translate(55.4 -492.58)"

I hope this helps.

UPDATE: I've recalculated the d attribute for the clipPath and now you don't need to translate the whole thing.

<clipPath id="clip-path" >
        <path class="cls-1" d="M0,143.42C111.25,74.96,370.82,-23.03,539.2,35.12c68.3,23.59 137.95,66.7 411.2,84.26 c194.2,14.95,352.85,3.84,585.6-30.37L1536,407.92L0,407.92L0,143.42Z"/>
</clipPath>