title: How can I fit svg path to certain px size without javascript
body: <pre><code>&lt;div style="width:40px;
              height:40px;
              background: #333333;
              margin: 10px;"&gt;
  
      &lt;svg version="1.1" 
           xmlns="http://www.w3.org/2000/svg" 
           width="40" 
           height="40" 
           style="width:40px; 
           height:40px;" 
           viewBox="0 0 40 40" 
           preserveAspectRatio="none"&gt;
  
           &lt;g transform="translate(20, 20)"&gt;
               &lt;path fill="#FF0000" stroke="none" d="M-10,-10h20v20h-20z"&gt;&lt;/path&gt;
           &lt;/g&gt;
  &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please see this jsfiddle: <a href="http://jsfiddle.net/Fz4rc/" rel="nofollow">http://jsfiddle.net/Fz4rc/</a></p>
  
  <p>The first path is too small, the second path is too large.</p>
  
  <p>I have looked into few related questions on SO.
  I have tried playing with viewBox, preserveAspectRatio, width, height.</p>
  
  <p>How can I get both paths to fit 40px size (either svg or div) without measuring the BBox in javascript? Is it possible?</p>