# Blurry logos on mobile

**URL:** <https://community.weweb.io/t/blurry-logos-on-mobile/5264>\
**Category:** Ask us anything\
**Created:** [November 7, 2023, 6:32am UTC](https://community.weweb.io/t/blurry-logos-on-mobile/5264 "2023-11-07T06:32:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [November 7, 2023, 6:32am UTC](https://community.weweb.io/t/blurry-logos-on-mobile/5264/1 "2023-11-07T06:32:54Z")

</div>

I have two svgs that I used as my main logos on my Framer and WeWeb sites lined below. The logos look sharp on Framer but blurry on WeWeb, especially on the mobile site. I’m pretty sure I used the same svgs on both Framer and WeWeb. How do I fix the WeWeb ones to not be blurry please? Is there a recommended image file format that is preferred? I’ve tried the svg and png exported from Figma but both are blurry in WeWeb. Thanks!

> **[Pro-Tier | Portable Benefits](https://www.pro-tier.com)**
>
> Subsidized benefits that attract and retain top talent, reduce workers' out-of-pocket costs, and allow workers to keep or change their plans, no matter their job.

> **[Pro-Tier | Portable Benefits](https://app.pro-tier.com)**
>
> Subsidized benefits that attract and retain top talent, reduce workers' out-of-pocket benefits costs and and allow workers to keep or change their plans, no matter their job.

Blurry logos on WeWeb mobile:

 ![IMG_0040.PNG](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/ae343922bcb32e3011d4bce6397120cc578f19c6.jpeg)

---

<div class="post-metadata">

**Author:** ![Quentin](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/quentin/32/6_2.png) [@Quentin](https://community.weweb.io/u/Quentin)\
**Post date:** [November 7, 2023, 2:15pm UTC](https://community.weweb.io/t/blurry-logos-on-mobile/5264/2 "2023-11-07T14:15:41Z")

</div>

Are you exporting the SVG from a specific software?

SVGs can be sharp on design tools as these tools are vector-based, but browsers aren’t. Make sure the exported SVG has pixel boundaries, as explained here: [html - svg not sharp, but blurry - Stack Overflow](https://stackoverflow.com/questions/44795431/svg-not-sharp-but-blurry)

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [November 7, 2023, 2:29pm UTC](https://community.weweb.io/t/blurry-logos-on-mobile/5264/3 "2023-11-07T14:29:19Z")

</div>

Neither pictures are vector images. In Framer the top logo is a png, in weweb the logo is a png inside a svg.  
Browsers are capable of rendering sharp vector images (svg is a first class citizen) but if you put a png in a svg you are still rendering a raster image.

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [November 7, 2023, 2:47pm UTC](https://community.weweb.io/t/blurry-logos-on-mobile/5264/4 "2023-11-07T14:47:33Z")

</div>

Thanks @Quentin and @dorilama. The logo is coming out of Figma. So the ideal scenario is to get a pure svg out of Figma? If that’s not possible, then I need to get a higher resolution PNG?

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [November 7, 2023, 3:20pm UTC](https://community.weweb.io/t/blurry-logos-on-mobile/5264/5 "2023-11-07T15:20:43Z")

</div>

yes, either higher resolution png or a real svg