Making SVGs Responsive

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

Inline svg without the padding hack

					
<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
    <!-- ... -->
  </svg>
</div>					
					
				

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

Inline svg with the padding hack

					
<div class="container container--ph">
  <svg class="svg--responsive" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
    <!-- ... -->
  </svg>
</div>				
					
				

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

.svg--responsive {
  position: absolute;
  top: 0;
  left: 0;
}