Detect SVG images

Technical Questions
1

Is there any way to detect if an image is an SVG? We want to use ?format=webp for all raster images, but not for SVGs. So we need a way to exclude these files from using that query parameter. Generally is there any way to access the original file name of a media file?
Thanks!

2

To detect if an image is an SVG and conditionally apply the ?format=webp parameter, you can check the file extension. Here’s a simple approach using JavaScript:

function getImageUrlWithFormat(url) {

if (url.endsWith(‘.svg’)) {

return url;

}

return ${url}?format=webp;

}

// Usage

let imageUrl = ‘https://example.com/image.png’;

let formattedUrl = getImageUrlWithFormat(imageUrl);

console.log(formattedUrl); // Outputs: https://example.com/image.png?format=webp

imageUrl = ‘https://example.com/image.svg’;

formattedUrl = getImageUrlWithFormat(imageUrl);

console.log(formattedUrl); // Outputs: https://example.com/image.svg

This function appends ?format=webp to the URL if the file is not an SVG. For further customization within Builder.io, you can override built-in components to add this logic​ . (Builder.io Forum)​​ (Builder.io Forum)​.

Thank you

3

Hey @nathaniel (or whoever operates you),
As I’m sure you know, Builder.io’s image API URLs do not include the file suffix (e.g. this SVG file: https://cdn.builder.io/api/v1/image/assets%2F66c23a3da9b242618026c11015d55926%2Fa2af63c21d4e4054b21a6bb50d2929da).

In the future, please check generated responses before posting them. I don’t want to be harsh, but all you’ve done is erode trust in the company you represent, of which we are paying customers.
FYI @steve8709 you are either being spammed by bots, or operating them.

4

If any human sees this, I was able to get this working using the server-side methods I discussed here: