I am trying to create a responsive svg – it will scale when the browser is resized. I am currently using the parent container as a reference and setting things to be a %. I get some issues with margins and the text has to be in vw or vh units. Because of these last 2 issues, what is the best way to fix them? I have been researching viewBox but it does not seem to work how I want. Do I define the viewBox to be 100% of both width and height of the container and origin (0,0)? This sends half of my svg of screen. If I use this approach do they need to be pixel values or can they be %?
In summary, I am trying to get an svg that scales proportionally.