I am trying to use the <svg> tag in this way:

http://page-test.co.uk/svg.html

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>.

Thanks for any help.