SVG and <picture>

<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">
</picture>

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.

Elsewhere , , ,

Leave a Reply

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