SVG: stretching an image

It is also possible scale and change the aspect ratio of an SVG by using pure CSS:

transform: scale(x, y);

When working with SVG images, please learn about how preserveAspectRatio works — with it, you can make the SVG images responsive in any way you like!

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

To answer your questions:

• How do I stretch an image to be size of rect?

  <image viewBox="0 0 250 250" preserveAspectRatio="none" … />

• Why "height" in "image" tag doesn't do the job?

  I don’t know what the problem with the image was because the original image is gone. Anyway, with SVG you should concentrate on using viewBox instead of width and height. You know, the name contains the word ‘scalable’, and using width and height prevents that…

• Is there transformation like "stretch" or "resize" that I can use?

  Centered and contained:
  <image viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet" …

  Centered and covered:
  <image viewBox="0 0 250 250" preserveAspectRatio="xMidYMid slice" …

PS. Everything you need ever wanted to know about gotchas in scaling SVG images (but please forget about IE already, and do not use the padding-bottom hacks): https://css-tricks.com/scale-svg/

Set preserveAspectRatio="none" on the SVG element:

<svg viewBox="0 0 500 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" >