title: Scale svg within parent div
body: <p>I have exported a circle as svg from illustrator without an artboard.</p>
  
  <p>I now want to create an animation within a parent <code>div</code> so that if the circle is viewed on different sized the animation/svg will scale to the right size.</p>
  
  <p>This gives me some headaches. I tried many solutions I found online but they all don't seem to work for some reason. Here is what I did.</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>body{
      width:100%;
      height: 100%;
      margin: 0;
  }
  .wrapper{
      width:100%;
      height: 100%;
  }
  .container{
      max-width:825px;
      margin: 0 auto;
       position: relative;
  }
  @keyframes fadeout {
      0%{
          -webkit-transform: scale(0);
          -webkit-transform-origin: 50% 50%;
          transform: scale(0);
          transform-origin: 50% 50%; 
   stroke: #009AFF;
   stroke-width:3;
   stroke-opacity:0; 
      }
      50%{
   -webkit-transform: scale(1.25, 1.25);
   -webkit-transform-origin: 50% 50%;
        transform: scale(1.25, 1.25);
     transform-origin: 50% 50%;
   stroke: #009AFF;
   stroke-width:3;
   stroke-opacity:0.5; 
      }
      100%{
   -webkit-transform: scale(1);
   -webkit-transform-origin: 50% 50%;
        transform: scale(1);
     transform-origin: 50% 50%;
   stroke: #009AFF;
   stroke-opacity:1;
   stroke-width:3;
      }
  }     
  
  .circle{ 
      animation: fadeout 1.5s ease-in-out 1 both; animation-delay: 0s; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
      &lt;div class="container"&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%" &gt;
              &lt;title&gt;test&lt;/title&gt;
              &lt;circle class="circle" cx="199.925" cy="199.927" r="198.425" fill="none" stroke="#000" stroke-width="3"/&gt;
          &lt;/svg&gt;
      &lt;/div&gt; 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see it creates a massive circle.
  This is based upon the following link I found:<br>
  <a href="https://codepen.io/gionkunz/pen/KDvLj" rel="nofollow noreferrer">CodePen</a></p>