title: How to scale resize SVG contents proportionally, using only CSSs?
body: <p>How can I scale or resize inline SVG vector artwork, <strong>using only CSS</strong>, so all artworks resize proportionally and fit fully into their defined width &amp; height?</p>
  <p>The original aspect-ratio should be respected.</p>
  <p>In this case I would like the artwork contents to resize to 100x100px box as icons. The below snippet doesnt work, since it just seems to CROP the window instead of resizing the inner contents.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    width:  100px;
    height: 100px;
    fill:   blue;
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
      &lt;polygon points="100,0 30,200 200,70 0,70 170,200"/&gt;
  &lt;/svg&gt;
  
  &lt;svg &gt;
      &lt;polygon points="0,0 200,140 110,200"/&gt;
  &lt;/svg&gt;
  
  &lt;svg&gt;
      &lt;ellipse cx="200" cy="70" rx="200" ry="40" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm gtting this: (looks more like a crop)<br />
  <a href="https://i.stack.imgur.com/69qSe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/69qSe.png" alt="enter image description here" /></a></p>
  <p>But I would like to get this: (proportionally scaled to the edge of the box)<br />
  <a href="https://i.stack.imgur.com/AgE1j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AgE1j.png" alt="enter image description here" /></a></p>