title: Why doesn't this SVG graphic scale in IE9 and 10 (preview)?
body: <p>According to <a href="http://msdn.microsoft.com/en-us/ie/hh410107.aspx" rel="nofollow noreferrer">IE website</a> SVG is supported. And according to this answer too <a href="https://stackoverflow.com/questions/3656162/what-are-svg-scalable-vector-graphics-supported-browsers/3656242#3656242">What are SVG (Scalable Vector Graphics) supported browsers?</a></p>
  
  <p><a href="http://jsfiddle.net/jitendravyas/2UWNe/show/" rel="nofollow noreferrer">http://jsfiddle.net/jitendravyas/2UWNe/show/</a></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;svg width="100%" height="100%" viewBox="0 0 480 360"
    xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  
    &lt;defs&gt;
      &lt;linearGradient id="button_surface" gradientUnits="objectBoundingBox"
        x1="1" x2="1" y1="0" y2="1"&gt;
        &lt;stop stop-color="#434343" offset="0"/&gt;
        &lt;stop stop-color="#000000" offset="0.67"/&gt;
      &lt;/linearGradient&gt;
  
      &lt;linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
        x1="0" x2="0" y1="0" y2="1"&gt;
        &lt;stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/&gt;
        &lt;stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/&gt;
      &lt;/linearGradient&gt;
    &lt;/defs&gt;
  
    &lt;!-- button content --&gt;
    &lt;rect x="10" y="10" rx="15" ry="15" width="150" height="80"
      fill="url(#button_surface)" stroke="#363636"/&gt;
  
    &lt;text x="30" y="55" fill="white"
      font-family="Tahoma" font-size="20" font-weight="500"&gt;
      SVG Button
    &lt;/text&gt;
  
    &lt;!-- vitual lighting effect --&gt;
    &lt;rect x="12" y="12" rx="15" ry="15" width="146" height="76"
      fill="url(#virtual_light)" stroke="#FFFFFF" stroke-opacity="0.4"/&gt;
  &lt;/svg&gt;
  </code></pre>