Responsive SVG Image Element (mimic background-size: cover)

by Bijoy Anupam

HTML

<h1>Responsive SVG Image Element (mimic background-size: cover)</h1>

<div class="wrapper bg-image"></div>
<div class="wrapper-another">
    <svg class="svgImage" preserveAspectRatio="xMidYMid slice" height="100%" width="100%" viewBox="0 0 800 533">
        <defs>
            <filter id="filtersPicture">
                <feGaussianBlur stdDeviation="5" />
            </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>
<a class="update-image" href="javascript:void(0);">Update Image</a>

CSS

.wrapper {
    border: 1px solid black;
    height: 300px;
    width: 100%;
    margin-top: 10px;
}
.wrapper-another {
    background-color: black;
    border: 1px solid black;
    height: 300px;
    width: 100%;
    margin-top: 10px;
}
.wrapper.bg-image {
    background-image: url(http://ie.microsoft.com/testdrive/graphics/hands-on-css3/win11_-23929.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
svg:not(:root) {
    overflow: hidden;
}

JavaScript

$(".update-image").on('click', function () {
    console.log($('.svgImage').children('image').attr('xlink:href', ''));
});