# 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:** 1\
**Showing post:** 2

<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

---

_[View the full topic](https://forum.builder.io/t/detect-svg-images/5688)._