Resize the screen to see the SVG adapt.
Adaptive SVG using media queries
<div class="container">
<img src="img/logo_mq.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%;
}
Contents of the SVG file:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
<style>
svg * {
transition: fill .1s ease-out, opacity .1s ease-out;
}
@media all and (max-width: 250px) {
#curved_bg {
opacity: 0;
}
#secondary_content, #primary_content {
fill: #195463;
}
}
@media all and (max-width: 200px) {
#secondary_content {
opacity: 0;
}
}
@media all and (max-width: 150px) {
#inner-circle, #middle-circle {
opacity: 0;
}
}
</style>
<path id="curved_bg" fill="#195463" d="..."/>
<g id="primary_content" fill="#ECECEC">
<path id="icon" d="..."/>
<path id="inner-circle" d="..."/>
<path id="middle-circle" d="..."/>
</g><!-- /primary content -->
<g id="secondary_content" fill="#ECECEC">
<path id="bottom-text" d="..."/>
<path id="upper-text" d="..."/>
<path id="outer-circle" d="..."/>
<circle id="left-dot" cx="31.1" cy="91.5" r="3"/>
<circle id="right-dot" cx="163.4" cy="91.5" r="3"/>
</g><!-- end secondary content -->
</svg>