Making SVGs Responsive

The gray border is the border of the container with the SVG iframe.
Resize the window to test the SVG fluidity.

SVG as iframe without the padding hack

					
<div class="container">
  <iframe src="img/logo.svg">
    <h3>Fallback text</h3>
  </iframe>
</div>					
					
				

					
.container {
  border: 10px solid #b6bdc3;
  width: 100%;
  background: #fff;
  margin: 0 auto;
}
					
				

SVG as iframe with padding hack

					
<div class="container container--ph">
  <iframe class="iframe--responsive" src="img/logo.svg">
    <h3>Fallback text</h3>
  </iframe>
</div>					
					
				

					
.container--ph {
  height: 0;
  padding-top: 48%;
  position: relative;
}

.iframe--responsive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* get rid of the border */
}