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!
Blurry logos on WeWeb mobile:
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
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.
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?
yes, either higher resolution png or a real svg
