title: height: auto on SVG not working
body: <p>I am trying to use an SVG sprite sheet using the "symbol" method detailed here.</p>
  
  <p><a href="http://css-tricks.com/svg-sprites-use-better-icon-fonts/" rel="noreferrer">http://css-tricks.com/svg-sprites-use-better-icon-fonts/</a></p>
  
  <p>My HTML is very simple.</p>
  
  <pre><code>&lt;svg&gt;&lt;use xlink:href="/images/iconSprite.svg#camera"/&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>And here is an example symbol from the SVG file</p>
  
  <pre><code>&lt;symbol viewBox="0 0 24 24" id="clock"&gt;&lt;g transform="translate(0 -1028.4)"&gt;&lt;path d="M22.085 1035.955a10.997 10.997-23.5 1 1-20.17 8.77 10.997 10.997-23.5 1 1 20.17-8.77z" fill="#1abc9c"/&gt;&lt;path d="M21 1040.335a9 9 0 1 1-18 0 9 9 0 1 1 18 0z" fill="#ecf0f1"/&gt;&lt;path d="M1.034 1039.8c-.083 1.7.176 3.3.875 4.9 2.42 5.6 8.898 8.2 14.468 5.8 4.29-1.9 6.778-6.2 6.593-10.6-.202 4-2.63 7.8-6.592 9.6-5.57 2.4-12.047-.2-14.47-5.8-.556-1.2-.82-2.6-.874-3.9z" fill="#16a085"/&gt;&lt;path d="M20 1040.4c0 .5-.448 1-1 1h-6v-2h6c.552 0 1 .4 1 1z" fill="#3498db"/&gt;&lt;path d="M12 1033.4c-.552 0-1 .448-1 1v5h2v-5c0-.552-.448-1-1-1z" fill="#2c3e50"/&gt;&lt;path fill="#c0392b" d="M6.017 1045.705l4.95-4.95.707.707-4.95 4.95z"/&gt;&lt;path d="M12 1038.4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zm0 1c.552 0 1 .4 1 1 0 .5-.448 1-1 1s-1-.5-1-1c0-.6.448-1 1-1z" fill="#34495e"/&gt;&lt;/g&gt;&lt;/symbol&gt;
  </code></pre>
  
  <p>The problem I am having is that when I use CSS to set the width of the SVG element to 64px the height of the SVG is automatically set to 150 pixels. I have tried setting height:auto; and height:100%; on the SVG element but it makes no difference. The only way to get it to work is to set height:64px; which I don't want to do because the aspect ratio of my icons may not always be square. What I want it to do is automatically scale the SVG in its original aspect ratio, so a 4:3 icon (as defined by the viewbox) would automatically get a heightof 300px if I set the width to 400px.</p>
  
  <p>I have read several guides on scaling SVG and preserving aspect ratio and some have solutions when using an IMG element but I can't find one for inline SVGS, or using an external SVG with USE.</p>
  
  <p>Anybody know a solution which works in all browsers including IE9+ and Android 4.0+?</p>