Previous Demo Back to the Codrops Article

Making SVGs Responsive

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

SVG as img

					
<div class="container">
  <img src="img/logo.svg"/>
</div>						
					
				
					
.container {
  border: 10px solid #b6bdc3;
  width: 100%;
  background: #fff;
  margin: 0 auto;
}

/* Required to make image fluid in IE */

img:not(.png) {
  width: 100%;
}				
					
				

PNG img version of the above SVG

Logo
					
<div class="container">
  <src="img/logo.png" alt="Logo" class="png" />
</div>