SVG doesnt fit the size of contener

Question

I tried to create a svg from scratch to make a cool stroke line animation later, the problem is that the shape that i created is going out of the view screen and not easy to manipulate.

i want to see the full svg what ever the size of the screen.

<div class="loader">
  <svg class="line-a" width="100%" height="100%">
    <path
      d="M 0 350 C 50 300 100 250 250 350 C 450 450 600 450 600 300 C 600 150 400 150 400 300 C 400 450 550 450 750 250 C 850 150 950 200 1000 250"
      fill="currentColor"
      stroke="black" />
  </svg>
</div>

a codepen:

https://codepen.io/maxdnc/pen/yLxpOgr

I trie viewbox 0 0 100 100

Answer 1

The path (the BBox) is 1000 in width and 232.2 in height. And it is placed x = 0 and y = 187.5. So, it is fare too big for a viewBox of 100x100.

The viewBox should be 1000x420.

<div class="loader">
  <svg class="line-a" viewBox="0 0 1000 420">
    <path
      d="M 0 350 C 50 300 100 250 250 350 C 450 450 600 450 600 300 C 600 150 400 150 400 300 C 400 450 550 450 750 250 C 850 150 950 200 1000 250"
      fill="currentColor"
      stroke="black" />
  </svg>
</div>