Basically, I want the green shape to display/fit perfectly inside the red box when I change the browser size. At the moment it doesn't at all.
I would like the option of both having the shape always fill a certain % of the red box, and also for the green shape to be a fixed size (although never be larger than the red box).
Three things can't be changed in my code:
(1) The red box, although anything can be added inside (e.g. another div wrapping the <svg> tag).
(2) Must use the <svg> tag rather than a .svg file in either <img>, <embed> or <object>
(3) For example purposes, keep the green shape, rather than another example.
I can't see how all this is possible, which it would be using a bitmap inside <img>.