Responsive SVG Image Element (without height)

by Bijoy Anupam

HTML

<h1>Responsive SVG Image Element (without height)</h1>

<div class="wrapper-another">
    <svg preserveAspectRatio="xMidYMid slice" height="100%" width="100%" viewBox="0 0 800 533">
        <defs>
            <filter id="filtersPicture">
                <feGaussianBlur stdDeviation="2" />
            </filter>
        </defs>
        <image filter="url(#filtersPicture)" xlink:href="http://ie.microsoft.com/testdrive/graphics/hands-on-css3/win11_-23929.jpg" height="533" width="800" y="0" x="0" />
    </svg>
    <div class="content">
         <h1>Test</h1>

    </div>
</div>

CSS

.wrapper-another {
    border: 1px solid black;
    width: 100%;
    margin-top: 10px;
    position: relative;
}
svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
svg:not(:root) {
    overflow: hidden;
}
.content {
    position: relative;
}