Previous Demo Back to the Codrops Article

Making SVGs Responsive

The gray border is the border of the element that we're applying the SVG background image to.
Resize the window to test the SVG fluidity.

SVG embedded as a background image using CSS

					
<div class="container"></div>					
					
				
					
.container {
  box-shadow: 0 0 0 10px #b6bdc3;
  width: 50%;
  background: #fff;
  margin: 0 auto;
  /* just to get an apsect ratio same as the SVG's: */
  padding-top: 48%; 
  height: 0; 
  background-image: url(../img/logo.svg);
  background-size: cover;
  background-repeat: no-repeat;
}