title: How to scale inline SVG to parent containers width and height automatically?
body: <p>I am trying to build a wavy box using svg. Something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/lXs1a.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lXs1a.png" alt="Some wave"></a></p>
  
  <p>I have drawn it in a vector application and set the size of the document to 500 x 200. Now, I copy the SVG contents into an inline SVG tag. So, the overall markup looks like the following:</p>
  
  <pre><code>&lt;div class="hero-wave"&gt;
      &lt;svg width="100%" height="100%" viewBox="0 0 500 200" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
          &lt;g fill="none" fill-rule="evenodd"&gt;
              &lt;path d="M0,0.8828125 C0,0.8828125 21.5375284,2.70107724 30.175,8.11815895 C70.4419893,33.3720274 173.689709,104.747595 239.525,104.747595 C306.457042,104.747595 408.933103,43.7500826 451.921875,21.6893757 C494.910647,-0.371331192 500,8.11815895 500,8.11815895 L500,200.882812 L0,200.882812 L0,0.8828125 Z" id="Rectangle" fill="#595CA5"&gt;&lt;/path&gt;
          &lt;/g&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I add the width and height attributes, the SVG looks very small but I want the illustration to scale to the width of the container. The css for hero-wave div is like the following</p>
  
  <pre><code>.hero-wave {
      position: absolute;
      bottom: 20px;
      left: 0px;
      right: 0px;
      width: 100%;
      height: 20%;
  }
  </code></pre>
  
  <p>How can I make the SVG to just fit the container perfectly, without any overflows. When I remove the width and height attribute from SVG, I get a very big version of the illustration and the bottom keeps overflowing:</p>
  
  <p><a href="https://i.stack.imgur.com/Ky1fy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ky1fy.png" alt="overflowing SVG"></a></p>
  
  <p>How can I make it so that the SVG fits in that grey area without overflowing (the grey area is hero wave container)?</p>
  
  <p>I am very new to SVG and there is no guide that I have been able to find that explains how SVGs work in terms of resizing. Do they try to keep the aspect ratio? If someone can shed a light on me on this matter, I would really appreciate it.</p>
  
  <p>EDIT: If I make it so that the aspect ratio is the same, the illustration still overflows the parent container.</p>