image inside svg width and height not working as expected

Question

I am try to make image gray-scale work on IE 10, after some search use svg can archive it, but now I meet another problem, here is the code make image gray-scale work on IE 10

<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
  <defs>
    <filter id="filtersPicture">
      <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
      <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
    </filter>
  </defs>
  <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://thecybershadow.net/misc/stackoverflow.png" />
</svg>

the problem is the image not scale by size I give, for example, if the image's size is 200 X 1000 and I give the size 200 X 500, it will scale the image to something like 100 X 500

I tried preserveAspectRatio http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute seem not work

so my question is how to make the image resize to the size I given?

thanks in advance

Answer 1

If you want the image to stretch to fill the width and height you specify exactly (horizontally and vertically), use preserveAspectRatio="none".

<image x="0" y="0" width="400" height="377" xlink:href="blah" preserveAspectRatio="none" />