Fixe SVG hauteur & variable (100%) de la largeur de

Je suis en train de mettre un svg objet sur ma page html et je veux qu'il ait 100% de largeur et une hauteur fixe.

Dans mon violon, vous pouvez voir que la hauteur de gris foncé objet de modifications en fonction de la fenêtre de proportions. (Ce n'est pas ce que je veux)

http://jsfiddle.net/Lq207ery/6/

HTML

<body>
<!-- HEADER -->
<header>
    <div class="logo"></div>
    <div class="triangle">
        <svg data-type="vertical_parallax" data-speed="2" x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310" style="-webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);">
            <g>
                <!--<polyline stroke="#222" fill="none" stroke-width="1" points="0,210 0,210 310,0 "></polyline>-->
                <polyline fill="#CC0000" points="0,0 0,200 300,0    "></polyline>
            </g>
        </svg>
    </div>
    <div class="nav">
        <svg width="100%" viewBox="0 0 10 10" preserveAspectRatio="xMinYmin">
            <polygon fill="#222" stroke-width="0" points="0,1.5 0,0 10,0 15,0 " />
        </svg>
    </div>
</header>
<!-- CONTENT -->

CSS

body {
margin: 0;
}
header svg {
    display: block;
    margin: 0;
}
header .triangle {
    z-index: 200;
}
header .logo {
    margin-top: -90px;
}
header .nav {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    z-index:-1;
}

OriginalL'auteur user3703764 | 2015-02-04