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: https://www.getnet.no
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hello,
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: https://www.getnet.no
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.
Having the same issue! This is our svg which seems to be fairly large yet it still shows up blurry on browsers on iOS
Had the same issue and found a potential cause. I was exporting images from Figma (thinking they were all originally SVGs but the blurry ones were actually just imported image files (e.g. jpg/png) which I was then exporting as SVG - this doesn’t work and although the exported file has the svg extension, it is still just a low-res image. So, you either need to get your hands on a proper SVG version or just export as a PNG at the correct resolution you need. Hope this helps.
That was it! An SVG with a shadow is no longer a SVG so it’s blurry on smaller screens!
What solved it for me was duplicating the SVG in Figma, removing the shadow (not sure if this is necessary) and re-uploading it to Webflow.
I’m having the same issue, were you able to solve?
Hi, I had this issue and I managed to solve it. The problem is most likely inside your svg. This is what my svg looked like. It was exported from Sketch, but reopened in Illustrator:
As you can see there are quite a few layers that are unnecessary and that causes your svg to become unsharp. What I’ve done is remove everything except for what’s needed:
This solved the issue for me.
You can also Google for ‘Sketch svg blurry’ and you’ll see plenty of issues popping up. I hope this helps future Googlers into solving their issue!
.svg){kind=link}