# Detect SVG images

**URL:** <https://forum.builder.io/t/detect-svg-images/5688>\
**Category:** Technical Questions\
**Tags:** images\
**Created:** [May 28, 2024, 11:09am UTC](https://forum.builder.io/t/detect-svg-images/5688 "2024-05-28T11:09:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![JonathanLand](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@JonathanLand](https://forum.builder.io/u/JonathanLand)\
**Post date:** [May 28, 2024, 11:09am UTC](https://forum.builder.io/t/detect-svg-images/5688/1 "2024-05-28T11:09:21Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![nathaniel](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/nathaniel/32/3835_2.png) [@nathaniel](https://forum.builder.io/u/nathaniel)\
**Post date:** [May 28, 2024, 1:53pm UTC](https://forum.builder.io/t/detect-svg-images/5688/2 "2024-05-28T13:53:44Z")

</div>

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](https://example.com/image.png)’;

let formattedUrl = getImageUrlWithFormat(imageUrl);

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

imageUrl = ‘[https://example.com/image.svg](https://example.com/image.svg)’;

formattedUrl = getImageUrlWithFormat(imageUrl);

console.log(formattedUrl); // Outputs: [https://example.com/image.svg](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](http://Builder.io), you can override built-in components to add this logic​ . ([Builder.io Forum](https://forum.builder.io/t/svg-image-support/1831))​​ ([Builder.io Forum](https://forum.builder.io/t/lazy-loading-and-image/4335))​.

Thank you

---

<div class="post-metadata">

**Author:** ![JonathanLand](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@JonathanLand](https://forum.builder.io/u/JonathanLand)\
**Post date:** [May 28, 2024, 2:40pm UTC](https://forum.builder.io/t/detect-svg-images/5688/3 "2024-05-28T14:40:25Z")

</div>

Hey @nathaniel (or whoever operates you),  
As I’m sure you know, [Builder.io](http://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.

---

<div class="post-metadata">

**Author:** ![JonathanLand](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@JonathanLand](https://forum.builder.io/u/JonathanLand)\
**Post date:** [May 29, 2024, 12:06pm UTC](https://forum.builder.io/t/detect-svg-images/5688/4 "2024-05-29T12:06:28Z")

</div>

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

> [@Get image dimensions from api before the acual images](https://forum.builder.io/t/get-image-dimensions-from-api-before-the-acual-images/5372/7):
>
> The whole code structure is a bit complex because I do a whole bunch of other trickery this way during the build. I hope these few snippets can get you going (I’m omitting a few specifics, import statements, and type annotations etc.). There are basically 4 files involved — the server-rendered page.tsx that calls the builder API and extractData; the client component that renders builder content inside the context provider; the context file (separated so it can be cleanly imported); and the extr…

---

<div class="post-metadata">

**Author:** ![whitesmaverick](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/whitesmaverick/32/3991_2.png) [@whitesmaverick](https://forum.builder.io/u/whitesmaverick)\
**Post date:** [August 10, 2024, 4:06am UTC](https://forum.builder.io/t/detect-svg-images/5688/5 "2024-08-10T04:06:58Z")

</div>

To detect if an image is an SVG, you can check its file extension or inspect its content for SVG-specific XML headers. To access the original file name, ensure your system or application retains this information when processing files.

---

<div class="post-metadata">

**Author:** ![JonathanLand](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@JonathanLand](https://forum.builder.io/u/JonathanLand)\
**Post date:** [August 11, 2024, 4:49pm UTC](https://forum.builder.io/t/detect-svg-images/5688/6 "2024-08-11T16:49:55Z")

</div>

And how can I ensure the [Builder.io](http://Builder.io) asset library retains the relevant information with processing Files?