What's the best way to position an svg in order to make it mobile friendly & work across multiple screen sizes?

Question

Ideally, I'd like to have this svg at the right side of my screen, and become mobile friendly. I was looking into media queries, but I realized I would have to code the exact position for every different media size. Let me know if there is an efficient way of making the svg position mobile friendly. Here is the code:

 <!-- side design neon pink -->
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="87.43" height="867.24" viewBox="0 0 87.43 867.24">
        <defs>
          <clipPath id="clip-path">
            <rect width="87.43" height="867.24" fill="none"/>
          </clipPath>
        </defs>
        <g id="Repeat_Grid_1" data-name="Repeat Grid 1" clip-path="url(#clip-path)">
          <g transform="translate(-287.868 -0.348)">
            <path id="wave_2_" data-name="wave (2)" d="M-40.233,309.629l67.77-59.788C55,217.986,69.618,180.03,124.543,186.934,179.469,193.353,274.7,243.422,329.627,237c54.925-6.9,130.937-40.482,185.862-53.806s88.765-3.969,143.69,27.886c54.926,32.339,109.851,32.339,137.314,32.339h27.463V359.7H.074Z" transform="matrix(-0.017, -1, 1, -0.017, 124.954, 830.456)" fill="#f638dc"/>
          </g>
        </g>
      </svg>

Any help/comment is greatly appreciated. Thank you!

Answer 1

Try removing the width and height of the SVG.

Wrap SVG in parent container <div class =" container ">

And give it width and height in relative units.

This will make your application responsive.

 .container { width:5vw; height:5vh; }

 <div class="container"> <!-- side design neon pink --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 87.43 867.24" style="border:1px solid"> <defs> <clipPath id="clip-path"> <rect width="87.43" height="867.24" fill="none"/> </clipPath> </defs> <g id="Repeat_Grid_1" data-name="Repeat Grid 1" clip-path="url(#clip-path)"> <g transform="translate(-287.868 -0.348)"> <path id="wave_2_" data-name="wave (2)" d="M-40.233,309.629l67.77-59.788C55,217.986,69.618,180.03,124.543,186.934,179.469,193.353,274.7,243.422,329.627,237c54.925-6.9,130.937-40.482,185.862-53.806s88.765-3.969,143.69,27.886c54.926,32.339,109.851,32.339,137.314,32.339h27.463V359.7H.074Z" transform="matrix(-0.017, -1, 1, -0.017, 124.954, 830.456)" fill="#f638dc"/> </g> </g> </svg> </div>

Answer 2

I added a class to my svg, then I added translate (im positioning for iphone x 375px width):

    .neon_pink_svg {
    transform: translate(287.87px, -32px);
    vertical-align: top;
    overflow: hidden;
    z-index: -1;
    position: fixed;
}