Responsive SVG

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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
            <path class="st0" d="M473.6,380.3l-84.1-139.5h-0.2L310,109.5c-1-2.3-2.7-4.2-5.2-5.8c-3-1.9-6.3-2.4-9.7-1.5
	c-3.4,0.9-6.1,2.8-8,5.8L222,213l15.3,24.6l60.8-97.9l63.4,104.3l-37.5-5.2c-0.3-0.1-0.5-0.1-0.6,0c-0.3,0-0.4,0.1-0.4,0.4v0.2
	l-5.2,45.7l-50.4-26.3h-0.6c-0.1,0-0.2,0.1-0.2,0.4l-14.2,31.7l-74.8-122c-1.4-2.6-3.6-4.3-6.5-5.2c-3-1-5.9-1-8.6,0
	c-3,0.9-5.3,2.6-6.9,5.2L51.3,339.6l-1.5,0.6l0.6,0.9l-23.9,38.8c-1.7,2.9-2.3,5.8-1.7,8.8c0.4,3.2,1.9,5.8,4.3,8c2.3,2,5.1,3,8.4,3
	h424.9c3.2,0,6-1,8.4-3c2.3-2.2,3.8-4.7,4.5-7.8C475.8,385.8,475.2,382.9,473.6,380.3z M187.5,280.3c-0.3-0.1-0.4-0.1-0.4,0h-0.2
	c-0.3,0-0.4,0.1-0.4,0.4l-22.6,66l-26.7-49.2c0-0.3-0.1-0.4-0.4-0.4c-0.1-0.1-0.4-0.1-0.6,0l-41,20.7l71.4-117.1l58.9,95.7
	L187.5,280.3z" />
        </svg>
        </div>
    </div>
    <div class="svg-link">
     <p><a href="#">Can has link</a>
        </p>
    </div>
</div><div class="sm">
    <div class="svg-icon">
    <div class="svg-container">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
            <path class="st0"...

CSS

/* http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php */
.svg-icon { width:60%;margin:0 auto;} 
.svg-link { padding: 10px;}
.svg-container {
    padding:0; 
    background:#000;
    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: 100%;
    /* 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 {
    fill: #F2A136;
    border: 1px solid #0f0;
    display: table-cell
}
.svg-container:hover path, .svg-container:hover polygon {
    fill: #c42a6e;
    border: 1px solid #0f0;
    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;
    border: 1px solid #0f0;
    width:33%;
    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%
    }
}