Although most vector programs such as Inkscape and Illustrator do not support embedding WebP compressed images in SVG, it is possible to embed webp in svg and most web browsers support it.
WebP offers amazing compression compared to png and jpg, has transparency support and is a great option for embedding images in svg.
To embed webp in svg you just need to base64 encode the webp image and include in your svg file. I find it easiest to embed the original png/jpg image and then update the xlink:href.
Original svg
xlink:href="data:image/png;base64,Base64-Encoded-PNG-data-here"Updated svg
xlink:href="data:image/webp;base64,Base64-Encoded-WebP-data-here"Examples:
| Original SVG with embedded png/jpg images | Updated SVG with embedded webp images |
 |
 |
I have created a free online tool that you can use to do this for you here: Free Online SVG Compressor
- Log in to post comments