Responsive design is fluid; using CSS3 media queries to respond to any screen sizes, where text can wrap and images can shrink to adjust along with your browser whereas Adaptive design uses a series of static layouts based on breakpoints.
– Excerpt from an article by Ryan Boudreaux
I think the above definition is self-explanatory; however I will try describing both with examples and used cases without getting into it that who started what and when.
Working with SVG is fun but putting it in action can be pain. There were two challenges that I faced; It is not supported by IE8 and below and It was not responsive enough on IE9 and above.
Internet Explorer is main culprit in cross-browser Responsive SVG. If we do not mention the height then IE assume the height of SVG as 150px by default and therefore the code
max-width: 100%; height: auto failed. The SVG get stretched to fill the width but the height remains 150px.