How do I force SVG-supporting browsers to load the SVG instead of fallbacks?

Question

<picture>
  <source type="image/svg+xml" srcset="icons/home.svg">
  <img src="home-1x.png" srcset="home-2x.png 2x" alt="Home">
</picture>

Safari 9, which is perfectly capable of SVG loads home-2x.png instead on my retina MacBook. Why isn't it loading the SVG? How can I force its hand?

Thanks!

Also, are there browsers that support the picture element, that don't support SVG? — Alexander O'Mara, Feb 16 '16 at 00:17
According to http://caniuse.com/picture, Safari 9.1 added picture element support, so also check what exact version you are using. — Alexander O'Mara, Feb 16 '16 at 00:22
9.0.1, sheesh. So, how about when someone browses the site using a browser that supports SVG but not PICTURE? What's the solution here to serve the PNG only as a fallback? — Michael Swarts, Feb 16 '16 at 00:28
Using an `img` tag, the options aren't so great. I suppose you could do `` and get better support than picture. Still not full support for all browsers that support SVG though. — Alexander O'Mara, Feb 16 '16 at 00:38

score 1 · Accepted Answer · answered Feb 18 '16 at 09:01

As was pointed out in a comment, <img src="home-1x.png" srcset="icons/home.svg 1x" alt="Home"> works (for SVG; not in general).

If you want to support pre-srcset browsers, you can use

<object type="image/svg+xml" data="icons/home.svg">
 <img src="home-1x.png" alt="Home">
</object>

But this has some issues, too: both resources will be loaded, the object acts more like an iframe than like an img (you can select text in the SVG, it can execute scripts, navigate, etc).

Another classic is using onerror like this:

<img src="icons/home.svg" onerror="this.onerror=null; this.src='home-1x.png';" alt="Home">

This has the drawback that non-SVG browsers will unnecessarily load the SVG, and users without scripting and without SVG support will not load any image. I suppose that's not much of a problem.

Finally, you can use the picture markup and pull in http://scottjehl.github.io/picturefill/ and then it should just work (for users with scripting enabled).

How do I force SVG-supporting browsers to load the SVG instead of fallbacks?

1 Answers1