I’m trying to import some SVGs I created to use as custom cursors, but every time I do, they end up with a strange grey outline that wasn’t present in the original design. I even tried exporting them as PNGs, but the issue persists. Any ideas on how to fix this?
This is spot on. If you want sharp cursors, you should draw in pixels rather than using vectors.
Please avoid changing default cursors on your pages.
Eden said:
Please avoid changing default cursors on your pages.
Why shouldn’t I?
It’s wild that you’re getting downvoted for just wanting to know.
Eden said:
Please avoid changing default cursors on your pages.
Why shouldn’t I?
It’s bad user experience. Everyone is used to their own cursor, unless there’s a compelling reason to change it. Figma is an example where it works, but that’s an exception.
@Keller
Especially with a cursor like this. It provides no clear indication of where the pointer is. It seems like a grab cursor.
Eden said:
Please avoid changing default cursors on your pages.
Why shouldn’t I?
Never change how users expect to interact with devices unless it’s absolutely necessary. It’s Rule 1.
@Vero
But Rule 0 is to make sure it works. Clearly that rules in favor of changing it under the “unless necessary” clause.
Eden said:
Please avoid changing default cursors on your pages.
Why shouldn’t I?
You’re changing default behaviors that users don’t expect to be changed. This also applies to scrolling and how mouse wheels function.
@Eden
I get that. But other than the cursor issue, I have this problem with every SVG from Figma. Any solutions?
Cameron said:
@Eden
I get that. But other than the cursor issue, I have this problem with every SVG from Figma. Any solutions?
Don’t use SVG. Use Photoshop to create your cursor pixel by pixel.
Vega said:
@Arden
Always prefer vector images whenever you can.
This comment thread feels surreal.
A perfect summary of r/webdev.
Vega said:
@Arden
Always prefer vector images whenever you can.
Not in this case—vector images don’t scale well with only a few pixels to work with. For something like a cursor (which can be 10px wide), it looks better to draw it as a custom cursor. This is how major operating systems handle it. You just need 4-5 different versions for various resolutions.
Eden said:
Please avoid changing default cursors on your pages.
Why shouldn’t I?
-
People with disabilities might find this very frustrating.
-
Users have been using browsers for thirty years. They know how the UI looks and feels. Altering this can be jarring, making many users feel put off.
Eden said:
Please avoid changing default cursors on your pages.
Why shouldn’t I?
Unless you’re making a game or something very interactive, don’t change my cursor. It’s annoying. Custom cursors and altered scroll bars are things to avoid unless you have a solid reason for doing so.
@Sai
Most games still use some form of a directional arrow or pointer for the cursor, so that’s still a lot.