Hello all.
I currently have a company logos svg file and added it to the site. I thought SVGs were always supposed to be crisp since they’re vector based…
In the design file I have, the logo looks like this:
But when I add it to the site, this is what it looks like:
I did some quick searches within stack overflow and webflow but haven’t been able to reach a solution.
Is there a reason for this?
Can you shre the link for the live version of your website?
Not entirely sure I am allowed to be linking the site. I messaged someone asking for now but while I wait, I can probably answer any questions you may have.
Do you have a white stroke around the main path ? Or is it fully decomposed ?
There are no effects done on the image.
Can you share the source .svg file ?
Cant upload svgs to webflow forums but i found another site: -svgshare.com
Do you have any kind of css-transforms set on this icon or its parents?
Nope. Just gave it a width and a height.
Without the actual link it is hard to say but I think that’s just how the browser shows your icon when it is not 100% size of what it is. The best way to be certain that your icon is pixel perfect is to create it exactly in the dimensions you will use it. Otherwise it can be blurry.
I agree with dram, you seem to be just unlucky. It looks like it’s just normal anti-aliasing. At certain angles, it can show up “blurry” though you’ll probably be the only one noticing it. You’d have to pay very close attention to think it’s blurry. What you could do is try to upscale it just a bit, like 1.01 and try to increment by 0.01 until you get the “best” render. Downscaling would also work the same.
I think I know what the problem is…
Safari sucks at rendering svgs at smaller sizes + im using a not-the-greatest 2nd monitor to view the site. Things look alright on chrome + firefox from my mac display. It looks blurry on my phone since it defaults to safari.
I appreciate you guys chiming in and trying to help!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.