Practical Responsive Images
Responsive Websites need Responsive Images
SVG Fallback

SVG is broadly supported (caniuse:svg), but for the cases where it isn't available, the < picture > gives us a much nicer fallback.

In this example, I'm requesting the .svg asset, along with specified .png and .jpg fallbacks in the case where SVG is not supported.


            <picture>
                <source type="image/svg+xml" srcset="images/premium_organic.svg" />
                <source type="image/png" srcset="images/premium_organic.png" />

                <img src="images/premium_organic.jpg" alt="Premium Organic label" />
            </picture>
        

View source of the demo for further details

Demo: SVG Fallback

You could consider just using srcset in an img tag, to specify the .svg variant, but using the < picture > element and picturefill gives us better support for browsers that don't natively support srcset.