Fill 100% of SVG path with image

Make sure that the path has the same width (100%) as the svg. In this example I added the viewBox attribute to <svg>. I also simplified your path so that it is easier to see the dimensions of the path.

Now the width of the path is 50 and when setting the width of the viewBox to 50 ("50" in the value "0 0 50 17") the path will take up 100%. The pattern also need a width and the same goes for the image. You can see that they all have the value 50.

To control the width of the SVG you can specify a value for the width attribute on <svg>. If no width is given, the svg will take up a 100% of the available space.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 17">
  <path d="M 50 0 V 16 S 46 17 38 17 C 30 17 26 15 15 15 C 7 15 0 16 0 16 V 0 Z" fill="url(#img1)"/>
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="50" height="17">
      <image href="https://www.linkpicture.com/q/gal.jpg" width="50"/>
    </pattern>
  </defs>
</svg>

This might help you, As this logic will stretch the image horizontally and fill up the whole width of the page.

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"  viewBox="0 0 500 500">
      <path d="M650 0v209.89s-84.184 1.355-170.006-5.422c-108.534-8.617-160.944-24.494-230.934-24.397C104.93 180.361 0 201.176 0 201.176V0z" fill="url(#img1)"/>
      <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
          <image href="https://www.linkpicture.com/q/gal.jpg"/>
        </pattern>
      </defs>
    </svg>

Fill 100% of SVG path with image

Related

Recent Posts