Fluid SVG

preserveAspectRatio="none" ?

HTML

<div class="wrap">
    <div class="svg">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 5" preserveAspectRatio="xMinYMin meet">
            <polygon fill="red" points="0,0 0,5 50,0" />
        </svg>
    </div>
</div>
<div class="wrap">
    <div class="svg">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 5" preserveAspectRatio="none">
            <polygon fill="blue" points="0,0 0,5 50,0" />
        </svg>
    </div>
</div>

CSS

* {
    box-sizing:border-box;
    margin:0;
    padding:0;
}
.wrap {
    position: relative;
    height:50px;
    background:beige;
    margin:0 0 100px;
}
.svg {
    position: absolute;
    top:100%;
    left:0;
    width:100%;
    padding-bottom:10%;
}
.svg svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}