Position of svg elements - html

Question

I'm trying to put a polygon in front of this green rectangle, so it can look like Brazil flag. My code:
<svg class="green"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<rect x=0 y=0 height=450 width=800 fill="#009B3A"/>
<polygon x=0 y=0 points="400,430 600,215 400,30 200,215" fill="#FEDF00"/>
</svg>
Funny thing is that polygon element is not appearing in the front of the rectangle, and it's getting me confused. I had made a Denmark flag svg, and it looked just fine, with white strips appearing in front of the red rectangle as they supposed to, my code for Denmark flag:
<svg
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<rect x=0 y=0 height=450 width=800 fill="#C60C30"/>
<rect x=200 y=0 height=450 width=60 fill="#FFF"/>
<rect x=0 y=175 height=60 width=800 fill="#FFF"/>
</svg>
I wish it had some way of doing the same for Brazil flag

Answer 1

Added viewBox="0 0 450 800" and transform="translate(-175 0)"
Which will set the right position for the yellow diamond
<svg class="green"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 800">
<rect x=0 y=0 height=450 width=800 fill="#009B3A"/>
<polygon transform="translate(-175 0)" points="400,430 600,215 400,30 200,215" fill="#FEDF00"/>
</svg>

Answer 2

<svg height="500" width="800" class="green"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<rect x=0 y=0 height=450 width=800 fill="#009B3A"/>
<polygon points="400,430 600,215 400,30 200,215" fill="#FEDF00"/>
</svg>
Add height and width to svg. It will work.

Answer 3

it should work. (add a viewBox="0 0 450 800")
<svg id="svg" viewBox="0 0 450 800">
<rect x="0" y="0" width="800" height="450" class="handle" polygonNo="0" pointNo="0" fill="green"></rect>
<polygon points="400,0 800,225 400,450 0,225" id="polygon" polygonNo="1" fill="yellow"></polygon>
<circle cx="400" cy="225" r="100"
fill="blue"></circle>
</svg>