title: SVG icon not rendered correctly on resize
body: <p>I have this icon 16x16. When the actual size is set to 13.4x16 (of some environmental reasons) the icon looks blurry. For as much as I understand SVG, it should resize to whatever size I impose on it, nevertheless if I set the preserveAspectRatio attribute. What am I doing wrong here and why doesn't it resize well.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menu {
    width: 13.4px;
    height: 16px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;SVG icon resize&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;svg class="menu" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" preserveAspectRatio="x16Y16 meet"&gt;
      &lt;polygon points="2,6 2,4 14,4 14,6 " /&gt;
      &lt;polygon points="2,9 2,7 14,7 14,9 " /&gt;
      &lt;polygon points="2,12 2,10 14,10 14,12 " /&gt;
    &lt;/svg&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>To watch the icon as it should be, set width to 16px.</p>
  
  <p>jsBin for this snippet - <a href="http://jsbin.com/qekigu/edit" rel="nofollow">enter link description here</a></p>