SVG and <picture>

    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source type="image/svg+xml" srcset="path/to/header--full.svg">
    <source type="image/svg+xml" srcset="path/to/header--medium.svg" media="(max-width: 1024px)">
    <source type="image/svg+xml" srcset="path/to/header--small.svg" media="(max-width: 640px)">
    <!--[if IE 9]></video><![endif]-->
    <img src="path/to/header-1x.png" srcset="path/to/header-2x.png 2x, path/to/header-3x.png 3x" alt="Header description">

Besides using an SVG as a background image in CSS, you can serve SVG foreground images in HTML using one of several embedding techniques, each of which has its advantages and use cases. Unless you’re in need of interactivity or external styling, <img> is the standard way for loading an SVG image, but it has one disadvantage: you currently need JavaScript to provide fallback and/or change the image source for art direction. In this post, I’ll talk about a better way to do that, using the <picture> element.

Don’t forget to include PictureFill 😉

Better SVG Fallback and Art Direction With The <picture> Element →

Not familiar with <picture>? Be sure to read Introducing the <picture> element and Native Responsive Images first.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.