How to make SVG “fill” act in a similar way to CSS “background-size: cover”

Question

I\'m am trying to create an SVG which masks an image with a particular path however, when I try to fill the area using a pattern, the image does not cover the entire area.

Answer 1

To fix this, add an appropriate preserveAspectRatio attribute to the <image> in your <pattern> to tell it that you want the image to be zoomed and sliced.

<pattern id="image" patternUnits="userSpaceOnUse" width="83.38" height="100" x="0" y="0">
  <image xlink:href="http://goo.gl/kVVuy1"
         x="0" y="0" width="100%" height="100%"
         preserveAspectRatio="xMinYMin slice"/>
</pattern>

Demo here

Answer 2

If background-position is needed as well as background-size: cover;

preserveAspectRatio="xMidYMid slice" // Will center the image

This link has all options available for the preserveAspectRatio attribute. And can help with centering the image within the pattern

All Options