How to Make an Svg Scale With Its Parent Container

How can I make an svg scale with its parent container?

To specify the coordinates within the SVG image independently of the scaled size of the image, use the viewBox attribute on the SVG element to define what the bounding box of the image is in the coordinate system of the image, and use the width and height attributes to define what the width or height are with respect to the containing page.

For instance, if you have the following:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

It will render as a 10px by 20px triangle:

10x20 triangle

Now, if you set only the width and height, that will change the size of the SVG element, but not scale the triangle:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

10x20 triangle

If you set the view box, that causes it to transform the image such that the given box (in the coordinate system of the image) is scaled up to fit within the given width and height (in the coordinate system of the page). For instance, to scale up the triangle to be 100px by 50px:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

100x50 triangle

If you want to scale it up to the width of the HTML viewport:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

300x150 triangle

Note that by default, the aspect ratio is preserved. So if you specify that the element should have a width of 100%, but a height of 50px, it will actually only scale up to the height of 50px (unless you have a very narrow window):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

100x50 triangle

If you actually want it to stretch horizontally, disable aspect ratio preservation with preserveAspectRatio=none:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

300x50 triangle

(note that while in my examples I use syntax that works for HTML embedding, to include the examples as an image in StackOverflow I am instead embedding within another SVG, so I need to use valid XML syntax)

How to make svg image fits to parent container

UPDATED

Add width="100%" and height="100%" attributes.
Add preserveAspectRatio ¹ with value of none².

none do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle.

Note: if <align> is none, then the optional <meetOrSlice> value is ignored.

jsFiddle - tested on Chrome, FF and IE11

.item { position: relative; width: 20%; height: 220px; background-color: blue; }svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

<div class="item">  <svg id="theSVG" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">      <image width="100%" height="100%" xlink:href="//dummyimage.com/400x400/000/00ffd5.png" preserveAspectRatio="none" />    </svg></div>

How to scale inline SVG to parent containers width and height automatically?

You can set width: 100% & height: auto in svg:not(:root) selector for this. check updated snippet below.

.hero-wave {    position: absolute;    bottom: 20px;    left: 0px;    right: 0px;    width: 100%;    height: 20%;}svg:not(:root) {    width:100%;    height: auto;}

<div class="hero-wave">    <svg width="100%" height="100%" viewBox="0 0 500 200" version="1.1" xmlns="http://www.w3.org/2000/svg">        <g fill="none" fill-rule="evenodd">            <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"></path>        </g>    </svg></div>

Trying to scale svg to a parent container

I believe the key property you are looking for is preserveAspectRatio="none", as well as width/height set on the svg element. I altered the CSS to reduce it to just what you need. You'll need to set the size where you'd like it. I simplified your svg file as well

html,body,.modal-hidden {  width: 100%;  height: 100%;}
.modal-hidden {  display: flex;  justify-content: center;  align-items: center;}
.modal {  box-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);  height: 40%;  width: 40%;}
.svg-container {  height: 100%;  width: 100%;  box-sizing: border-box;}

<div class="modal-hidden">  <div class="modal">    <div class="svg-container">      <svg preserveAspectRatio="none" viewBox="0 0 844 688" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>          <rect id="path-1" x="0" y="0" width="844" height="688" rx="10"/>            <linearGradient x1="0.5" y1="0" x2="0.5" y2="0.985140380859375" id="linearGradient-3">              <stop stop-color="#8333D4" stop-opacity="0.499535621" offset="0"/>              <stop stop-color="#CE5DCB" stop-opacity="0.110276442" offset="1"/>            </linearGradient>          </defs>
          <mask id="mask-2" fill="white" stroke="none" stroke-width="1" fill-rule="evenodd">            <rect width="844" height="688" rx="10"/>          </mask>
          <rect id="Mask" width="844" height="688" rx="10" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"/>          <polygon id="Path-2" fill="#FCD7B6" mask="url(#mask-2)" points="705.5 734 844 327 844 734" stroke="none" stroke-width="1" fill-rule="evenodd"/>          <polygon id="Path-2" fill="#FCD7B6" mask="url(#mask-2)" points="138.5 -45 0 362 0 -45" stroke="none" stroke-width="1" fill-rule="evenodd"/>          <circle id="Oval" fill="#F08570" mask="url(#mask-2)" cx="10.5" cy="71.5" r="105.5" stroke="none" stroke-width="1" fill-rule="evenodd"/>          <circle id="Oval" fill="url(#linearGradient-3)" mask="url(#mask-2)" cx="808.5" cy="581.5" r="95.5" stroke="none" stroke-width="1" fill-rule="evenodd"/>      </svg>    </div>  </div></div>

Inline SVG only scaling to parent container in Google Chrome

Add min-height:0 to fix the issue in most of the browser (related: Prevent content from expanding grid items) and for Edge you will need to add height:0;min-height:100% to the SVG. The last fix will remove the usage of percentage value with height which is creating an issue with Edge.

* {  margin: 0;  padding: 0;  box-sizing: border-box;}
html,body {  width: 100vw;  height: 100vh;  font-family: Arial, Helvetica, sans-serif;  display: flex;  justify-content: center;}
.container {  display: grid;  grid-template-rows: 1fr 2fr 3fr;  width: 100%;  max-height: 100%;  max-width: 540px;}
.svg-container {  border: 1px solid black;  min-height: 0;}
svg {  width: 100%;  height: 0;  min-height: 100%;}

<!DOCTYPE html><html lang="en">
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <link rel="stylesheet" href="style.css">  <title>Document</title></head>
<body>  <div class="container">    <div class="svg-container">      <svg viewBox='0 0 3.904897 29.412678' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'>            <path              d='M 0,25.550255 V 3.8624222 H 2.01753 V 25.550255 H 0 m 2.850575,3.862422 H 2.551199 C 1.142257,29.412677 0,27.979719 0,26.211588 v -0.661333 h 2.01753 v 0.981485 c 0.0024,0.884983 0.574154,1.599169 1.2756,1.593463 h 0.611767 v 1.287474 z M 2.850575,0 H 2.5512 C 1.142257,0 0,1.4329586 0,3.2010897 V 3.8624222 H 2.01753 V 2.8809378 C 2.01993,1.9959549 2.591684,1.2817684 3.29313,1.2874741 H 3.904897 V 0 Z' />          </svg>
    </div>    <div class="svg-container">      <svg viewBox='0 0 3.904897 29.412678' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'>            <path              d='M 0,25.550255 V 3.8624222 H 2.01753 V 25.550255 H 0 m 2.850575,3.862422 H 2.551199 C 1.142257,29.412677 0,27.979719 0,26.211588 v -0.661333 h 2.01753 v 0.981485 c 0.0024,0.884983 0.574154,1.599169 1.2756,1.593463 h 0.611767 v 1.287474 z M 2.850575,0 H 2.5512 C 1.142257,0 0,1.4329586 0,3.2010897 V 3.8624222 H 2.01753 V 2.8809378 C 2.01993,1.9959549 2.591684,1.2817684 3.29313,1.2874741 H 3.904897 V 0 Z' />          </svg>    </div>    <div class="svg-container">      <svg viewBox='0 0 3.904897 29.412678' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'>            <path              d='M 0,25.550255 V 3.8624222 H 2.01753 V 25.550255 H 0 m 2.850575,3.862422 H 2.551199 C 1.142257,29.412677 0,27.979719 0,26.211588 v -0.661333 h 2.01753 v 0.981485 c 0.0024,0.884983 0.574154,1.599169 1.2756,1.593463 h 0.611767 v 1.287474 z M 2.850575,0 H 2.5512 C 1.142257,0 0,1.4329586 0,3.2010897 V 3.8624222 H 2.01753 V 2.8809378 C 2.01993,1.9959549 2.591684,1.2817684 3.29313,1.2874741 H 3.904897 V 0 Z' />          </svg>    </div>  </div></body>
</html>