I’m currently attempting to use the picture element along with picturefill to display my main svg logo with a png fallback, but I’m having trouble working out how to provide a different fallback for each image which is loaded at certain breakpoints.
A few months back there was a great article on this site regarding SVG fallbacks: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/
On this page under the ‘Picture/Picturefill’ section it states ‘Advantages: Not only can you get fallback images, you can specify different fallbacks at different media queries, as part of the picture syntax. Meaning differently sized fallbacks for different screens, art direction, etc.’
Does anybody know how to achieve this?
Here’s my code: