Q:

Position of svg elements

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

A:

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>

