Pixelated icons and SVG-s, I'm a newbie, can't solve this on my own
Hi everyone,
I’m building a WordPress portfolio site with Elementor Pro and the Hello Elementor theme, and I’m having a strange icon/SVG issue.
Please keep in mind that I’m an absolute beginner. I’ve been following WordPress and Elementor news for the past ~2 years, but I only started actively building this page in the past month. I bought the domain around 1–2 months ago, so I’m still completely fresh to this. I also only have very basic HTML and CSS knowledge.
The problem is that icons on my site look pixelated/blurry.
This happens with:
- icons uploaded through Elementor’s icon option,
- SVGs used in an SVG/Icon widget,
- SVGs used in an Image widget,
- SVG code pasted directly into an HTML widget (This might be okay though, I've been looking at pixels for so long now i see them everywhere lol),
- and even Elementor’s own built-in icons.
The SVG files themselves seem fine. If I open the SVG directly from my computer, or open the uploaded SVG file URL directly in the browser, it looks sharp.
But once I place the SVG inside my Elementor page, it looks blurry/pixelated on the live site too, not only in the editor. I checked it in incognito as well.
I also tested the exact same SVG code with a friend. On his Elementor/WordPress site, the same SVG code looks sharp. On my site, it looks blurry.
I tried:
- different SVG files,
- different SVG download options,
- Icon widget,
- SVG/Icon widget,
- Image widget,
- HTML widget with raw inline SVG code,
- different sizes, and i clicked through every option i could click on.
The issue still remains.
What I use:
- WordPress
- Elementor Pro
- Hello Elementor theme
- containers/flexbox layout
- SVG filtering in elementor enabled
Has anyone experienced this before?
Beginner-friendly advice would be appreciated.
Thanks!