title: SVG-images in IE are cropped instead being scaled
body: <p>An SVG newbie needs your help.</p>
  
  <p>I've created some SVG files using Inkscape and trying to implement these in my website scaling them over CSS ( <code>height:12pt;width:auto;</code> ).</p>
  
  <p>It does work fine in Chrome and Opera but doesn't in IE 9 and IE for WP8.1:
  The images are cropped to the indicated height instead being scaled.</p>
  
  <p>Does anyone have the same issues or even a solution?</p>
  
  <p>Thank you in advance!</p>
  
  <p><a href="http://www.sprachvertraut.de/fileadmin/sprachvertraut/svg/xing.svg" rel="nofollow">Here's a link to the Image</a></p>
  
  <p>Here's the integration code:</p>
  
  <pre><code>&lt;div id="social"&gt;Social: &amp;nbsp;&amp;nbsp;&amp;nbsp;  &amp;nbsp;&amp;nbsp;&amp;nbsp; 
  &lt;a href="http://www.xing.com/profile/Alexander_Radeke" target="_blank" rel="me"title="Besuchen Sie unser XING-Profil"&gt;
  &lt;img id="xing" class="svg" src="fileadmin/sprachvertraut/svg/xing.svg"alt="Unser XING-Profil"&gt;ing&lt;/a&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#xing {height:1em;width:1em;border:solid 1px #eef;border-radius:0.2em;margin-bottom:-0.1em;}
  </code></pre>
  
  <p>Do you need more infos?</p>