Responsive SVG - Single

by Virtual

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="sm">
    <div class="svg-icon">
    <div class="svg-container">
     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="612px" height="180px" viewBox="0 0 612 180" enable-background="new 0 0 612 180" xml:space="preserve">
<g>
	<g>
		<g>
			<path stroke="#000000" stroke-miterlimit="3.8637" d="M78.71,34.5h474.153c11.929,0,19.894,9.67,17.791,21.601l-11.956,67.8
				c-2.104,11.93-13.479,21.6-25.408,21.6H59.138c-11.93,0-19.895-9.67-17.792-21.6l11.955-67.8C55.405,44.17,66.78,34.5,78.71,34.5
				L78.71,34.5z"/>
			<path stroke="#000000" stroke-miterlimit="3.8637" d="M306,90"/>
		</g>
		<path class="bg-red" fill="#E03A3E" d="M552.298,122.771C550.729,131.669,541.989,139,533.29,139H59.138c-7.748,0-12.817-5.882-11.391-13.972
			l11.955-67.8C61.271,48.331,70.01,41,78.71,41h474.153c7.746,0,12.816,5.882,11.39,13.972L552.298,122.771z"/>
		<g>
			<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="206.51,55.524 242.678,55.524 241.201,65.151 
				228.017,65.151 219.016,123.835 209.217,123.835 218.217,65.151 205.033,65.151 			"/>
			<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="247.141,55.524 281.17,55.524 279.787,64.537 
				255.557,64.537 252.557,84.098 271.531,84.098 270.133,93.213 251.158,93.213 247.875,114.618 272.463,114.618 271.049,123.835 
				236.663,123.835 			"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF"...

CSS

/* http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php */
.svg-icon { width:100%;margin:0 auto;} 
.svg-link { padding: 10px;}
.svg-container {
    padding:0; 
    display: inline-block;
    position: relative;
    width: 100%;  
    /* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */
    vertical-align: middle;
    text-align:center; 
    height: 0; 
    padding-bottom: 28%;
    /* top | middle | bottom ... do what you want */
}
.svg-container svg {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}
.svg-container path, .svg-container polygon {
    display: table-cell
}
.svg-container:hover path.bg-red, .svg-container:hover polygon.bg-red {
    fill: #B40026;
    width:100%;
    cursor:pointer;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    /* ...and now for the proper property */
    transition:.5s;
}
.sm {
    display: table-cell padding:0;
    width:100%;
    margin: 0 auto;
    position:relative;
    float:left; 
}
.sm p { clear:both; background:#f00; text-align:center;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    img[src*=".svg"] {
        width: 100%;
    }
}
@supports (-ms-accelerator:true) {
    img[src*=".svg"] {
        width: 100%
    }
}