Fill 100% of SVG path with image

Question

I would like to use a background image with SVG.

I am referring to a SO post:

I managed to use the image but it does not fill the entire width of the SVG. The code is below.

<svg width="650" height="210" fill="none" xmlns="http://www.w3.org/2000/svg">
  <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)" style="fill:url(#img1);stroke-width:1.10991" />
  <defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <image href="https://www.linkpicture.com/q/gal.jpg" x="0" y="0" width="100%"
        height="100%" />
    </pattern>
  </defs>
</svg>

How can I have te image fill the entire path element's width?

score 1 · Answer 1 · answered Jan 20 '22 at 11:08

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>

What is the logic? is it the `preserveAspectRatio="none" viewBox="0 0 500 500"`? — Thabo, Jan 20 '22 at 11:30

score 1 · Accepted Answer · answered Jan 20 '22 at 12:28

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>

Beautiful! that did the trick, thanks a trillion times, you're a hero! — Thabo, Jan 20 '22 at 13:16

Fill 100% of SVG path with image

2 Answers2