Unpic Image Renders WEBP Instead of SVG from Cloudinary CDN

[fromaline]

Hi, I’m encountering an issue with the @unpic/svelte package when trying to render an SVG from Cloudinary. It renders the image as a webp instead of the expected svg. When I use the same URL in an tag, the browser correctly renders the svg.

Here is an example:

<script lang="ts">
  import { Image } from '@unpic/svelte'
</script>

<!-- Renders webp  -->
<Image
  alt="Web3 Foundation"
  crossorigin="anonymous"
  decoding="async"
  fetchpriority="low"
  height={48}
  loading="lazy"
  src="https://res.cloudinary.com/dcruwhddg/image/upload/v1718985981/partners/web3-foundation_ribdtd.svg"
  width={112}
/>

<!-- Renders svg  -->
<img
  alt="Web3 Foundation"
  crossorigin="anonymous"
  decoding="async"
  fetchpriority="low"
  height={48}
  loading="lazy"
  src="https://res.cloudinary.com/dcruwhddg/image/upload/v1718985981/partners/web3-foundation_ribdtd.svg"
  width={112}
/>

@ascorbic, how to force unpic to load svg?

[ascorbic]

I should handle it more gracefully, but the answer is that Unpic isn't much use for SVGs, because they don't need srcsets or sizes or anything. I'd check the extension and conditionally load a regular img tag if it's an svg.

[fromaline]

@ascorbic, wow, thanks for the blazingly fast answer 👍