appropriate way to scale svgs

Hey, i have an example hero page centerpiece layout and was wondering the most appropriate way to scale that svg (or any svgs) so they're neither too big or small.

The svg came with a pre-set width and height attribute however i removed those otherwise the svg falls short of the wrapper edge which messes with the alignment making it look odd and out of place with things like a header present etc. And if i push it all the way to the right when it's in that state then it leaves a rather abnormally large gap.

Removing the attributes made it fill the container, however that makes it too big. I attempted to use scale but it just provided similar issues mentioned above and mostly more i don't know about. This also makes it look huge on a mobile view too.

I'd appreciate any insight, thank you in advance.
https://codepen.io/deerCabin/pen/jOgNVOo?editors=1100
CodePenR
...
svg scaling
Was this page helpful?