Responsive SVGs

by ian_smithz

HTML

<div>
    <a href="#" class="svg-responsive">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10" preserveAspectRatio="xMinYMin meet">
                <path fill="#124C92" d="M20,7c0,1.65-1.35,3-3,3H3c-1.65,0-3-1.35-3-3V3c0-1.65,1.35-3,3-3h14c1.65,0,3,1.35,3,3V7z" />
        </svg>
    </a>
</div>
<p>Some other content</p>

CSS

div {
    max-width: 500px;
}
.svg-responsive {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 50%; /* svg height / svg width = 10/20 = 50% */
    vertical-align: middle;
    overflow: hidden;
}
.svg-responsive svg {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}