Hi everyone!
I have a loop-animation on a website and it looks great on the desktop. But on mobile displays the image looks blurry. It’s originally SVG but I’ve tried PNG x4 and literally nothing works. The svg file was made in figma. How can I fix it?
Sharing an svg file - logoline -svgshare.com
Here’s how it looks on the phone:
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Webflow read-only link please.
Welcome,
Can you share your read-only link? This is how the community can help solve your issue.
It sounds like you may have some effect applied to the svg file which can sometimes cause blurriness. Specifically the scale property. If this is the case, try using the size property instead.
added to the topic now
Added read-only link, please have a look.
I didn’t add any effects to the svg, only the mask for the logos, so it’s basically a group of logos under the color mask. Can this be an issue somehow and if yes how can I fix this?
Hi @Anna_K
The SVG you pasted is sooooooo huuuuuge. To be honest I have never seen such a big image. Almost 27000 px width 
. Also the weight is too big, almost 2MB.
I recommend to use Figma or Illustrator. Create a separeted frame for each logo. I recommend size 160 px width, 80 px height. After export of all the logos import them to Webflow. Create a div and paste there an image. Create as many images as many logos you have. On the div use Flex:horizontal and gap 1rem. Add Webflow native interactions. Done.
Please see this tutorial: https://youtu.be/ObClLdHMhaQ?si=xKUpnx5kQvAVDWrt
This solution should take no more than 500 kb.
Thank you! Will definetely try this option 
It’s technically an SVG, but all of the PNG’s are embedded as base64-encoded data, which means it’s the size of all of those images, plus another 30%.