htmlsvgjpegwebp

Using WebP as a background image in SVG


So I would like to do the same, or similar, to what I would do in HTML:

   <picture>
      <source type="image/webp" srcset="my-image.webp">
      <img src="my-image.jpg">
   </picture>

But, obviously this won't work:

   <svg>
      <picture>
         <source type="image/webp" srcset="my-image.webp">
         <img src="my-image.jpg">
      </picture>
   </svg>

I could use .htaccess approach, but I would prefer not to because of the 302 HTTP redirect.

The solution also needs to work without any JavaScript trickery...


Solution

  • This is what I ended up doing, thanks to the input from Robert Longson:

        <foreignObject x="0" y="0" width="100%" height="100%">
          <picture>
            <source
              width="1180"
              height="500"
              type="image/webp"
              class="lazyload"
              data-srcset="http://satyr.io/1180x500?2&type=webp&text=webp@1x&texture=graphpaper&delay=2g 1x,
                 http://satyr.io/2360x1000?type=webp&text=webp@2x&texture=graphpaper&delay=2g 2x" />
            <source
              width="1180"
              height="500"
              type="image/jpeg"
              class="lazyload"
              data-srcset="http://satyr.io/1180x500?2&type=jpg&text=jpg@1x&texture=graphpaper&delay=2g 1x,
                 http://satyr.io/2360x1000?type=jpeg&text=jpeg@2x&texture=graphpaper&delay=3g 2x" />
            <img
              width="1180"
              height="500"
              class="lazyload"
              data-src="http://satyr.io/1180x500?2&type=jpeg&text=jpeg@1x&texture=graphpaper&delay=3g"
              alt=""
          /></picture>
        </foreignObject>