Streaming live at 10am (PST)

Issue with blurry SVG images on mobile

Hey everyone,

So I’m using SVG images on my website, and they function properly, unless viewed on mobile or tablets. When on smaller devices, the SVGs become strangely blurry. This problem only occurs on the published site, and not in the previewer.

It seems to function fine with JPEGs, however, I have to use SVGs for this website.

Published site:

Read only link:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Seems ok via the webflow designer/preview, is it just when published.
Can you point to an example to focus on.

Yes, sorry for the confusion. It functions in the editor, but when published and tested on mobile or tablet it’s blurry.

Here is the link for the published version:

Im not seeing it, looks fine to me on my android and resizing on desktop.
You going to have to be more specific.

Maybe it’s an IOS issue. Don’t have an android to test it on, but it shows up blurry on both my iphone and my ipad.

This is what is looks like on my iphone:

And for some strange reason it’s only two SVGs that have this problem (the illustration and call icon), not the rest.

crisp as F on mine.
Try a different browser on your phone just to try it.
I will take a peep in the mean time

Thanks, much appreciated!

Nah, Safari seems to be displaying the same strange blur

Cant really see anything live overlay etc.
What I would suggest thought is to reset any stylings not needed.
This may help with issue.

I use edge but tried chrome as well, all fine.
As an experiment, convert the image to png and see what happens.
You could also delete the image, place holder etc and re-add it.
Let me know what happens.

Very strange.

I deleted the image and container, and re-added it. Problem still persists, however JPEG works fine

Try a different svg image.
If that works, convert the one you want to png then convert to svg and try it again.
and dont forget tidy up as i suggested

and whilst I’m being bossy, clean up your 359 unused style manager and your 9 unused animations.
No idea if they get included into your live website or not but the leaner the better.

Haha thanks

So I tried using one of the other vectors on the website that doesn’t have this problem, and placing it instead of the illustration. It worked fine, and so I’m trying to figure out what makes some of them blurry and the others not. Haven’t found out how yet.

I’m using Inkscape, and i suspected that maybe some of the SVGs were exported as plain SVGs whereas the other were exported as Inkscape SVGs, but that didn’t make a difference

@arianbehfar I encountered the same issue with the svgs on my website. They look fine on the Android phone but blurry on iPhone. Please help.

So I’ve encountered this issue too. It is an iOS issue that occurs when an SVG file is smaller than 20px. Even though it’s vectors these browsers have issues expanding. If your SVG is coming from Figma or XD or AI then you’re going to have to increase the size of it before exporting. Try making it bigger. Worked for me.