Using WebP as a background image in SVG

Question

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...

@RobertLongson Sounds easy enough, but could you provide an example or at least some more clues? I only want the browser to download one of the files and never both. — jBoive, Sep 02 '16 at 12:36
Add a foreignObject tag as a child of the svg tag, give it width and height attributes and then add the picture element as a child of the foreignObject tag. I.e. just insert the foreignObject tag into your existing hierarchy. — Robert Longson, Sep 02 '16 at 12:37
That doesn't display anything. Works in an HTML-file. I'll see if I can create an example. — jBoive, Sep 02 '16 at 12:43
are you inserting the svg as a background image in an html page via a background-image? If so you'll need to have the webp embedded in the svg file itself (as a data uri). — Robert Longson, Sep 02 '16 at 12:46

score 0 · Accepted Answer · edited Oct 07 '21 at 16:02

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>

Thanks for sharing this, but what would you do if you wanted to use an SVG with a clipping path - let's say an ellipse or other shape that frames a picture? There are no ` — Mentalist, Aug 09 '23 at 06:56
Oh, never mind - it works with a *linked* image just fine! (Haven't tested with an *embedded* image yet.) The markup inside that part of the SVG is structured like: `` It appears the browser is just getting the path from within the SVG, not relying on a separate rendering process. Tested in Firefox and Chrome. — Mentalist, Aug 09 '23 at 08:44

score 0 · Answer 2 · answered Jan 09 '20 at 16:55

0

<svg>
  <image
    href="hello-world.jpg"
    x="20" y="20"
    height="160" width="160"
  />
</svg>

mozilla docs: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

duplicate of Does SVG support embedding of bitmap images?

answered Jan 09 '20 at 16:55

milahu

2,447
1
18
25

score 0 · Answer 3 · answered Jul 24 '23 at 18:04

I tried this and ended up doing a post export replacement with a webp version of the same file:

Base64 encode the image file, for example with base64 # base64 infile.webp > outfile.webp.b64T
If you use the command line option the prefix to the image data is “data:image/webp;base64,“
Replace the … after the appropriate xlink:href="...." that references the current image with the base64 coded webp file using a text editor.

It yields a pretty significant improvement over .png coded images.

There's an example on my website at https://gessel.blackrosetech.com/2020/09/01/webp-and-svg

Using WebP as a background image in SVG

3 Answers3