SVG blurry in Webflow and how to fix it

There are a couple things that may cause SVG files to appear blurry in Webflow. Generally, SVG files are not supposed to appear blurry as they are a vector file. Vector files essentially have unlimited resolution and scale to look good on a computer at any size.

We've outlined a list of potential fixes below to help you debug and get your SVG images on Webflow looking crisp.

‍
1) The blur effect has been applied to the image or its parent

First click on the svg in the designer. In the styles menu in the bottom of the right menu in the Webflow designer, open up Effects and see if the blur style has been applied to the class or any of its parent classes.

‍

2) Your svg is too small for the browser to scale up

Even though svgs are vector images that should theoretically scale up to any size without losing resolution, browsers can have a hard time scaling up the size when it starts too small. A good rule of thumb is to export your svg from your designer (e.g. Figma or Adobe Illustrator) at a size large enough to scale (e.g. 20 px can be too small). Try making it bigger before uplaoding into Webflow.

‍

3) It's your browsers fault (not much you can do here)

Sometimes browsers display your icon at slightly different dimensions than your svg image causing blurriness or over-sharpening of horizontal or vertical lines. The best way to be certain that your svg is crisp is to create it exactly in the dimensions you will use it, but browsers have to decide what dimensions to display your svg when users zoom in and out.