title: image inside svg width and height not working as expected
body: <p>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</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377"&gt;
    &lt;defs&gt;
      &lt;filter id="filtersPicture"&gt;
        &lt;feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" /&gt;
        &lt;feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" /&gt;
      &lt;/filter&gt;
    &lt;/defs&gt;
    &lt;image filter="url(&amp;quot;#filtersPicture&amp;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" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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</p>
  
  <p>I tried preserveAspectRatio <a href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="nofollow">http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute</a> seem not work</p>
  
  <p>so my question is how to make the image resize to the size I given?</p>
  
  <p>thanks in advance</p>