Cross-browser Responsive SVG with PNG fallback

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.

Read more…