Correcting skewed SVG rendering

I have created a single jsbin: http://ift.tt/1KfFAud

You can see four triangles rendering within one another. Each triangle is 10% smaller than the previous. The containing SVG is 300x300. I would expect everything to render out square but that doesn't happen. I assume there is some sort of screen stretching happening. The space between the bottom borders of each triangle looks much larger than the space between the top tips.

How do I correct for this?