Responsive SVG - Single

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"/>
        </g>
        </g>
        </g>
        </svg>

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
}


@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%
  }
}