I have an <svg> element using a .webp image in the <image> element. It works for Chrome and Opera, but in Firefox, nothing is displayed, so I tried adding another <image> element containing the png. Now it works in Firefox, but upon inspection in the Chrome DevTools, both images were loaded as seen in the number of requests.
How can I force only 1 request (1 image to load) while providing a fallback for the webp image within the svg element for such browsers currently not supporting webp? The code is:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
<image xlink:href="image.webp" width="500" height="500"/>
<image xlink:href="image.png" width="500" height="500"/>
</svg>
