0

Hi I am really new to SVG's and creating assets using SVG's. This is my first attempt and what I have is a rounded rectangle with a gif of water as the background. I was wondering how to modify this code in order to make it not have those gaps.

<svg id="water" width="440" height="440">
    <defs>
   <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
  <image xlink:href="https://i.imgur.com/u7ufQto.gif" x="0" y="0" width="100" height="100" />
   </pattern>
    </defs>
 <path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="url(#img1)" stroke="black" stroke-width="3" />
</svg>
EGxo
  • 305
  • 2
  • 14

1 Answers1

3

The problem is that your GIF is 251x132 pixels, but you are asking the SVG to draw the image at 100x100.

By default SVG won't squeeze or stretch an image to the the size you ask. It will keep the image at the same aspect ratio. So in your case, the image is being scaled down to 100x53, which leaves a blank space above and below.

I presume you don't want to distort the water animation, so the solution is to set your <image> and <pattern> widths and heights to 251x132.

<svg id="water" width="440" height="440">
    <defs>
   <pattern id="img1" patternUnits="userSpaceOnUse" width="251" height="132">
  <image xlink:href="https://i.imgur.com/u7ufQto.gif" x="0" y="0" width="251" height="132" />
   </pattern>
    </defs>
 <path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="url(#img1)" stroke="black" stroke-width="3" />
</svg>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181