javascript - Increase the size of SVG in HTML without losing the size of the edges of the shape

Question

When I resize SVG with CSS, their rounded corners also resize.

Like the image below, I also put the code.

My Problem Image

<div class="continer">
<!--  SVG 1  -->
  <img src="https://s16.picofile.com/d/8422581200/ebe64c0d-893c-4770-a198-44a582829f77/mysvg.svg" alt="" class="crv">
  
<!--  SVG 2  -->
   <img src="https://s16.picofile.com/d/8422581200/ebe64c0d-893c-4770-a198-44a582829f77/mysvg.svg" alt="" class="crv2">
  
<!-- SVG 3 -->
    <img src="https://s16.picofile.com/d/8422581200/ebe64c0d-893c-4770-a198-44a582829f77/mysvg.svg" alt="" class="crv3">
  
</div>
<!-- 
My Svg Code With preserveAspectRatio
 
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1422.14 592.84"><defs><style>.cls-1{fill:#80d1a3;}</style></defs><title>Asset 19</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path id="_Rectangle_" data-name="&lt;Rectangle&gt;" class="cls-1" d="M0,0H1422.14a0,0,0,0,1,0,0V492.84a100,100,0,0,1-100,100H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z"/></g></g></svg>

-->


<style>
.crv{
  flex-basis:20%;
  height:50px;
}
.crv2{
  flex-basis:20%;
  height:100px;
}

.crv3{
  flex-basis:20%;
  height:200px;
}

.continer{
  display:flex;
  justify-content:space-between;
}
</style>

CodePen link: https://codepen.io/alexander-farzaneh/pen/eYdwmQP

I want the corners of my SVG shape to be the same size at any height and width, as shown below

Image of what I want

How can I do this on an HTML page?

question from:https://stackoverflow.com/questions/65871253/increase-the-size-of-svg-in-html-without-losing-the-size-of-the-edges-of-the-sha

Answer 1

Waitting for answers