<picture> patterns

<picture> with <source> format types

A nifty trick of the <picture> element is the ability to swap out source types. Here we use an SVG that, were the browser not knowledgeable in how to render SVGs, would not render and instead fall back to the png images.

Note that the SVG colours are a bit unusual compared to the other images as certain blending modes were used in the original source which are not supported in SVG. This is in no way a reflection of the <picture> element behaviour.


					    <source srcset="img.svg"     type="image/svg+xml">
					    <source srcset="img-640.png" type="image/png">
					    <img src="img-320.png">

Browser support

Pass Chrome 46
Pass Firefox 42
Fail Safari 9
No <picture> support.
Fail Edge 12
No <picture> support.
Pass Edge 13
Pass Android Chrome 44
Fail iOS Safari 9
No <picture> support.

« Back to <picture> patterns