<picture> with <source> format types

`<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:


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

`<picture>` patterns

`<picture>` with `<source>` format types

Source:

Browser support