Trying to scale svg to a parent container

Question

I have been trying to scale SVG but failing to do so, I have banged my head enough but none of the solutions seem to work. So basically it's a centered modal with SVG as the background.

I am trying the SVG to correctly fit the borders of the parent container, edge to edge. Attaching the Design and code link below.

Design

CodePen Link

.modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 99999999;
  max-height: 100%;
  width: 80%;
  height: 80%;
  max-width: 100%;
  border: 2px solid black;
  box-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2);
}

.svg-container {
  position: relative;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 100%;
}

svg {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

<div class="modal-hidden">
  <div class="modal">
    <div class="svg-container">
      <svg viewBox="0 0 844 688" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs>
              <rect id="path-1" x="0" y="0" width="844" height="688" rx="10"></rect>
              <linearGradient x1="50%" y1="0%" x2="50%" y2="98.5140414%" id="linearGradient-3">
                  <stop stop-color="#8333D4" stop-opacity="0.499535621" offset="0%"></stop>
                  <stop stop-color="#CE5DCB" stop-opacity="0.110276442" offset="100%"></stop>
              </linearGradient>
          </defs>
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="Sezzle-Desktop-Modal" transform="translate(-298.000000, -97.000000)">
                  <g id="Modal-Popup" transform="translate(298.000000, 97.000000)">
                      <g id="Desktop-Modal">
                          <g id="Modal-Background">
                              <mask id="mask-2" fill="white">
                                  <use xlink:href="#path-1"></use>
                              </mask>
                              <use id="Mask" fill="#FFFFFF" xlink:href="#path-1"></use>
                              <polygon id="Path-2" fill="#FCD7B6" mask="url(#mask-2)" points="705.472656 734 844 327 844 734"></polygon>
                              <polygon id="Path-2" fill="#FCD7B6" mask="url(#mask-2)" transform="translate(69.263672, 158.500000) rotate(-180.000000) translate(-69.263672, -158.500000) " points="0 362 138.527344 -45 138.527344 362"></polygon>
                              <circle id="Oval" fill="#F08570" mask="url(#mask-2)" cx="10.5" cy="71.5" r="105.5"></circle>
                              <circle id="Oval" fill="url(#linearGradient-3)" mask="url(#mask-2)" cx="808.5" cy="581.5" r="95.5"></circle>
                          </g>
                      </g>
                  </g>
              </g>
          </g>
      </svg>
    </div>
  </div>
</div>

Answer 1

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>